ASP.NET Datagrid: comment styler?

Question

Quelqu'un peut-il me dire comment faire un style pour un contrôle de grille de données asp.net.J'ai les exigences suivantes. Je veux savoir à quelles propriétés ces classes de style doivent être appliquées

1. La ligne d'en-tête doit avoir une bordure en haut et en bas. Aucune bordure gauche et droite. 2. Vous voulez avoir un séparateur de ligne entre chaque colonne dans la ligne d'en-tête.Non nécessaire pour Left et Right.LEt qui soit ouvert 3 .Nécessaire d'appliquer des styles différents pour les valeurs de chaque colonne.Comment mentionner différentes classes pour différentes colonnes?

Je suis à la recherche d'un Asolution qui rend en allbrowsers avec même effet

Answer 1

Vous pouvez ajouter une section dans la balise <asp:DataGrid> comme ceci:

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Top" BackColor="SaddleBrown" ForeColor="Ivory" /> 

Ou vous pouvez définir le style dans les modèles de colonne comme ceci:

<asp:BoundColumn HeaderText="Account Number" 
DataField="AccountNumber" ReadOnly="True" 
HeaderStyle-Font-Bold="True" HeaderStyle-HorizontalAlign="Center" 
ItemStyle-HorizontalAlign="Left"></asp:BoundColumn> 

Je pense que vous aurez plus de chance avec la deuxième approche. J'ai rencontré des problèmes avec certains des styles de tag <HeaderStyle> qui ne sont pas appliqués lorsque c'est seulement sous la balise <asp:DataGrid>.

Si vous souhaitez appliquer le même style à d'autres DataGrids, vous pouvez créer un habillage de manière à ce que le style d'en-tête soit le même partout.

Answer 2

Consultez le 4guysfromrolla.com article series sur les données de données ASP.net. Part 2 parle du style DataGrids.

Answer 3

Utilisez la propriété CssClass de la grille pour attribuer à la table une classe CSS. Pour obtenir un comportement différent des éléments de début et de fin, appliquez également une classe à l'en-tête et aux cellules de la colonne. Utilisez ensuite CSS pour styler les éléments de la table. IE:

ASPX:

<asp:DataGrid CssClass="grid" . . . . 
<asp:BoundColumn HeaderClass = "first" ItemClass = "first" . . . . 
(other columns) 
<asp:BoundColumn HeaderClass = "last" ItemClass = "last" . . . 

CSS:

table.grid th { border: solid 1px black} 
table.grid th.first {border-left: 0px} 
table.grid th.last {border-right: 0px} 

Pas besoin d'utiliser les styles ASP.NET, principalement parce que vous pouvez obtenir beaucoup plus lisse avec CSS et ne pas avoir un code pléthorique.

Answer 4

Les contrôles DataGrid et DataTable restituent les tables. Donc, utilisez CSS:

table { ... } 
thead { ... } 
tbody { ... } 
tfoot { ... } 
tr { ... } 
td { ... } 
th { ... } 

Il y a beaucoup d'éléments à cibler.

... Voici un peu de code pour vous aider à démarrer:

/* target table-rows in the header element of a table and modify border-styles */ 
thead tr { 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
}