Comment concevoir un GridView?

Question

j'ai suivi GridView dans mon ASP.Net Page: http://s2.imgimg.de/uploads/14b706b38JPG.jpg

Il devrait ressembler à ceci: http://s2.imgimg.de/uploads/392bac9b9JPG.jpg (Fabriqué par le designer de la mine dans Photoshop).

(Le fond d'en-tête est un fichier)

J'ai essayé beaucoup, mais il semble très très difficile à concevoir cela. Voici mon code:

 <asp:GridView ID="itemsGrid" runat="server" AllowPaging="True" 
     AutoGenerateColumns="False" AllowSorting=true 
     DataSourceID="imeiEntryDataSource" OnRowDataBound="gvItems_RowDataBound" 
     onsorting="itemsGrid_Sorting" BorderColor="Gray"> 
     <Columns > 

      <asp:BoundField DataField="IMEI" HeaderText="IMEI" SortExpression="IMEI"> 
       <ItemStyle Width="200px" HorizontalAlign="Center" /> 
      </asp:BoundField> 
      <asp:BoundField DataField="StolenOrLost" HeaderText="Status" SortExpression="StolenOrLost"> 
       <ItemStyle Width="100px" HorizontalAlign="Center" /> 
      </asp:BoundField> 
      <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name"> 
       <ItemStyle Width="300px" HorizontalAlign="Center" /> 
      </asp:BoundField> 

      <asp:TemplateField ItemStyle-Width="150px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" 
       HeaderText="Description"> 
       <ItemTemplate> 
        <asp:Label ID="descriptionLabel" runat="server" Text="XXX"></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField ItemStyle-Width="180px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" 
       HeaderText="Enterdate"> 
       <ItemTemplate> 
        <asp:Label ID="datetimeLabel" runat="server" Text="XXX"></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField ItemStyle-Width="20px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" 
       HeaderText=""> 
       <ItemTemplate> 
        <asp:HyperLink ID="detailsLink" runat="server"> 
         <asp:Image ID="imgDetails" ImageUrl="~/Images/Little/search.png" runat="server" Width="20px" 
          Height="20px" /> 
        </asp:HyperLink> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

Answer 1

Ce sera beaucoup plus facile pour vous si vous utilisez pour ce css et le style des éléments qui sont rendus par le gridview. Vous devriez commencer par donner à votre gridview un nom CssClass afin que votre style ne se mêle pas aux autres tables du site. Je suggère d'utiliser un outil comme firebug pour vous aider à voir le résultat rendu de votre gridview. Si je me souviens dire correctement que vous donnez le gridview une CssClass de « grille », vous devriez être en mesure de faire quelque chose comme ça si la ligne d'en-tête est rendu comme th:

.grid th{background:url('whatever.png') repeat-x;} 

Answer 2

Vous pouvez utiliser une classe CSS d'en-tête (par exemple <HeaderStyle CssClass="header" />) défini pour chacune de vos colonnes et utilisez code CSS pour styler vos cellules d'en-tête avec une image de fond:

.header 
{ 
    background:transparent url('my_header_img_url') repeat-x scroll 0 0; 
}