Christine Dubois

toute la lumière sur...comment implémenter la sélection d'une ligne d'une GridView dans une webform comme dans une winform ?

Par défaut, la sélection d'une ligne dans un contrôle serveur web ASP.NET 2.0 de type GridView se fait au travers d'une colonne spécifique de type CommandField, ce qui donne à l'affichage une colonne avec un lien hypertexte Sélectionner (cf. grille du haut dans la Figure 1).

Comment faire pour gérer la sélection de manière plus classique comme dans une grille d'une winform, simplement en cliquant n'importe où avec la souris sur la ligne (cf. grille du bas dans la Figure 1) ?

                                               - Figure 1 -

Voici le source de la page avec une grille implémentant une colonne "Sélectionner" de type CommandField :

<asp:SqlDataSource ID="dsAnnonces" runat="server" ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>"
    SelectCommand="SELECT [Ann_Telephone], [Ann_Email], [Ann_Prix], [Ann_CodePostal] FROM [Annonces]">
</asp:SqlDataSource>       
<asp:GridView ID="gvAnnonces" runat="server" AutoGenerateColumns="False" DataSourceID="dsAnnonces">
    <SelectedRowStyle BackColor="Blue" ForeColor="white"  />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="Ann_Email" HeaderText="email" SortExpression="Ann_Email" />
        <asp:BoundField DataField="Ann_Prix" HeaderText="Montant" SortExpression="Ann_Prix" />
        <asp:BoundField DataField="Ann_Telephone" HeaderText="T&#233;l" SortExpression="Ann_Telephone"/>
    </Columns>
</asp:GridView>

• remplacer les colonnes standards de type BoundField par des colonnes de type ButtonField. L'intérêt du type de colonne ButtonField est que son rendu en html dans la page de réponse renvoyée au navigateur est un lien hypertexte. D'où la sélection de la ligne simplement en cliquant sur une colonne avec la souris !
• Attention, il faut également remplacer l'attribut DataField qui définit la liaison de données avec le contrôle de source de données de type SqlDataSource, par l'attribut équivalent nommé DataTextField.
• pour terminer il faut ajouter sur chaque colonne l'attribut CommandName avec la valeur Select pour associer l'action de sélection équivalente à la colonne de type CommandField que vous aviez par défaut, c'est-à-dire pour exécuter l'ordre de sélection sur la ligne.

<asp:SqlDataSource ID="dsAnnonces" runat="server" ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>"
    SelectCommand="SELECT [Ann_Telephone], [Ann_Email], [Ann_Prix], [Ann_CodePostal] FROM [Annonces]">
</asp:SqlDataSource>      
<asp:GridView ID="gvAnnonces" runat="server" AutoGenerateColumns="False" DataSourceID="dsAnnonces">
    <SelectedRowStyle BackColor="Blue" ForeColor="white"  />
    <Columns>
        <asp:ButtonField DataTextField ="Ann_Email" CommandName="Select" HeaderText="email" SortExpression="Ann_Email" />
        <asp:ButtonField DataTextField="Ann_Prix" CommandName="Select" HeaderText="Montant" SortExpression="Ann_Prix" />
        <asp:ButtonField DataTextField="Ann_Telephone" CommandName="Select" HeaderText="T&#233;l" SortExpression="Ann_Telephone"/>
    </Columns>
</asp:GridView>

Pour aller plus loin...
Etant donné qu'une colonne a pour rendu un lien hypertexte, vous vous retrouvez avec un style d'affichage pas terrible. En créant une règle d'affichage dans une feuille de style comme ci-dessous, vous pouvez vous débarrasser du soulignement usuel des liens hypertextes :

a,
a:link,
a:visited,
a:active,
a:hover
{
    text-decoration:none;
}

De la même manière, est-ce que vous avez remarqué que si l'utilisateur clique entre deux colonnes ou en dehors du texte de la ligne, la sélection ne se déclenche pas. Cela vient du fait que le lien hypertexte prend par défaut la dimension du texte associé. Pour étendre le lien hypertexte à la largeur complète d'une colonne, il suffit d'ajouter les deux propriétés suivantes à la règle d'affichage précédente :

a,
a:link,
a:visited,
a:active,
a:hover
{
    text-decoration:none;
    display:block;
    width:100%;
}

Et le tour est joué !