toujours Afficher les en-tetes de colonnes du GridView à l'ecran , façon excel

Version imprimable

28/04/2008, 17h46
Yogy

toujours Afficher les en-tetes de colonnes du GridView à l'ecran , façon excel

Bonjour, je voudrais savoir s'il est possible de toujours afficher les en-tetes des colonnes à l'écran lors du défilement des lignes? Un peu comme dans excel.
29/04/2008, 08h42
Yogy

Personne n'a une petite idée de la chose ? :aie:
29/04/2008, 09h13
Promesses

Bonjour,
Je sais qu'il est possible d'avoir des entêtes de tableau fixe en html.
Ca se fait avec les CSS.
Il faudrait que tu recherches "fixed header css table"
Puisque le gridview n'est autre qu'un tableau, tu pourrais régler ton problème comme ça

en fait ca existe en css mais je préviens ca marche que pour IE.

Bon allez je me lance.
il faut que tu entoure ta gridview avec un panel ou une div (ce qui revient au même)
sur ce panel tu lui met une classe css précise par exemple "fixedHeader"
Code:

1 2 3 4 5 <asp:Panel ID="scrollGridContainer" CssClass="fixedHeader" runat="server"> <asp:GridView ID="_gvProducts" runat="server" DataSourceID="_productSource" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="true" > ... </asp:GridView> </asp:Panel>
l'important c'est le css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .fixedHeader { overflow: auto; height: 350px; } .fixedHeader table th { position: relative; top: expression(this.parentNode.parentNode. parentNode.scrollTop-1); }
et juste ca te permet d'avoir un header fixe mais que pour IE.
Si tu as le courage tu peux essayer de faire ou de trouver le javascript qui remplacerais l'expression dans le css: "top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);"

Ou si tu veux faire quelque chose de plus chiadé il va falloir changer le rendu de la gridview avec un ControlAdapter mais c'est une autre histoire.

29/04/2008, 10h27
Yogy

merci beaucoup, je vais tester ça !! :D ;)
29/04/2008, 16h50
gyzmau

tien regarde aussi ca:

http://weblogs.asp.net/dwahlin/archi...extenders.aspx

je viens de l'utiliser ca marche sur les deux (FF et IE) sauf que sur FF mes borders ne sont pas scrollés je sais pas encore pkoi.

*-Edit: Bon finalement j'ai trouvé c'est un border-collapse:collapse; qui pose probléme lorsque l'on utilise position:relative;

Aïe :s

Très bonne source... sauf que je n'arrives pas à le faire fonctionner sous IE... :roll:

Peux tu nous donner un exemple gyzmau s'il te plait ?!

Merci d'avance !

BrItneY

