Comment : appliquer un style CSS aux colonnes triées dans un contrôle serveur Web GridView

Dans le contrôle GridView, vous pouvez spécifier des règles de style CSS qui s'appliquent à la colonne et à l'en-tête utilisés pour trier les données. Par exemple, vous pouvez modifier l'apparence de la colonne et de l'en-tête en fonction du sens de tri.

Afin de spécifier des règles CSS pour une colonne utilisée pour trier les données, vous définissez les propriétés TableItemStyle des colonnes GridView. Vous pouvez définir les propriétés TableItemStyle suivantes pour appliquer des règles de style aux colonnes GridView :

Pour appliquer un style CSS aux colonnes utilisées pour trier les données

  1. Ouvrez une page Web ASP.NET qui contient le contrôle GridView que vous souhaitez configurer.

  2. Dans la fenêtre Propriétés, ouvrez le nœud de la propriété SortedAscendingCellStyle.

  3. Définissez les styles CSS à appliquer à la colonne triée.

    Le style CSS que vous choisissez sera appliqué à toutes les cellules de la colonne utilisée pour trier les données lorsque le sens de tri est croissant.

  4. Répétez l'étape précédente pour les propriétés suivantes :

    L'exemple suivant affiche le balisage d'un style CSS qui sera appliqué aux cellules et à l'en-tête de la colonne utilisée pour trier les données lorsque le sens de tri est croissant.

    <SortedAscendingCellStyle BackColor="LightBlue" />
    <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White" CssClass="AscHeader"/>
    

L'exemple suivant montre comment définir la couleur d'arrière-plan des cellules et de l'en-tête de la colonne utilisée pour trier les données. Le style CSS des cellules et de l'en-tête change lorsque le sens de tri est modifié.

<asp:GridView runat="server" AllowSorting="True"  
    AutoGenerateColumns="True"
    DataKeyNames="ProductID"
    DataSourceID="SqlDataSource1"
    AutoGenerateDeleteButton="True"    
    AutoGenerateEditButton="True" 
    AutoGenerateSelectButton="True">
  <HeaderStyle BackColor="#eeeeee" />
  <SelectedRowStyle  BackColor="Yellow"  />
  <SortedAscendingHeaderStyle BackColor="Blue" ForeColor="White"   
      ssClass="AscHeader"/>
  <SortedAscendingCellStyle BackColor="LightBlue" />
  <SortedDescendingHeaderStyle BackColor="Green" ForeColor="White"  
      CssClass="DescHeader" />
  <SortedDescendingCellStyle BackColor="LightGreen"/>
</asp:GridView>

Pour compiler le code de l'exemple, vous avez besoin des éléments suivants :

  • Visual Studio 2010 ou Visual Web Developer 2010 Express. 

Ajouts de la communauté

Afficher: