How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row ?

Question

How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row ?

I currently have created a rounded rectangular graphic and have used CSS to add it to the gridview header background as such:-

.datagrid th
{
    background-image: url('../images/rounded_graphic.jpg');
}

... but this just displays it in each column of the header rather than spanning the whole header row.

Any ideas ?

Answer 1

Your generated datagrid would have to have no spacing between columns.

• the first column would need the left side of the rounded image
• the columns in between would need the middle part of the image
• the last column would have the right side of the image

Thats the rough idea atleast :)

Answer 2

use templatefield with headertemplate

<asp:GridView ID="gvPrograms" runat="server"
        ...    
        >
        ...
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                     your header formatted as you like here...
                    <table>
                    </table>
                </HeaderTemplate>
                <ItemTemplate>
                </ItemTemplate>
                    your existing layout here...
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>            
</asp:GridView>

Answer 3

I've done this before. Here's roughly the code I came up with:

CSS

table th.first-column {
    background: url(images/layout/tb_left.png) 0 0 no-repeat;
}

table th {
    height: 26px;
    background: url(images/layout/tb_bg.png) 0 0 repeat-x;
}

/* Had some issues across browsers just putting the image in the <th>, had to use a span */
table th.last-column span {
    display: block;
    height: 26px;
    background: url(images/layout/tb_right.png) 100% 0 no-repeat;
}

HTML

<table width="100%" cellspacing="0" cellpadding="0">
    <thead>
     <tr>
      <th class="first-column"><span>Column 1</span></th>
      <th><span>Column 2</span></th>
      <th><span>Column 3</span></th>
      <th class="last-column"><span>Column 4</span></th>
     </tr>
    </thead>
    <tbody>
     <tr>
     ...
     </tr>       
    </tbody>
    <tfoot>
     <tr>
     ...
     </tr>
    </tfoot>
</table>

Then just create your images accordingly and everything should be fine. My first and last column images are a few hundred pixels wide with a rounded edge on the left of the first and a rounded edge on the right of the last. The middle background image is just 1x26 pixels and repeats along the x-axis.