PS : En attendant, j'ai modifié le script pour qu'il prenne en charge les footers, et que le Gridview ne soit redimensionné que si nécessaire (ça affiche des grosses lignes peu agréables sinon)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<style type="text/css">
            .WrapperDiv {
                width:805px;height:493px;border: none;
            }        
            .WrapperDiv TH {
                position:relative;
            }  
            /* Pour le footer : */      
            .WrapperDiv TF {
                position:relative;
            }
            .WrapperDiv TR 
            {
                /* Needed for IE */
                height:0px;
            } 
        </style>
        <script type="text/javascript">
            function onLoad()
            {
                FreezeGridViewHeader('dtgCotations','WrapperDiv');
            }    
 
            function FreezeGridViewHeader(gridID,wrapperDivCssClass) 
            {
                /// <summary>
                ///   Used to create a fixed GridView header and allow scrolling
                /// </summary>
                /// <param name="gridID" type="String">
                ///   Client-side ID of the GridView control
                /// </param>
                /// <param name="wrapperDivCssClass" type="String">
                ///   CSS class to be applied to the GridView's wrapper div element.  
                ///   Class MUST specify the CSS height and width properties.  
                ///   Example: width:800px;height:400px;border:1px solid black;
                /// </param>
                var grid = document.getElementById(gridID);
                if (grid != 'undefined')
                {
                    grid.style.visibility = 'hidden';
                    var div = null;
                    if (grid.parentNode != 'undefined') 
                    {
                        //Find wrapper div output by GridView
                        div = grid.parentNode;
                        if (div.tagName == "DIV")
                        {
                            div.className = wrapperDivCssClass;  
                            div.style.overflow = "auto";                   
                        }
                    }
                    //Find DOM TBODY element and remove first TR tag from 
                    //it and add to a THEAD element instead so CSS styles
                    //can be applied properly in both IE and FireFox
                    var tags = grid.getElementsByTagName('TBODY');
                    if (tags != 'undefined')
                    {
                        var tbody = tags[0];
                        var trs = tbody.getElementsByTagName('TR');
                        var headerHeight = 8;
 
                        // A enlever si pas de footer:
                        var footerHeight = 8;
 
                        if (trs != 'undefined') 
                        {
                            /// Pour le header :
                            headerHeight += trs[0].offsetHeight;
                            var headTR = tbody.removeChild(trs[0]);
                            var head = document.createElement('THEAD');
                            head.appendChild(headTR);
                            grid.insertBefore(head, grid.firstChild);
 
                            /// Pour le footer :
                            footerHeight += trs[trs.length-1].offsetHeight;
                            var footTR = tbody.removeChild(trs[trs.length-1]);
                            var foot = document.createElement('TFOOT');
                            foot.appendChild(footTR);
                            grid.insertBefore(foot, grid.firstChild);
 
                            /// Permet de ne pas redimensionner le tbody s'il n'y a pas besoin de scrollbar
                            if((headerHeight+footerHeight+trs[0].offsetHeight*trs.length)>=div.offsetHeight)
                            {
                                tbody.style.height = (div.offsetHeight -  headerHeight - footerHeight) + 'px';
                            }
                            else
                            {
                                tbody.style.height=trs[0].offsetHeight*trs.length+ 'px';
                            }
                            ///// Si pas de footer :
                            //if((headerHeight+trs[0].offsetHeight*trs.length)>=div.offsetHeight)
                            //{
                            //    tbody.style.height = (div.offsetHeight -  headerHeight) + 'px';
                            //}
                            //else
                            //{
                            //    tbody.style.height=trs[0].offsetHeight*trs.length+ 'px';
                            //}
 
                        }
 
                        tbody.style.overflowX = "hidden";
                        tbody.overflow = 'auto';
                        tbody.overflowX = 'hidden';
                    }
                    grid.style.visibility = 'visible';
                }
            }
        </script>

Edit -> Autant pour moi, ça fonctionne... par contre le footer scroll sous IE... J'essayes d'améliorer ça et je vous tiens au courant ;)

Bonjour Britney.

Aprés m'être penché pas mal sur le problémes de header fix. J'ai abordé plusieurs solutions, plus ou moins propore.

Tes colonnes sont elles fixent? les tailles de tes colonnes sont elles précisés aussi?

Pour avoir Un header fix le plus pratique est d'avoir un nombre de colonnes definit avec une taille définit pour ces colonnes.
Dans ces cas il est trés simple d'implementer la structure suivante:
Code:

1 2 3 4 5 <div class="Header"><table>tous les headers fixes</table> </div> <div class="Content">Mettre ici la gridview (sans header) ou une Datagrid ou meme un repeater </div> <div class="Footer"></div> evidement mettre le scrolling dans la class Css 'Content'.
sinon j'ai aussi trouvé ca, un header fix tt en javascipt (meme lien que precedent message) ->
http://weblogs.asp.net/dwahlin/archi...extenders.aspx
ou aussi
http://blogs.interfacett.com/dan-wah...ol-to-ext.html

C'est un extender pour gridview qui permet de fixé le header. par contre je trouve son comportment un peu special.
J'ai du changé des trucs dans le javascript utilisé (mais je ne sais plus koi :aie:). Mais sinon marche pas trop mal pour les colonnes dinamique.
a l'utilisation je conseil de rajouter une colonne bidon à la fin (sans couleur de fond sur le header) pour eviter des problème d'ascenceur caché (sous IE je crois).

Sinon il existe encore pas mal d'autre methodes.
bon courage.

22/10/2008, 17h14
BrItneY

Merci pour ta réponse gyzmau ;)

On m'avait en effet parlé de la méthode des div, je ne l'ai pas testé, c'est assez fastidieux apparemment...

