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.
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.
Personne n'a une petite idée de la chose ?
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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:
et juste ca te permet d'avoir un header fixe mais que pour IE.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); }
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.
L'Homme est doté de 2 yeux et de 2 oreilles pour voir et entendre deux fois plus qu'il ne parle
Je ne réponds pas au questions par mp. Merci
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;
L'Homme est doté de 2 yeux et de 2 oreilles pour voir et entendre deux fois plus qu'il ne parle
Je ne réponds pas au questions par mp. Merci
Très bonne source... sauf que je n'arrives pas à le faire fonctionner sous IE...
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)
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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Blog de BrItneY. Avis et tests de jeux vidéos PC.
"Un geek, ça n’est avant tout qu’un Homme Assisté par Ordinateur (H.A.O)" (www.copinedegeek.com)
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:
sinon j'ai aussi trouvé ca, un header fix tt en javascipt (meme lien que precedent message) ->
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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'.
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 ). 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.
L'Homme est doté de 2 yeux et de 2 oreilles pour voir et entendre deux fois plus qu'il ne parle
Je ne réponds pas au questions par mp. Merci
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 ... oubliez google chrome par contre et pour ce qui est des autres navigateurs... j'ai pas testé
Je vous enverrais le code de ma fonction (ou la solution) quand ça sera prêt
A plus
BrItneY
Blog de BrItneY. Avis et tests de jeux vidéos PC.
"Un geek, ça n’est avant tout qu’un Homme Assisté par Ordinateur (H.A.O)" (www.copinedegeek.com)
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 :
Fichier "FreezeGridViewHeader.js" dans un dossier "Javascript" :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
J'ai mis des commentaires en anglais et en fr
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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'; } }
Hésitez pas si ya un soucis
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
Blog de BrItneY. Avis et tests de jeux vidéos PC.
"Un geek, ça n’est avant tout qu’un Homme Assisté par Ordinateur (H.A.O)" (www.copinedegeek.com)
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 :
Je déclare ma GridView et un champ caché (HiddenField), qui me sert pour stoker la valeur du scroll.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Fichier JavaSript :
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; } }
Fichier CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
flagGrid => le nom coté client du flag HiddenField permettant de stocker la valeur de la position du scroll.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 Page.ClientScript.RegisterStartupScript(this.GetType(), "", "FreezeGridViewHeader('" + flagGrid.ClientID + "', '" + gvGrid.ClientID + "', 'WrapDiv');", true);
gvGrid => le nom coté client de la GridView concernée.
WrapDiv => Classe CSS
Si plusieurs grilles dans la même page :
Fichier JavaSript :
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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); } }
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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)....
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 mais pas sur google chrome . Kelk'un a une idée comment faire.
Accepter les critiques, c'est le premier pas pour être un bon développeur ...
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager