How to design a GridView?

Question

Hi,

i have followed GridView in my ASP.Net Page: http://s2.imgimg.de/uploads/14b706b38JPG.jpg

It should look like this: http://s2.imgimg.de/uploads/392bac9b9JPG.jpg (Made by mine designer in Photoshop).

(The header Background is a file)

I tried a lot, but it seems very very hard to design this. Here is my 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

It will be much easier for you if you use css for this and style the elements that are rendered by the gridview. You should start by first giving your gridview a CssClass name so that your style don't mess with other table's on the site. I would suggest using a tool like firebug to help you see the rendered result of your gridview. If I remember correctly say you give the gridview a CssClass of 'grid' you should be able to do something like this if the header row is rendered as a th:

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

Answer 2

You can use a header CSS class (e.g. <HeaderStyle CssClass="header" />) defined for each of your columns and then use some CSS to style your header cells with a background image:

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