Je travaille actuellement sur une modification du script de dwahlin, afin de prendre en compte les footers et les paging également... Les trois fonctionnent ensemble, mais je l'adapte pour qu'il marche même s'il n'y a qu'un paging par exemple...

lol, je rajoute également une colonne remplie d'espace, car c'est firefox (il fait les choses trop bien ;)) qui masque une partie du tbody.

Je pense aboutir à une fonction propre et 99% fonctionnelle... sous firefox par contre... j'ai testé sous IE et seul le header reste fixe, pas le footer et le paging (merci MS ^^)... mais je ne désespère pas :P... oubliez google chrome par contre et pour ce qui est des autres navigateurs... j'ai pas testé :roll:

Je vous enverrais le code de ma fonction (ou la solution) quand ça sera prêt ;)

A plus

BrItneY

Yeah ! :P

Voilà, j'ai passé pas mal de temps dessus, en espérant que cela serve à d'autres, tant qu'a faire ^^

Résultat sous IE : seul le header reste fixe, j'ai essayé d'autres solution mais n'ai rien trouvé de concluant. :?

Fichier .aspx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>testSiteWeb</title>
 
    <style type="text/css">
    .WrapperDiv {
        /* Values to change */
        width: 1000px;
        height: 500px;
        border: 0px black solid;
    }        
    .WrapperDiv TH {
        position:relative;
    }
    .WrapperDiv TR 
    {
        height:0px;
    } 
    .WrapperDiv td:last-child
    {
        padding-right: 20px;
    }
    </style>
 
    <script type="text/javascript" src="Javascript/FreezeGridViewHeader.js"></script>
 
    <script type="text/javascript">
    function onLoad()
    {
        FreezeGridViewHeader('gv1', 'WrapperDiv', '1', '1', '1', '1', '0');
        /// FreezeGridViewHeader(gridID, wrapperDivCssClass, AllowHeader, AllowFooter, AllowPaging, ForceDivSize, AddHeight);
        /// <summary>
        ///   Used to create a fixed GridView header, footer and paging and allow scrolling
        /// </summary>
        /// <param name="gridID" type="String">
        ///   Client-side ID of the GridView control
        /// </param>
        /// <param name="wrapperDivCssClass" type="String">
        ///   CSS class to be applied to the GridView's wrapper div element.  
        ///   Class MUST specify the CSS height and width properties.  
        ///   Example: width:800px;height:400px;border:1px solid black;
        /// </param>
        /// <param name="AllowHeader" type="String">
        ///   '1' if there's a header, '0' otherwise
        /// </param>
        /// <param name="AllowFooter" type="String">
        ///   '1' if there's a footer, '0' otherwise
        /// </param>
        /// <param name="AllowPaging" type="String">
        ///   '1' if there's a paging, '0' otherwise
        /// </param>
        /// <param name="ForceDivSize" type="String">
        ///   '1' to force the resize on all navigators excepted FireFox,
        ///   '2' to force it for all navigators,
        ///   '0' not to force the size of the div
        /// </param>
        /// <param name="AddHeight" type="String">
        ///   Usefull when it appears to be 2 scrollbars, especially with FF, one on the tbody,
        ///    and an other one for the table. This allow you to add or subtract a value to the height
        ///   '0' to add or subtract nothing,
        ///   'x' to add some pixels to the height,
        ///   '-x' to subtract some pixels to the height
        /// </param>
    }
    </script>
 
</head>
<body onload="onLoad();">
    <form id="form1" runat="server">
        <div class="WrapperDiv" style="border-collapse:collapse;">
            <asp:GridView runat="server" ID="gv1" PageSize="20" ShowFooter="True" ShowHeader="True"
            style="visibility:hidden; border-collapse:collapse;" GridLines="None" AutoGenerateColumns="True"
            DataKeyNames="sit_Ident" DataSourceID="SqlDataSource1" BackColor="LemonChiffon" AllowPaging="True">
                <Columns>
 
                </Columns>
                <RowStyle BackColor="LemonChiffon" />
                <HeaderStyle BackColor="LightSkyBlue" />
                <FooterStyle BackColor="LightSkyBlue" />
                <PagerStyle BackColor="LightSkyBlue" />
                <AlternatingRowStyle BackColor="Khaki" />
            </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TimTecConnectionString %>"
                    SelectCommand="SELECT * FROM [Sites]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Fichier "FreezeGridViewHeader.js" dans un dossier "Javascript" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
