Question

How to set border for ItemTemplates in GridView?

Following is the Gridview code.

<div>
   <asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns = "false" Font-Names = "Arial" 
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"  
    HeaderStyle-BackColor = "green" AllowPaging ="true"   
    OnPageIndexChanging = "OnPaging" OnRowDataBound = "RowDataBound"
    PageSize = "10" >
   <Columns>
    <asp:TemplateField>
        <HeaderTemplate>
            <asp:CheckBox ID="chkAll" runat="server" onclick = "checkAll(this);" />
        </HeaderTemplate> 
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)"/>
        </ItemTemplate>
    </asp:TemplateField> 
    <asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID" HeaderText = "CustomerID" />
    <asp:BoundField ItemStyle-Width = "150px" DataField = "City" HeaderText = "City"/>
    <asp:BoundField ItemStyle-Width = "150px" DataField = "Country" HeaderText = "Country"/>
    <asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode" HeaderText = "PostalCode"/>
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 

All Bounded Fields are getting borders but not the ItemTemplated Fields.

Answer 1

A workaround is to do this by tapping into the GridView’s RowDataBound event:

protected void MyGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
     foreach (TableCell tc in e.Row.Cells)
     {
         tc.Attributes["style"] = "border-color: #c3cecc";
     }
}

More info here: http://codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx

See comments section for a better way…

protected void Page_Load(object sender, EventArgs e)
{
   this.GridView1.Attributes.Add("bordercolor", "c3cecc");
}

“With the GridView, the declarative bordercolor attribute adds an inline style declaration which only applies to the table itself, not individual cells.

Adding the bordercolor attribute programmatically does not use an inline style, but uses the HTML bordercolor property, which browsers apply to ALL borders inside the table.”

One more thing, if you are using Eric Meyer’s reset, it breaks the table rendering in the GridView. Solution to that particular issue is to remove all table elements from the reset rule.