Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

[ASP.NET] Fixer la ligne du Header d'un GridView

Vous avez toujours rêver d' utiliser les GridView, mais il y a trop de lignes.
Vous voulez donc permettre le "scroll" vertical , mais par défaut la ligne de titres scroll aussi, ce qui est gênant ...
Vous voulez trouver une solution pour que la ligne de titre reste fixe comme c' est possible dans Excel.


L'exemple suivant le permet :

1- Créer les deux classes suivantes dans votre CSS :

div.GVScrollCSS
{
  overflow-y: scroll;
  overflow-x: hidden;
}

.GVScrollFixedHeader
{
  position:relative;
  top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}

2- Appliquer ces classes CSS dans votre fichier aspx comme dans l'exemple suivant :

<div class="GVScrollCSS">
   <asp:GridView ID="_gvParcelles"  DataKeyNames="PARCEL_ID" runat="server"
            AutoGenerateColumns="False"
            ShowHeader="true" Width="100%">
      <HeaderStyle CssClass="GVScrollFixedHeader" />
      <Columns>
          <asp:TemplateField HeaderText="Colonne1" > 
              <ItemTemplate>
                 <asp:Label ID="lblCol1" runat="server" Text='<%# Bind("COL1") %>' />
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Colonne2" >
              <ItemTemplate>
                  <asp:Label ID="lblCol2" runat="server" Text='<%# Bind("COL2") %>' />
              </ItemTemplate>
         </asp:TemplateField>
     </Columns>
  </asp:GridView>
</div>

Cette solution peut également s' appliquer sur l' élément Footer.

PS: Merci à R. Aymard pour cette astuce.

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: mardi 20 mai 2008 12:28 par Guillaume Brout
Classé sous :

Commentaires

white_mage a dit :

Sympa comme astuce.....J'ai hâte de tester ça...

# mai 20, 2008 12:56

cyril a dit :

attention, seulement compatible IE du fait de l'utilisation de expression (qui est buggé dans certains cas).

Je pense qu'on doit pouvoir faire un truc du genre :

table.MyClass tr th {position:fixed;} // pour FF et peut être IE7, bref c'est à tester, il y a peut être aussi des solutions avec la propriété table-layout mais je le connais pas

pour IE6 il faudra de toute facon utiliser cette astuce avec un hack CSS du genre

* html ...

# mai 20, 2008 13:58

white_mage a dit :

Pas de soucis pour moi, je ne développe que des applications pour ie.... :)

# mai 21, 2008 08:56
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- [WPF] Comment déclencher un évènement sur un contrôle ? par Thomas Lebrun le il y a 26 minutes

- [Expression Web] Astuce de la Semaine : Utilisation et Configuration des Extraits de Code par Chronos, Blog d'un Intégrateur .NET le il y a 15 heures et 45 minutes

- Faire de l'AJAX sans restrictions de domaine par Kévin Gosse le il y a 18 heures et 14 minutes

- [IronPython] : IronPython & Silverlight 2 - Part II par Kim's Blog le 07-22-2008, 14:50

- [WPF] Des requêtes NDepend pour analyser vos projets WPF par Thomas Lebrun le 07-21-2008, 09:27

- Liste de jeux pour Silverlight par Pierrick's Blog le 07-20-2008, 14:37

- T_PAAMAYIM_NEKUDOTAYIM par MadMatt le 07-19-2008, 16:16

- Et je mets le son.... par Pierrick's Blog le 07-19-2008, 12:09

- SharePoint : Comment interdire l’accès à un utilisateur pour tous les sites d’une Web Application par Blog Technique de Romelard Fabrice le 07-18-2008, 19:05

- VPC - Reset de la position de la console par Blog technique de Nicolas Boonaert le 07-18-2008, 16:29