function FreezeGridViewHeader(gridID, wrapperDivCssClass, AllowHeader, AllowFooter, AllowPaging, ForceDivSize, AddHeight) 
{
    /// <summary>
    ///   Used to create a fixed GridView header, footer and paging and allow scrolling
    /// </summary>
    /// <param name="gridID" type="String">
    ///   Client-side ID of the GridView control
    /// </param>
    /// <param name="wrapperDivCssClass" type="String">
    ///   CSS class to be applied to the GridView's wrapper div element.  
    ///   Class MUST specify the CSS height and width properties.  
    ///   Example: width:800px;height:400px;border:1px solid black;
    /// </param>
    /// <param name="AllowHeader" type="String">
    ///   '1' if there's a header, '0' otherwise
    /// </param>
    /// <param name="AllowFooter" type="String">
    ///   '1' if there's a footer, '0' otherwise
    /// </param>
    /// <param name="AllowPaging" type="String">
    ///   '1' if there's a paging, '0' otherwise
    /// </param>
    /// <param name="ForceDivSize" type="String">
    ///   '1' to force the resize on all navigators excepted FireFox,
    ///   '2' to force it for all navigators,
    ///   '0' not to force the size of the div
    /// </param>
    /// <param name="AddHeight" type="String">
    ///   Usefull when it appears to be 2 scrollbars, especially with FF, one on the tbody,
    ///    and an other one for the table. This allow you to add or subtract a value to the height
    ///   '0' to add or subtract nothing,
    ///   'x' to add some pixels to the height,
    ///   '-x' to subtract some pixels to the height
    /// </param>
    var scrollWidth=20;
    var grid = document.getElementById(gridID);
    if (grid != 'undefined')
    {
        grid.style.visibility = 'hidden';
        var div = null;
        if (grid.parentNode != 'undefined') 
        {
            //Find wrapper div output by GridView
            div = grid.parentNode;
            if (div.tagName == "DIV")
            {
                div.className = wrapperDivCssClass;  
                div.style.overflow = "auto";                   
            }
        }                
        //Find DOM TBODY element and remove first TR tag from 
        //it and add to a THEAD element instead so CSS styles
        //can be applied properly in both IE and FireFox
        var tags = grid.getElementsByTagName('TBODY');
 
        /// On ajuste la largeur du datagridview à celle du div
        grid.style.width=div.offsetWidth-16+'px';
 
        if (tags != 'undefined')
        {
            var tbody = tags[0];
            var trs = tbody.getElementsByTagName('TR');
 
            var headerHeight = 8;
            var footerHeight = 8;
            var pagingHeight = 8;
 
            if (trs != 'undefined') 
            {
                /// Pour le header :
                if(AllowHeader == '1')
                {
                    headerHeight += trs[0].offsetHeight;
                    var headTR = tbody.removeChild(trs[0]);
                    var head = document.createElement('THEAD');
                    head.appendChild(headTR);
                    grid.insertBefore(head, grid.firstChild);
                }
 
 
                /// Pour le footer et le paging :
                if((AllowPaging != 'undefined') && (AllowFooter != 'undefined'))
                {
                    if((AllowPaging == '1')&&(AllowFooter == '1'))
                    {
 
                        /// On récupère les valeurs des hauteurs des champs
                        pagingHeight += trs[trs.length-2].offsetHeight;
                        footerHeight += trs[trs.length-3].offsetHeight;
                        /// NB : trs[trs.length-1] correspond au tr contenu dans le paging... donc pas celui que l'on souhaite
 
 
                        /// On récupère les noeuds qui contiennent les TR du paging et du footer
                        var pagingTR = tbody.removeChild(trs[trs.length-2]);
 
                        /// trs[trs.length-1] correspond maintenant à la dernière ligne, donc au footer
                        /// vu que le paging est enlevé
                        var footTR = tbody.removeChild(trs[trs.length-1]);
 
 
//                            /// Remplacement des balises TD par des balises TH dans le Footer
//                            var TDfootTR = footTR.getElementsByTagName('TD');
//                            var inside;
//                            var inside2;
//                            var THfootTR;
//                            var nbrColonnes = TDfootTR.length;
//                            for(var i = 0; i < TDfootTR.length; i++)
//                            {
//                                inside = TDfootTR[i].innerHTML;
//                                inside2 = footTR.removeChild(TDfootTR[i]);
//                                THfootTR = document.createElement('TH');
//                                THfootTR.innerHTML = inside;
//                                THfootTR.setAttribute("scope", "col");
//                                footTR.appendChild(THfootTR);
//                            }
//                            
//                            /// Remplacement du td du paging par un th
//                            TDfootTR = pagingTR.getElementsByTagName('TD');
//                            inside = TDfootTR[0].innerHTML;
//                            inside2 = pagingTR.removeChild(TDfootTR[0]);
//                            THfootTR = document.createElement('TH');
//                            THfootTR.innerHTML = inside;
//                            THfootTR.setAttribute("scope", "col");
//                            THfootTR.setAttribute("colspan", nbrColonnes);
//                            pagingTR.appendChild(THfootTR);
 
                        /// On crée le futur TFOOT (footer du tableau, qui contiendra le footer du datagridview et le paging
                        var foot = document.createElement('TFOOT');
 
                        /// On ajoute au TFOOT les deux lignes du paging et du footer
                        foot.appendChild(footTR);
                        foot.appendChild(pagingTR);
 
                        /// On insère le TFOOT après la balise <TBODY> du tableau (on pourrait l'insérer avant également, c'est juste histoire de garder l'ordre)
                        grid.insertBefore(foot, grid.lastChild.nextSibling);
                    }
 
                    /// On est forcé de séparer le cas AllowPaging et AllowFooter car
                    /// le paging contient un tableau... donc un TR supplémentaire...
                    else if(AllowPaging == '1')
                    {
                        /// S'il y a un footer OU un paging (l'un ou l'autre), mais pas les deux vu que c'est le if précédent
                        footerHeight += trs[trs.length-2].offsetHeight;
                        var footTR = tbody.removeChild(trs[trs.length-2]);
                        var foot = document.createElement('TFOOT');
                        foot.appendChild(footTR);
                        grid.insertBefore(foot, grid.lastChild.nextSibling);
                    }
                    else if(AllowFooter == '1')
                    {
                        /// S'il y a un footer OU un paging (l'un ou l'autre), mais pas les deux vu que c'est le if précédent
                        footerHeight += trs[trs.length-1].offsetHeight;
                        var footTR = tbody.removeChild(trs[trs.length-1]);
                        var foot = document.createElement('TFOOT');
                        foot.appendChild(footTR);
                        grid.insertBefore(foot, grid.lastChild.nextSibling);
                    }
                }
            }
            tbody.style.overflowX = "hidden";
            tbody.overflow = 'auto';
            tbody.overflowX = 'hidden';
            /// Si malgré tout notre bon-vouloir la largeur du datagridview est minimale, et supérieure à la taille du div,
            /// on force l'affichage plus grand du div... sauf sous firefox...allez savoir pourquoi ^^
             var agt=navigator.userAgent.toLowerCase();
             var is_fx = ((agt.indexOf('mozilla/5')!=-1) && (agt.indexOf('spoofer')==-1) &&
                 (agt.indexOf('compatible')==-1) && (agt.indexOf('opera')==-1)  &&
                 (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1)     &&
                 ((navigator.vendor=="Firefox")||(agt.indexOf('firefox')!=-1)));
 
            if((grid.offsetWidth>div.offsetWidth)&&(ForceDivSize=='1')&&!(is_fx))
            {
                div.style.width=grid.offsetWidth+scrollWidth+'px';
            }
            else if((grid.offsetWidth>div.offsetWidth)&&(ForceDivSize=='2'))
            {
                /// Si c'est firefox, il n'est pas nécessaire de rajouter les 18 pixels nécessaires à la scrollbar
                if(is_fx)
                {
                    div.style.width=grid.offsetWidth+'px';
                }
                else
                {
                    div.style.width=grid.offsetWidth+scrollWidth+'px';
                }    
            }
 
            /// On récupère la somme des hauteurs des lignes du tobdy
            var sommeHauteur=0;
            for(i=0; i<trs.length; i++)
            {
                sommeHauteur+=trs[i].offsetHeight;
            }
 
 
 
            /// Permet de ne pas redimensionner le tbody s'il n'y a pas besoin de scrollbar (peu de lignes dans le datagridview)
            if((headerHeight*AllowHeader + footerHeight*AllowFooter + pagingHeight*AllowPaging + sommeHauteur)>=div.offsetHeight)
            {
                if((ForceDivSize=='0')||(ForceDivSize=='2'))
                {
                    tbody.style.height = (div.offsetHeight -  headerHeight*AllowHeader - footerHeight*AllowFooter - pagingHeight*AllowPaging) + 'px';
                }
                else
                {
                    tbody.style.height = (div.offsetHeight -  headerHeight*AllowHeader - footerHeight*AllowFooter - pagingHeight*AllowPaging + parseFloat(AddHeight)) + 'px';
                }
            }
            else
            {
                tbody.style.height=sommeHauteur+ 'px';
            }
        }
        grid.style.visibility = 'visible';
    } 
}

J'ai mis des commentaires en anglais et en fr ;)

Hésitez pas si ya un soucis :aie:

A plus

BrItneY

Edit -> MAJ de la fonction, car soucis lorsque le datagrid est moins haut que le div... le redimensionnement ne se faisait pas correctement

Bonjour,

Merci pour vos soultions qui m'ont bien aidé pour un projet.

Par contre le souci que j'ai eu était de garder la position du scroll lors d'un rafraichissement de la page, voici donc ce que j'ai fait :

Fichier .aspx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<table>
 <tr valign="top">
  <td align="left">
   <asp:GridView ID="gvGrid" DataKeyNames="HF_Id" DataMember="TU_HistoFaitMarquant" DataSource="<%# dvHistoFait %>" AutoGenerateColumns="False" runat="server" OnRowDeleting="gvHistoFait_RowDeleting" OnRowEditing="gvHistoFait_RowEditing">
    <HeaderStyle HorizontalAlign="Center" CssClass="SubTitle" />
    <Columns>
     <asp:TemplateField HeaderText="Commentaire">
      <ItemStyle HorizontalAlign="Left" CssClass="Box" />
      <ItemTemplate>
       <%# DataBinder.Eval(Container, "DataItem.HF_Commentaire")%>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Date">
      <ItemStyle HorizontalAlign="Center" Width="50px" CssClass="Box" />
      <ItemTemplate>
       <%# DataBinder.Eval(Container, "DataItem.HF_ShortDate")%>
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField>
      <ItemStyle HorizontalAlign="Center" Width="40px" CssClass="Box" />
      <ItemTemplate>
       <asp:ImageButton ID="btnEditHisto" runat="server" CausesValidation="False" CommandName="Edit" ImageUrl="~/Images/Icones/edit.ico" />
       <asp:ImageButton ID="btnDeleteHisto" runat="server" CausesValidation="False" OnClientClick="return confirm('Êtes-vous sûr de vouloir supprimer ce fait marquant ?');" CommandName="Delete" ImageUrl="~/Images/Icones/delete.ico" />
      </ItemTemplate>
     </asp:TemplateField>
    </Columns>
   </asp:GridView>
  </td>
 </tr>
 <tr>
  <td style="height: 5px;">
   <asp:HiddenField ID="flagGrid" runat="server" />
  </td>
 </tr>
