ASP/GridView et CSS

Version imprimable

ASP/GridView et CSS

Salutations voyageurs du Web !

Petit problème simple, je dispose d'une GridView dans une page :

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
<asp:GridView ID="GridModif" runat="server" AllowPaging="True" AutoGenerateColumns="False"
        CellPadding="4" DataKeyNames="id_formation" DataSourceID="source_Formation" AllowSorting="True"
        BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"
        Width="90%">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
 
        <Columns>
            <asp:TemplateField HeaderText="id_formation" SortExpression="id_formation">
                <EditItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("id_formation") %>'></asp:Label>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("id_formation") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="libelle_formation" HeaderText="libelle_formation" SortExpression="libelle_formation" />
            <asp:BoundField DataField="validite_formation" HeaderText="validite_formation" SortExpression="validite_formation" />
            <asp:BoundField DataField="actif_formation" HeaderText="actif_formation" SortExpression="actif_formation" />
            <asp:CommandField ShowEditButton="true" />
            <asp:CommandField ShowDeleteButton="True" DeleteText="Désactiver" />
        </Columns>
 
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#00519d" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#00519d" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>

Oulah c'est lourd !
Et voila le soucis, il est clairement visible, je n'arrive pas à mettre tout mes éléments de de style en css (La plupart généré par Visual Studio :p)
Combo gagnant, j'ai une petite dizaine de GridView comme celui-ci dans tout mon projet, s'il est possible de faire un css qui me prendra tout ça en compte ce serait juste ... un soulagement pour mon code, au combien trop chargé !

Merci d'avance !

Krishnak

Bonjour,
Tu peut définir dans ton gridView des attributs "CssClass"(pour le gridView global) et "AlternatingRowStyle-CssClass", "EditRowStyle-CssClass", ect... pour chaque élément(EditRow,Footer, Header,...) du gridView.
Cela te permet de d'appeler une class CSS que tu aura définit au préalable.

Par exemple le code asp deviendrai:
Code:

1 2 3 4 <asp:GridView ID="GridModif" runat="server" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id_formation" DataSourceID="source_Formation" AllowSorting="True" CssClass="MonGridCss" AlternatingRowStyle-CssClass="AltRowCss"> ...
Et dans ton fichier CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .MonGridCss { background-color: White; border-color: #3366CC; border-style: None; border-width: 1px; Width: 90%; } .AltRowCss { background-color: White; Color: #284775; }
Cela te permet de rappeler tes classes CSS pour tous tes gridView. Tu peux aussi regarder du coté des thèmes et des fichier .skin pour ne pas avoir à rappeler tes classes CSS à chaque fois.

En espérant avoir aidé.

Darkcrift

C'est une base qui va déjà légèrement allégé le tout, merci bien ;)

Mais le plus gros problème est de réussir à retirer de mes pages les

Code:

1
2
3
4
5
6
7
8
9
10
<EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#00519d" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#00519d" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

Que je commence à avoir du mal à voir :p

Sur le même principe que l'exemple que je t'es donné tu peut définir une classe CSS pour tous les autres attributs du gridView.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<asp:GridView ID="GridModif" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="id_formation" DataSourceID="source_Formation" AllowSorting="True"
CssClass="MonGridCss" 
AlternatingRowStyle-CssClass="AltRowCss"
EditRowStyle-CssClass="EditRowCss"
FooterStyle-CssClass="FooterCss"
HeaderStyle-CssClass="HeaderCss"
PagerStyle-CssClass="PagerCss"
RowStyle-CssClass="RowCss"
SelectedRowStyle-CssClass="SelectRowCss"
SortedAscendingCellStyle-CssClass="SortAscCellCss"
SortedAscendingHeaderStyle-CssClass="SortAscHeadCss"
SortedDescendingCellStyle-CssClass="SortDescCellCss"
SortedDescendingHeaderStyle-CssClass="SortDescHeadCss">

Je te laisse créer tes classes CSS correspondantes. ;)

Darkcrift

Ok je comprends mieux !

Mais au final, je devrais quand même avoir chaque ligne présente dans mon code principal :/

Mon objectif de base est d'obtenir quelque chose du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<asp:GridView ID="GridModif" runat="server" AllowPaging="True" AutoGenerateColumns="False"
        CellPadding="4" DataKeyNames="id_formation" DataSourceID="source_Formation" AllowSorting="True"> 
 
        <Columns>
            <asp:TemplateField HeaderText="id_formation" SortExpression="id_formation">
                <EditItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("id_formation") %>'></asp:Label>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("id_formation") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="libelle_formation" HeaderText="libelle_formation" SortExpression="libelle_formation" />
            <asp:BoundField DataField="validite_formation" HeaderText="validite_formation" SortExpression="validite_formation" />
            <asp:CommandField ShowEditButton="true" />
            <asp:CommandField ShowDeleteButton="True" DeleteText="Désactiver" />
        </Columns>
 
    </asp:GridView>

Je pense que ce doit être possible non ?

28/03/2014, 11h09
darkcrift

Pour faire ce que tu veux, il faut que tu regarde du coté des thèmes et des fichiers .skin.

Je t'invite à aller voir le tuto de dvp sur le sujet puis les docs officielles de Microsoft.

Il est sur du asp.net 2.0 mais le principe reste le même sur les nouvelles versions du framework.

Darkcrift
01/04/2014, 08h01
Krishnak

Je me penche la dessus alors ! Merci bien pour votre aide !

-- Edit --

Cela fonctionne parfaitement ! Un grand merci à nouveau !