Как спроектировать GridView?

Question

Я следил за GridView на моей странице ASP.Net: http://s2.imgimg.de/uploads/14b706b38JPG.jpg

Это должно выглядеть так: http://s2.imgimg.de/uploads/392bac9b9JPG.jpg (Сделано моим дизайнером в Photoshop).

(Фон заголовка - файл)

Я много пробовал, но, кажется, очень и очень сложно это спроектировать. Вот мой код:

        <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

Вам будет намного легче, если вы используете для этого CSS и стилизуете элементы, которые отображаются в gridview.Сначала вы должны дать вашему gridview имя CssClass, чтобы ваш стиль не мешал другим таблицам на сайте.Я бы предложил использовать такой инструмент, как firebug, чтобы помочь вам увидеть результат вашей сетки.Если я правильно помню, я говорю, что вы даете gridview CssClass 'grid', вы должны быть в состоянии сделать что-то подобное, если строка заголовка отображается как th:

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

Answer 2

Вы можете использовать класс CSS заголовка (например, <HeaderStyle CssClass="header" />), определенный для каждого из ваших столбцов, а затем использовать CSS для стилизации ваших ячеек заголовка с фоновым изображением:

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