</table>

Je déclare ma GridView et un champ caché (HiddenField), qui me sert pour stoker la valeur du scroll.

Fichier JavaSript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
window.scrollBy(100,100);
//Affichage permanant des headers des gridView
function FreezeGridViewHeader(idFlag, gridID, wrapperDivCssClass) 
{
 var grid = document.getElementById(gridID);
 if (grid != 'undefined')
 {
  grid.style.visibility = 'hidden';
  var div = null;
  if (grid.parentNode != 'undefined') 
  {
   div = grid.parentNode;
   if (div.tagName == "DIV")
   {
    div.className = wrapperDivCssClass;
    div.style.overflow = 'auto';
    //ajout de l'événement onscroll sur la DIV
    //permet de stocker la valeur du scroll dans le flag de la grille
    div.onscroll = function(){document.getElementById(idFlag).value = div.scrollTop;}
   }
  }
  var tags = grid.getElementsByTagName('TBODY');
  if (tags != 'undefined')
  {
   var tbody = tags[0];
   var trs = tbody.getElementsByTagName('TR');
 
   var headerHeight = 8;
   if (trs != 'undefined') 
   {
    headerHeight += trs[0].offsetHeight;
    var headTR = tbody.removeChild(trs[0]);
    var head = document.createElement('THEAD');
    head.appendChild(headTR);
    grid.insertBefore(head, grid.firstChild);
   }
   tbody.style.height = (div.offsetHeight - headerHeight) + 'px';
   tbody.style.overflowX = "hidden";
   tbody.overflow = 'auto';
   tbody.overflowX = 'hidden';
  }
  grid.style.visibility = 'visible';
  //récupération de la valeur du scroll
  div.scrollTop = document.getElementById(idFlag).value;
 }
}

