Fixer entête et colonnes dans un DataGrid

Version imprimable

25/09/2012, 14h43
niko59480

Fixer entête et colonnes dans un DataGrid
Bonjour à tous!

Voilà j'ai un DataGrid qui va contenir beaucoup de données et je souhaite fixer son header (pour ne pas qu'il scroll verticalement) et faire la même chose avec quelques colonnes sur la gauche (pas de sroll horizontal pour elles).

pour les entêtes, via javascript j'ai déplacé ma colonne d'entête dans un thead (créé en JS) et recontruit avec mon thead et mon tbody (sans la colonne d'entête dans celui-ci).
donc ma structure de tableau est :
Code:

1 2 3 4 5 6 7 8 9 <table> <thead> <tr><th></th>...</tr> </thead> <tbody> <tr><td></td>...</tr> </tbody> </table>
mais afin de dérouler le contenu de mon tbody, il faut que j'aplique une hauteur à celui-ci :
Code:

1 2 3 4 5 6 tbody{ height:200px; overflow-x:hidden; overflow-y:auto; }
sauf que le height:200px; ne s'applique pas dans mes navigateurs (IE8 et FF15).
Je veux dire que les style sont bien visibles dans firebug ou dans les outils de dev de IE8 mais qu'ils ne sont pas appliqués au tbody au niveau du rendu visuel...

et pour les colonnes à fixer, j'ai essayé plusieurs choses mais rien ne fonctionnait...

merci d'avance!
25/09/2012, 22h17
TipyLeCanadien
Salut Niko59480,

As tu essayé d'appliquer ton CSS à ton table et non à ton tbody :
Code:

1 2 3 4 5 6 7 8 9 10 11 table { height: 200px; overflow-x: hidden; } table tbody { overflow-y: auto; }
Un truc dans le genre. Ou bien mets dans la hauteur de ton table, la hauteur de ton tbody + la hauteur de ton thead.

salut TipyLeCanadien et merci pour ta réponse.

J'ai essayé ce que tu m'as proposé, mais je n'ai aucun changement sous IE8 (navigateur sur lequel je dois développer le site).

si ça peut aider, voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="div-datagrid">
<asp:DataGrid
    runat="server" 
    ID="tab_jalon" 
    AutoGenerateColumns="false" 
    CssClass="grey table-th-fixed" 
    DataKeyField="ID_JALON" 
    OnItemDataBound="FixerColonnesJalon" 
    UseAccessibleHeader="true" ShowHeader="true" >
    <HeaderStyle Wrap="false" CssClass="header-grey fixed-header" HorizontalAlign="Center" />
    <Columns>
        .... (mes différentes colonnes)
    </Columns>
</asp:DataGrid>
</div>

et le CSS associé :

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
 
#div-datagrid{
	overflow-x:auto;
	overflow-y:hidden;
	clear:both;
	width:1020px;
}
th, td{
	padding:3px 5px;
}
.fixed-header{
	position:relative;
}
.table-th-fixed{
	float: left;
	height:222px;
	overflow-x: hidden;
}
/*.table-th-fixed thead tr	{position:relative;float:left;}*/
.table-th-fixed thead tr th{
	background:#fde1f7;
	font-size:12px;
	border:1px solid black;
	border-right:0;
	font-weight:normal;
}
.table-th-fixed tbody td{
	background:white;
	font-size:12px;
	border:1px solid black;
	border-right:0;
}
.table-th-fixed tbody{
	/*display: block;*/
        height: 200px;
	overflow-y:auto;
}

Salut Niko59480,

Normalement ta Div est obsolète pour ton datagrid. Pour gérer ton style il suffit de tout mettre dans la class appelé dans ton CssClass.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <asp:DataGrid runat="server" ID="tab_jalon" AutoGenerateColumns="false" CssClass="table-th-fixed" //Pourquoi grey ici ?? DataKeyField="ID_JALON" OnItemDataBound="FixerColonnesJalon" UseAccessibleHeader="true" ShowHeader="true" > <HeaderStyle Wrap="false" CssClass="header-grey fixed-header" HorizontalAlign="Center" /> <Columns> .... (mes différentes colonnes) </Columns> </asp:DataGrid>
Ensuite dans ton code CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .table-th-fixed{ display: block; width:1020px; } .table-th-fixed td{ ... } .table-th-fixed th{ ... }
Normalement ça devrait fonctionner. Tu ne devrait pas à avoir à préciser que tu ne veut pas de scroll horizontal.

Salut TipyLeCanadien,

La DIV présente autour de mon DataGrid sert à appliquer une scrollbar horizontale sur mon tableau et non sur ma fenêtre pour avoir toujours le reste de ma page visible et pour dans un deuxième temps gérer des colonnes fixes.

La classe grey servait juste à appliquer des couleurs.

J'ai essayer différentes "solutions" glanées sur internet dont celle-ci en vain :cry:

mon CSS ressemble donc actuellement à ceci :
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 #div-datagrid{ overflow-x:auto; overflow-y:hidden; clear:both; width:1015px; } .table-th-fixed{ display: block; border:none; border-spacing:0px; background-color:transparent; width:1020px; height:250px; } .table-th-fixed thead{ position:relative; } .table-th-fixed th{ background:#fde1f7; font-size:12px; border:1px solid black; border-right:0; font-weight:normal; } .table-th-fixed>tbody{ overflow:auto; height: 200px; overflow-x:hidden; } .table-th-fixed td{ background:white; font-size:12px; border:1px solid black; border-right:0; } .table-th-fixed>tbody tr { height: auto; } .table-th-fixed>thead tr { position:relative; top: 0px;/*expression(offsetParent.scrollTop); IE5+ only*/ }
Malgré cela, ça ne résout toujours pas mon problème à savoir, fixer en hauteur la taille de mon tbody pour qu'il soit scrollable.

J'ai essayer ta solution mais elle ne fonctionne pas non plus.

Mon tableau est toujours affiché en entier (seul le scroll horizontal dût à ma div fonctionne)

Tiens essaye avec ceci pour moi ça a fonctionné, je me suis inspiré de ton lien et j'ai rajouté une petite bidouille :

CSS :

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
 
#test
{
  width: 400px;
  height: 240px;
  margin: 0 auto;
  overflow: auto;
  border: solid 1px black;
}
 
table
{
	width: 95%;
	border-spacing: 0px;
	background-color: transparent;
}
 
table tbody tr {
  height: auto;
}
 
table thead tr 
{
	position: relative;
	background-color: White;
	top: 0px;
}

Code :

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
 
<div id="test">
        <table>
            <thead>
            <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
                <th>Colonne 4</th>
                <th>Colonne 5</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                </tr>
...
 
            </tbody>
        </table>
</div>

Je pense que tu peux essayer d'adapter ce code avec tes mesures et tes noms de d'id et de class.

27/09/2012, 14h16
niko59480

Salut,

ton code ne marche pas chez moi, j'ai donc fini par me rabattre sur un jQuery UI qui fonctionne bien (celui-ci).
Il me permet entre autre, de faire des tri sur mes colonnes et de redimensionner mes colonnes donc nickel.

Merci pour ton aide ;)