Show Gridlines on a Grid

Question

I'm using Rad Grids and I use the built in Skins for appearance. However, I 'd like to add Gridlines for my Grid. Gridlines = "Both" does not seem to work.

 <telerik:RadGrid ID="RadGridProviders" Width="100%" GridLines="Both" AllowPaging="true" Skin="WebBlue" runat="server"  DataSourceID="SDSProvider" AutoGenerateColumns="false">
                    <MasterTableView DataSourceID="SDSProvider" PageSize="7" CellPadding="0" GridLines="Both" CellSpacing="0" DataKeyNames="ID,Entry_Loc" AllowMultiColumnSorting="True" AutoGenerateColumns="false"  >
                     <PagerStyle Mode="NextPrevNumericAndAdvanced"/>
                     <Columns>
                        <telerik:GridBoundColumn HeaderText="Organization Name" HeaderStyle-HorizontalAlign="Center" DataField="OrgName" SortExpression="OrgName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Provider Type" HeaderStyle-HorizontalAlign="Center" DataField="TypeofProvider" SortExpression="TypeofProvider">
                        </telerik:GridBoundColumn>
                         <telerik:GridBoundColumn HeaderText="Contact Name" HeaderStyle-HorizontalAlign="Center" DataField="Contact" SortExpression="Contact">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Address" HeaderStyle-HorizontalAlign="Center" DataField="Address" SortExpression="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Contact Number" HeaderStyle-HorizontalAlign="Center" DataField="Phone" SortExpression="Phone">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Creator Location" Visible="false" HeaderStyle-HorizontalAlign="Center" DataField="Entry_Loc" SortExpression="Entry_Loc">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" HeaderText="Delete Provider" HeaderStyle-HorizontalAlign="Center" 
                            ConfirmText="Are You Sure You Want to Delete this Provider?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete Provider Confirmation"
                            UniqueName="DeleteProv">
                        </telerik:GridButtonColumn> 
                     </Columns>
                    </MasterTableView>
                    </telerik:RadGrid>

I just tried adding custom CSS

.mytable tr td
    {
                border: solid 1px #000000;
    }

I set the css class for the item style inside of the masterr table, i set it on the master table and on the grid itself. Didn't work.

Answer 1

Your skin may not support grid lines. You can try using another skin to check this or use firebug. If skin does not support grid lines you will need to add them manually with custom css/skin.

Here is description of RadGrid css classes: http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

You can try customizing existing skin or use something like:

.RadGrid_WebBlue .rgRow td
{
    border: solid 1px #000000;
}

Answer 2

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."

This was a comment made by Lee Dumond on my blog post on this topic:

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