J'ai ajouter en entré le nom du flag, et, sur l'événement onscroll de la DIV, une fonction permetant de stocker la valeur du scroll dans le flag.

Fichier CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/* Affichage permanent des headers des gridView du détail tâche du suivit projet*/
.WrapDiv {
 width: 100%;
 height: 140px;
 border: 0px;
 vertical-align: top;
 text-align: left; 
}        
.WrapDiv TH {
 position:relative;
 top:-2px;
}
.WrapDiv TR 
{
 /* Needed for IE */
 height:0px;
}

Et enfin, dans le fichier aspx.cs :

Dans les fonctions "Page_Load" ou "OnLoadComplete" il faut y mettre la ligne d'apelle :

Code:

1
2
 
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "FreezeGridViewHeader('" + flagGrid.ClientID + "', '" + gvGrid.ClientID + "', 'WrapDiv');", true);

flagGrid => le nom coté client du flag HiddenField permettant de stocker la valeur de la position du scroll.
gvGrid => le nom coté client de la GridView concernée.
WrapDiv => Classe CSS

Si plusieurs grilles dans la même page :

Fichier JavaSript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
//Function d'appele pour freezer plusieurs gridview
function FreezeGridViewHeaderSelect(nbrGrid, FlagName, GridName, wrapperDivCssClass)
{
 for(i=0;i<nbrGrid;i++)
 {
  //id de la grille
  var gridId = GridName.substring(0,GridName.indexOf(";"));
  GridName = GridName.substring(GridName.indexOf(";") + 1, GridName.lenght);
 
  //id du flag
  var flagId = FlagName.substring(0,FlagName.indexOf(";"));
  FlagName = FlagName.substring(FlagName.indexOf(";") + 1, FlagName.lenght);
 
  //appel du freez
  FreezeGridViewHeader(flagId, gridId, wrapperDivCssClass);
 }
}

Il suffit de passer en paramètres, le nombre de grille, la liste des noms coté client des flags séparés par des ";", pareil pour les grilles (attention à l'ordre), et le nom de la classe CSS.
Ici, toutes mes grilles on la même classe CSS, dans le cas contraire, il suffit de modifier la fonction pour pouvoir mettre une liste de classe CSS.

Fichier aspx.cs :
Et enfin, l'appel de la fonction à coller dans les fonctions "Page_Load" ou "OnLoadComplete" du code behind :

Code:

1
2
3
4
5
6
7
 
//construction de la liste des flags
lstFlag = flagList01.ClientID + ";" + flagList02.ClientID + ";" + flagList03.ClientID + ";";
//construction de la liste des grilles
lstGrille = gvList01.ClientID + ";" + gvList02.ClientID + ";" + gvList03.ClientID + ";";
//appelle de la fonction JS
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "FreezeGridViewHeaderSelect('3', '" + lstFlag + "', '" + lstGrille + "', 'DetailTache');", true);

Par contre, je n'ai fait des tests que sur IE6 (because boulot)....

08/07/2010, 15h05
ragu23

slt à tous,
j'ai essayé de mettre en marche le code qui me permet d'afficher toujours l'entête de GridView, voir l'article :
http://blogs.interfacett.com/dan-wah....html#comments

Il marche nikel sur IE et Firefox :P mais pas sur google chrome :(. Kelk'un a une idée comment faire.