ASP.NET : Avoir plus de contrôle sur ce qui est affiché dans un GridView (TemplateField)

La façon la plus simple de définir les colonnes du GridView consiste à utiliser un BoundField pour chaque champ à afficher. Le BoundField génère un Label dont la valeur correspond aux données lues dans la BD. Et lorsqu'une ligne du GridView passe en mode édition, le Label se transforme automatiquement en TextBox.

Nous aurons parfois besoin de plus de contrôle sur l'affichage des données, que ce soit en mode affichage ou en mode édition. À ce moment, on laissera tomber le BoundField pour un TemplateField, qui est beacoup plus flexible.

Voici quelques figures de cas :

  • Si on voulait ajouter un lien dans une cellule, le TemplateField serait notre allié.
  • On pourrait également utiliser le TemplateField pour afficher une image de crochet ou de X selon la valeur d'un champ booléen.
  • En mode édition, on pourrait avoir besoin d'un validateur qui accompagne le TextBox afin d'assurer qu'une valeur ne soit pas nulle ou qu'un nombre contienne une valeur numérique.
  • Si on reprend l'exemple du champ booléen, le TemplateField nous permettrait de remplacer l'image par un CheckBox lorsqu'on passe en mode édition.
  • Dernier exemple : lorsqu'on affiche la valeur d'une clé étrangère, il serait intéressant d'obtenir un DropDownList lorsqu'on passe en mode édition.

▼Publicité

Puisque le TemplateField est plus souple que le BoundField, il faut s'attendre à avoir un peu plus de travail à faire pour le configurer. Pour chaque TemplateField, on créera un ItemTemplate pour définir le comportement en mode affichage et un EditItemTemplate pour définir le comportement en mode édition.

Notez que dans un même GridView, il est possible d'utiliser un BoundField pour certaines colonnes et un TemplateField pour d'autres.

Ex :

Fichier .aspx (ASP.NET)

<asp:GridView ID="gridViewProduits" ...>

    <Columns>

        <%-- Cette colonne est en lecture seule et chaque code a un lien permettant d'atteindre la fiche du produit --%>

        <asp:TemplateField HeaderText="Code" SortExpression="produit_code">

            <ItemTemplate>

                <a href='<%# Eval("produit_url") %>'>         

                    <asp:Label ID="labelCode" runat="server" Text='<%# Eval("produit_code") %>' />

                </a>

            </ItemTemplate>

        </asp:TemplateField>

        <%-- Cette colonne est éditable et contient une validation --%>

        <asp:TemplateField HeaderText="Nom" SortExpression="produit_nom">

            <ItemTemplate>

                <asp:Label ID="labelNom" runat="server" Text='<%# Eval("produit_nom") %>' />

            </ItemTemplate>

            <EditItemTemplate>

                <asp:TextBox ID="textBoxNom" runat="server" MaxLength="50" Text='<%# Bind("produit_nom") %>' />

                <asp:RequiredFieldValidator ID="requiredFieldValidatorNom" runat="server" ControlToValidate="textBoxNom"

                    ErrorMessage="requis" CssClass="erreurvalidateur" SetFocusOnError="True" />

            </EditItemTemplate>

        </asp:TemplateField>

        <%-- Cette colonne est éditable et un TextBox seul convient parfaitement alors on utilise un simple BoundField --%>

        <asp:BoundField DataField="produit_description"

            HeaderText="Description" SortExpression="produit_description" />

    </Columns>

</asp:GridView>

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories