Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

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) ?

Sélection dans une  GridView

                                               - 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>
Le principe consiste à :
  • 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é !

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: lundi 18 décembre 2006 18:42 par bianca
Classé sous : ,

Commentaires

cyril a dit :

Mouais, c'est sympa mais je trouve pas ça très propre...

J'avais fait un extender qui permettait justement de rendre la ligne (le tr) vraiment selectable. Ainsi on n'avais absolument rien à modifier dans le code, il est prévu que j'écrive un article sur cet extender ...

Ca reste malgré tous sympa car c'est très simple à mettre en place :-)

# décembre 18, 2006 21:06

Simon a dit :

Pareil... le concept de l'extender me plait plus... le fait de modifier la structure html me parait super bof. Par contre effectivement, c'est à se demander pourquoi ce n'est pas fait de base. Un autre avantage de l'extender c'est que si tu as des colones d'action tu ne perds pas les actions propres à la colone, et en même temps la zone vide te permet de sélectionner la ligne... Encore une idée de plus à approfondir :-)

# décembre 18, 2006 22:55
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01