none
ASP/GridView et CSS RRS feed

  • Question

  • Salutations voyageurs du Web ! 

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

    <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, ô combien trop chargé ! 

    Merci d'avance ! 

    Krishn4k

    vendredi 28 mars 2014 08:23

Réponses

  • Bonjour,

    C'est pourtant vrai qu'elle est sympa cette feuille de style. Mettre des noms de styles en deux segments, avec le style de la GridView et celui d'une partie, n'aurait pas été évident sans un exemple.

    Après, pour utiliser une feuille de style, il ne faut pas oublier d'enlever les mises en forme directes qu'on aurait pu faire dans un premier temps, bien entendu.

    Et il y a quelques règles à respecter si on veut que l'alternance de couleurs entre lignes fonctionne :

    - pas de couleur de fond sur le style td, en revanche il est bienvenu d'en mettre une sur le style global mGrid

    - mettre une couleur de fond sur le AlternateRowStyle, bien entendu (ici alt). Pas la même couleur de fond que pour le style global ; on ne sait jamais, quelquefois on croit que c'est évident ...

    - si on met un style à une cellule, on peut lui donner une couleur de fond différente seulement si celle-ci est plus foncée que celle du style général (tiens, c'est bizarre, ça ?). Sinon on obtiendra la couleur de fond du style général, donc ça ne sert pas à grand chose d'avoir mis une couleur différente pour la cellule.

    - curieusement, le padding du style général prévaut sur celui de la cellule ; donc, padding-right:6px sur mGrid, si il n'est pas suffisant, empêchera de décaler le prix par padding-right:20px sur le style de la cellule. Il suffit d'enlever le padding du style général pour que celui du style de la cellule fonctionne.

    C'est bien plus rapide à mettre au point en sauvegardant la page en format html (après avoir pensé à insérer plusieurs lignes si on veut tester l'alternance de couleurs), puis en l'ouvrant sous Firefox, où la touche F12 donne accès à des outils précieux. ça va plus vite que d'attendre la génération d'un site à chaque virgule modifiée.



    • Modifié Gloops samedi 5 juillet 2014 16:27
    • Marqué comme réponse Krishn4k mercredi 15 octobre 2014 13:14
    samedi 5 juillet 2014 16:14
  • Bonjour

    Voir la solution proposée ici :
    http://atashbahar.com/post/GridView-makeover-using-CSS.aspx
    Pour la plupart des éléments vous pouvez spécifier CssClass.

    Cordialement,

      

    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    • Marqué comme réponse Aurel Bera vendredi 4 avril 2014 06:36
    vendredi 28 mars 2014 12:07

Toutes les réponses

  • Bonjour

    Voir la solution proposée ici :
    http://atashbahar.com/post/GridView-makeover-using-CSS.aspx
    Pour la plupart des éléments vous pouvez spécifier CssClass.

    Cordialement,

      

    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    • Marqué comme réponse Aurel Bera vendredi 4 avril 2014 06:36
    vendredi 28 mars 2014 12:07
  • Bonjour

    Un petit retour SVP?

    Merci!

    Cordialement,


    Aurel BERA, MSFT
    MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
    S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    lundi 31 mars 2014 12:22
  • Bonjour,

    C'est pourtant vrai qu'elle est sympa cette feuille de style. Mettre des noms de styles en deux segments, avec le style de la GridView et celui d'une partie, n'aurait pas été évident sans un exemple.

    Après, pour utiliser une feuille de style, il ne faut pas oublier d'enlever les mises en forme directes qu'on aurait pu faire dans un premier temps, bien entendu.

    Et il y a quelques règles à respecter si on veut que l'alternance de couleurs entre lignes fonctionne :

    - pas de couleur de fond sur le style td, en revanche il est bienvenu d'en mettre une sur le style global mGrid

    - mettre une couleur de fond sur le AlternateRowStyle, bien entendu (ici alt). Pas la même couleur de fond que pour le style global ; on ne sait jamais, quelquefois on croit que c'est évident ...

    - si on met un style à une cellule, on peut lui donner une couleur de fond différente seulement si celle-ci est plus foncée que celle du style général (tiens, c'est bizarre, ça ?). Sinon on obtiendra la couleur de fond du style général, donc ça ne sert pas à grand chose d'avoir mis une couleur différente pour la cellule.

    - curieusement, le padding du style général prévaut sur celui de la cellule ; donc, padding-right:6px sur mGrid, si il n'est pas suffisant, empêchera de décaler le prix par padding-right:20px sur le style de la cellule. Il suffit d'enlever le padding du style général pour que celui du style de la cellule fonctionne.

    C'est bien plus rapide à mettre au point en sauvegardant la page en format html (après avoir pensé à insérer plusieurs lignes si on veut tester l'alternance de couleurs), puis en l'ouvrant sous Firefox, où la touche F12 donne accès à des outils précieux. ça va plus vite que d'attendre la génération d'un site à chaque virgule modifiée.



    • Modifié Gloops samedi 5 juillet 2014 16:27
    • Marqué comme réponse Krishn4k mercredi 15 octobre 2014 13:14
    samedi 5 juillet 2014 16:14