Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

DevExpress : ASPxGridView en ASP.NET

Par Alexis GARCIA Publié le 30/10/2016 à 16:26:07 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Developer Express Inc (DevExpress) propose des bibliothèques payantes de composants responsive, prêt à l'emploi, facile à utiliser, proposant un très grand nombre de fonctionnalité et bien sûr compatible avec les navigateurs les plus répandus dont Internet Explorer, Microsoft Edge, FireFox, Chrome, Safari et Opera. La société Californienne a d'ailleurs été primée à de multiples reprises pour les produits qu'elle commercialise et leur support technique, qu'elle qualifie de première classe. En effet, ce dernier est très réactif et propose des réponses très complètes.

Dans cet article, nous nous intéresserons à un de leur composant en particulier : l'ASPxGridView, qui est probablement un des plus utilisé.

Présentation

L'ASPxGridView est un composant DevExpress prêt à l'emploi et très simple d'utilisation. Ce dernier se présente sous la forme d'un tableau horizontal (avec les entêtes en haut et les lignes de données en dessous) et permet d'accueillir de très grandes quantités de données tout en étant très rapide, comme vous pouvez le constater ici. Par ailleurs, il regorge de fonctionnalités lui permettant de traiter et de gérer l'affichage de ces données.

Les fonctionnalités

La base

Comme nous l'avons vu précédemment, l'ASPxGridView est un composant prêt à l'emploi, en effet, il ne suffit que de très peu de lignes de code pour s'en servir.

<dx:ASPxGridView runat="server" ID="grid" ClientInstanceName="grid" AutoGenerateColumns="False"
    DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:GridViewDataColumn FieldName="FirstName" VisibleIndex="0" />
        <dx:GridViewDataColumn FieldName="LastName" VisibleIndex="1" />
        <dx:GridViewDataColumn FieldName="BirthDate" VisibleIndex="2" />
        <dx:GridViewDataColumn FieldName="Title" VisibleIndex="3" />
    </Columns>
</dx:ASPxGridView>

Dans cet exemple, nous remarquons que notre ASPxGridView possède deux ''noms'' :

  • ID : L'ID permet de le retrouver côté server, donc en C#,

  • ClientInstanceName : Le ClientInstanceName permet de le retrouver côté client, donc en JavaScript.

Nous pouvons voir qu'une source de donnée est utilisée. Ces données peuvent provenir, entre autres, d'une requête SQL (SqlDataSource), ce qui est le cas le plus fréquent. Nous ne verrons pas comment ces sources fonctionnent car il ne s'agit pas de composants DevExpress.

Nous pouvons aussi constater que toutes les colonnes sont spécifiées. Cela n'est pas obligatoire, il est tout à fait possible d'afficher directement toutes les données de la source en passant la valeur du paramètre ''AutoGenerateColumns'' à vrai et en supprimant les balises ''Columns'' et leur contenu. Cependant, tout comme les SELECT * en SQL, ce n'est pas recommandé car d'une part car vous n'aurez pas le contrôle sur ce qui sera affiché et d'autre part car vous serez dans l'incapacité de modifier la façon dont les données s'afficheront (par exemple : format des dates, ordre des colonnes, etc... ).

Aussi, un champ ''clé'' est renseigné. Cela permettra d'effectuer divers traitements que nous verrons plus tard.

Le tri

Le tri est quelque chose de très important dans les tableaux, l'ASPxGridView offre donc cette possibilité, elle est d'ailleurs activée par défaut. Vous pouvez ainsi trier les données suivant une ou plusieurs colonnes, par ordre croissant ou décroissant, en cliquant sur l'entête de la colonne (shift + clic pour trier suivant plusieurs colonnes). Une petite flèche apparaitra alors pour vous indiquer le sens du tri.

Il peut arriver que vous ne souhaitiez pas que l'utilisateur puisse trier les données, deux options s'offrent alors à vous : soit vous désactivez totalement la fonctionnalité, soit vous ne la désactivez que pour certaines colonnes.

