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.

Solution

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;
}

Comments

[John Smith]

ok. That sounds very logical. I've tried using a css class but it didn't work. I'll post the code.

[John Smith]

no luck. I just won't let me change the attribute over that skin for whatever reason.

[IrishChieftain]

Did you try checking the cascade by using the ! CSS operator? Check in Firefox Web Dev exactly at which point the style rule is being applied and if your rule is getting ignored because of the cascade...

[John Smith]

actually isn't getting ignored. It just doesn't actually appear on the grid for whatever reason. I'll try to set the weight of the border

[Andrew Bezzub]

Try using skin's css styles to override - Teletik grid has many css stiles defined in skin. I'll try to find an example...

[IrishChieftain]

telerik.com/help/aspnet/grid/…

[John Smith]

The style above, would i just call it in the CSS attribute of the grid?

[Andrew Bezzub]

You should try to place it in the page/css file that is loaded with the grid. I think you should use firebug or IE dev tools to see what styles are applied to the grid in the html and why.

[John Smith]

your answer was closest to correct. check out this link. It is extremely helpful. blogs.telerik.com/dimodimov/posts/08-06-17/…