Pour la première solution, il suffit de désactiver le tri au niveau de l'ASPxGridView :

<dx:ASPxGridView runat="server" ID="grid" ClientInstanceName="grid" AutoGenerateColumns="False"
    DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <SettingsBehavior AllowSort="False" />
    <Columns> ... </Columns>
</dx:ASPxGridView>

Et pour la deuxième solution, il suffit de le désactiver au niveau de la définition de la colonne (ce qui n'est pas possible si vous générez ces dernières automatiquement) :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="EmployeesDataSource">
    <Columns>
        <dx:GridViewDataColumn FieldName="FirstName" VisibleIndex="0">
            <Settings AllowSort="False"/>
        </dx:GridViewDataColumn>
        ...
    </Columns>
</dx:ASPxGridView>

Le groupement

Il est aussi possible de grouper les données par colonne, là aussi, vous pouvez grouper par une ou plusieurs colonnes. Pour ce faire, c'est tout aussi simple, il suffit d'autoriser le groupement, le tri et d'afficher le panneau de groupe :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="OrderDataSource">
    <Settings ShowGroupPanel="True" />
    <SettingsBehavior AllowGroup="True" AllowSort="True" />
    <Columns> ... </Columns>
</dx:ASPxGridView>

Une fois ceci fait, il vous suffit de faire glisser l'entête de la colonne par laquelle vous voulez grouper les données dans le panneau de groupe (qui se situe juste au-dessus) et de réitérer l'opération pour chaque groupement.

Nous venons de voir le groupement par colonne mais il est aussi possible d'aller plus loin en groupant sur une partie de la donnée d'une colonne. Dans l'exemple qui va suivre, nous allons faire un groupement sur l'année de la date contenue dans la colonne sur laquelle nous groupons les données :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="OrderDataSource">
    <Settings ShowGroupPanel="True" />
    <SettingsBehavior AllowGroup="True" AllowSort="True" />
    <Columns>
        ...
        <dx:GridViewDataDateColumn FieldName="OrderDate" VisibleIndex="3">
            <Settings GroupInterval="DateYear" />
        </dx:GridViewDataDateColumn>
        ...
    </Columns>
    ...
</dx:ASPxGridView>

Bien sûr, si vous voulez effectuer un groupement qui soit effectif sans intervention de l'utilisateur, c'est possible, il suffit de renseigner à quel niveau vous souhaitez que le groupement se fasse (plus la valeur est proche de 0, plus on approche du groupement principal) :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="OrderDataSource">
    <Settings ShowGroupPanel="True" />
    <SettingsBehavior AllowGroup="True" AllowSort="True" />
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="0" GroupIndex="0" />
        ...
    </Columns>
    ...
</dx:ASPxGridView>

Le filtrage

L'ASPxGridView permet différentes façons de filtrer les données qu'il contient.

Tout d'abord, il est possible d'afficher une barre de recherche qui permettra de n'afficher que les lignes contenant la valeur que vous avez renseigné et de surligner ce qui correspond exactement à votre recherche, si vous le souhaitez. Ce mode de filtrage est le plus simple de tous mais il reste très limité.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomersDataSource">
    <SettingsSearchPanel Visible="true" HighlightResults="true"/>
    <Columns> ... </Columns>
</dx:ASPxGridView>

Il est aussi possible de simplement afficher un petit entonnoir dans l'entête de la colonne. Cet entonnoir déroulera la liste de tous les choix possibles, dans chaque colonne, vous pouvez ainsi sélectionner uniquement les valeurs que vous souhaitez voir. Ce mode reste simple d'utilisation et permet de filtrer plusieurs valeurs simultanément.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="InvoicesDataSource">
    <Settings ShowHeaderFilterButton="true" />
    <Columns> ... </Columns>
</dx:ASPxGridView>

Entre autre, il permet même de filtrer sur une fourchette de valeur. D'autres paramétrages sont possibles.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="ObjectDataSource1">
    <Columns>
        ...
        <dx:GridViewDataDateColumn FieldName="VisitDate">
            <SettingsHeaderFilter Mode="DateRangePicker" />
        <dx:GridViewDataDateColumn>
    </Columns>
    <Settings ShowFilterBar="Visible" />
</dx:ASPxGridView>

Il offre aussi la possibilité d'afficher une ligne supplémentaire au tableau, cette dernière peut contenir des champs de saisie ou des listes. Ce mode de filtrage est pratique et offre une plus grande liberté tout en restant tout aussi simple mais moins jolie? Cependant, contrairement au mode précédent, une seule valeur par colonne est possible.

<dx:ASPxGridView runat="server" ID="Grid" DataSourceID="ProductsDataSource">
    <Settings ShowFilterRow="True" />
    <Columns> ... </Columns>
</dx:ASPxGridView>

Pour finir, un dernier mode de filtrage est disponible : le constructeur de filtre. Ce mode permet de faire ce que tous les autres font et même plus mais il n'est pas à la portée de tous. En effet, il est beaucoup plus compliqué à utiliser et est moins jolie.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="ProductsDataSource">
    <Settings ShowFilterBar="Visible" />
    <Columns> ... </Columns>
</dx:ASPxGridView>

Figure 1. Sur cette capture d'écran, nous pouvons voir la ligne récapitulative des filtres juste en dessous du tableau et le formulaire de construction des filtres, qui est disponible en cliquant sur le petit entonnoir à gauche du récapitulatif.

Sur cette capture d'écran, nous pouvons voir la ligne récapitulative des filtres juste en dessous du tableau et le formulaire de construction des filtres, qui est disponible en cliquant sur le petit entonnoir à gauche du récapitulatif.

Les calculs

Comme vous l'avez peut-être déjà remarqué grâce aux précédentes captures d'écran, il est possible d'afficher des données calculées comme la moyenne ou la somme de toutes les données d'une colonne par exemple. Vous pouvez aussi créer votre propre règle de calcul.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="InvoicesDataSource">
    <Settings ShowFooter="True" />
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count" />
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
        <dx:ASPxSummaryItem FieldName="Quantity" SummaryType="Min" />
        <dx:ASPxSummaryItem FieldName="Quantity" SummaryType="Average" />
        <dx:ASPxSummaryItem FieldName="Quantity" SummaryType="Max" />
    </TotalSummary>
    <Columns> ... </Columns>
</dx:ASPxGridView>

Il est aussi possible de les afficher selon des données groupées, pour ce faire, deux types d'affichage s'offre à vous, soit comme nous l'avons précédemment vu, c'est-à-dire juste en dessous des données du groupe :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="SalesPersonsDataSource">
    <Settings ShowGroupFooter="VisibleIfExpanded" />
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="Country" ShowInGroupFooterColumn="Country" SummaryType="Count" />
        <dx:ASPxSummaryItem FieldName="Quantity" ShowInGroupFooterColumn="Quantity" SummaryType="Sum" />
        <dx:ASPxSummaryItem FieldName="Total" ShowInGroupFooterColumn="Total" SummaryType="Sum" />
    </GroupSummary>
    <Columns> ... </Columns>
</dx:ASPxGridView>

Soit directement sur la ligne du groupe :

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="InvoicesDataSource">
    <Columns> ... </Columns>
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="Total" SummaryType="Sum" />
        <dx:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count" />
    </GroupSummary>
    ...
</dx:ASPxGridView>

La vue détaillée

Vous pouvez aussi personnaliser l'affichage avec les vues détaillées, vous pourrez ainsi afficher tout ce que vous souhaitez, par exemple d'autres informations comme c'est le cas dans l'exemple suivant :

ASPX : 
<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <Columns> ... </Columns>
    <SettingsDetail ShowDetailRow="true" />
    <Templates>
        <DetailRow>
            ...
            <dx:ASPxGridView runat="server" ID="detailGrid"
                DataSourceID="InvoicesDataSource" OnBeforePerformDataSelect="detailGrid_DataSelect">
                ...
            </dx:ASPxGridView>
        </DetailRow>
    </Templates>
</dx:ASPxGridView>
C# : 
protected void detailGrid_DataSelect(object sender, EventArgs e) {
    Session["CustomerID"] = (sender as ASPxGridView).GetMasterRowKeyValue();
}

Le code C# en gras permet de récupérer la ''clé'' de la ligne pour laquelle nous voulons afficher le détail.

L'export de données

Il peut vous arriver d'avoir besoin d'exporter les données que vous avez sous les yeux, pour les envoyer à un collaborateur par exemple, cela est possible avec l'ASPxGridView. Pour ce faire, nous allons utiliser le composant DevExpress ToolBarExport pour simplifier la mise en place des boutons d'export mais cela n'est pas obligatoire, un simple bouton peut tout aussi bien faire l'affaire.

ASPX : 
<dx:ToolbarExport runat="server" ID="toolbarExport" ExportItemTypes="Pdf,Xls,Xlsx,Rtf,Csv"
    OnItemClick="ToolbarExport_ItemClick" />
<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomerReportsDataSource">
    ...
</dx:ASPxGridView>
<dx:ASPxGridViewExporter runat="server" ID="gridExport" GridViewID="grid"></dx:ASPxGridViewExporter>
C# : 
protected void ToolbarExport_ItemClick(object source, ExportItemClickEventArgs e) {
    switch(e.ExportType) {
        case ExportFormat.Pdf:
            gridExport.WritePdfToResponse();
            break;
        case ExportFormat.Xls:
            gridExport.WriteXlsToResponse(new XlsExportOptionsEx { ExportType = ExportType.WYSIWYG });
            break;
        case ExportFormat.Xlsx:
            gridExport.WriteXlsxToResponse(new XlsxExportOptionsEx { ExportType = ExportType.WYSIWYG });
            break;
        case ExportFormat.Rtf:
            gridExport.WriteRtfToResponse();
            break;
        case ExportFormat.Csv:
            gridExport.WriteCsvToResponse(new CsvExportOptionsEx() { ExportType = ExportType.WYSIWYG });
            break;
    }
}

La fusion de cellules

Il arrive souvent que de les données que nous utilisons aient des valeurs communes, dans ces cas les tableaux comme nous les avons vu depuis le début de cet article apparaissent assez lourd à exploiter, c'est pourquoi l'ASPxGridView offre la possibilité de fusionner les cellules ayant la même valeur, ce qui rend les tableaux beaucoup plus agréables visuellement parlant.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomersDataSource">
    <Columns> ... </Columns>
    <SettingsBehavior AllowCellMerge="true" />
</dx:ASPxGridView>

Il est aussi possible de n'activer cette fonctionnalité que pour une colonne en particulier.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomersDataSource">
    <Columns>
        ... 
        <dx:GridViewDataColumn FieldName="Country">
            <Settings AllowCellMerge="true" />
        </dx:GridViewDataColumn>
    </Columns>
</dx:ASPxGridView>

Le formatage conditionnel

Un indicateur visuel est très souvent utile lors du traitement de données, en effet cela permet d'orienter notre regard directement sur les données qui requièrent notre attention. Le formatage de données est lui aussi très simple à mettre en place.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="InvoicesDataSource">
    <Columns> ... </Columns>
    <FormatConditions>
        ...
        <dx:GridViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="ItalicText" />
        <dx:GridViewFormatConditionTopBottom FieldName="UnitPrice" Rule="AboveAverage" Format="RedText" />
        <dx:GridViewFormatConditionColorScale FieldName="Quantity" Format="BlueWhiteRed" />
        <dx:GridViewFormatConditionIconSet FieldName="Quantity" Format="Ratings4" />
        <dx:GridViewFormatConditionIconSet FieldName="Total" Format="Arrows5Colored" />
    </FormatConditions>
</dx:ASPxGridView>

Le défilement

Naturellement, il est possible de faire défiler les données dans le tableau. Ceci est géré par défaut mais il existe des paramétrages qui peuvent s'avérer utiles.

Vous pouvez ancrer des colonnes afin de toujours voir leurs informations, même en défilant latéralement.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="CustomersDataSource">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="CustomerID" Width="100" VisibleIndex="0" FixedStyle="Left" />
        <dx:GridViewDataTextColumn FieldName="ContactName" Width="120" VisibleIndex="1" FixedStyle="Left" />
        <dx:GridViewDataTextColumn FieldName="CompanyName" Width="200" VisibleIndex="2" />
        <dx:GridViewDataTextColumn FieldName="ContactTitle" Width="200" VisibleIndex="3" />
        ...
    </Columns>
    ...
</dx:ASPxGridView>

Figure 2. Les colonnes ''Customer ID'' et ''Contact Name'' sont ancrées, elles sont volontairement colorées.

Les colonnes ''Customer ID'' et ''Contact Name'' sont ancrées, elles sont volontairement colorées.

Les deux sortes de défilement qui vont suivre se ressemblent mais leur fonctionnement est différent.

La première permet d'afficher toutes les données en une seule page, une fois arrivé en bas, l'ASPxGridView charge des lignes supplémentaires et les ajoute. Cette méthode est très agréable à utiliser, cependant avec de grosse quantités de données, nous en voyons vite les limites.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="OrdersDataSource">
    <Columns> ... </Columns>
    <SettingsPager Mode="EndlessPaging" PageSize="20" />
</dx:ASPxGridView>

La propriété ''PageSize'' permet ici de définir combien de lignes nous souhaitons à chaque chargement.

La seconde méthode se situe entre celle que nous venons de voir et la pagination classique, le défilement est lui aussi ''sans fin'' mais il fonctionne par page, les données des pages précédentes et suivantes disparaitront à charge chargement. Cette méthode est donc un peu moins agréable car il faudra attendre que les données se rechargent avant de pouvoir voir les lignes plus haut, cela est un peu dérangeant bien que l'arrivée du style 'VirtualSmooth' ait très grandement amélioré ce point. Le gros avantage de cette méthode est qu'elle permet de conserver des performances identiques, ce qui permet d'exploiter d'énormes quantités de données sans engendrer de ralentissement.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" Width="100%"
        DataSourceID="SalesPersonsDataSource">
    <Columns> ... </Columns>
    <Settings VerticalScrollBarStyle="VirtualSmooth" />
    ...
</dx:ASPxGridView>

Figure 3. Nous pouvons voir ici ce qui se passe lorsqu'on se trouve entre deux pages

Nous pouvons voir ici ce qui se passe lorsqu'on se trouve entre deux pages

Les thèmes

Différents thèmes sont disponibles afin de convenir au mieux au design de votre site, ces derniers couvrent une large place de design : des très classiques aux plus travaillés.

<dx:ASPxGridView runat="server" ID="grid" DataSourceID="ProductsDataSource" Theme="Office2010Blue">
    <Columns> ... </Columns>
</dx:ASPxGridView>

Figure 4. Default Theme

Default Theme

Figure 5. DevExpress Style Theme

DevExpress Style Theme

Figure 6. iOS Theme

iOS Theme

Figure 7. Material Theme

Material Theme

Conclusion

Comme nous venons de le voir avec l'ASPxGridView, les composants proposés par DevExpress offrent un réel gain de productivité puisqu'ils sont très simples d'utilisation, rapides à mettre en place et offrent énormément de fonctionnalités. Celles de l'ASPxGridView ne sont bien sûr pas toutes présentées dans cet article, toutes les options de paramétrage de celles-ci non plus, cependant, je pense avoir sélectionné les plus utiles dans la majorité des cas.

Source et liens utiles

Liens utiles

Pour plus d'information concernant l'ASPxGridView, suivez ces liens :

Si vous rencontrez un problème ou que vous ne comprenez pas le fonctionnement de certaines fonctionnalités, vous pouvez poser vos questions mais vous trouverez très probablement des réponses en suivant ce lien :

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels