Meenakshi Nagalingam
Top achievements
Rank 1
Rank 1
Meenakshi Nagalingam
asked on 25 May 2010, 06:49 PM
Hi,
I need to change the border to white color in Detail table for a RadGrid. I am not able to set the skin for this even though i am using following in my custom skin,
I need to change the border to white color in Detail table for a RadGrid. I am not able to set the skin for this even though i am using following in my custom skin,
.RadGrid_Default
.rgDetailTable
{
border-bottom : #FFFFFF !important;
border-top : #FFFFFF !important;
border-right : #FFFFFF !important;
border-left : #FFFFFF !important;
background : #FFFFFF !important;
}
And since the detail table is indented, the vertical column borders are misaligned with the master table. This also needs to be corrected. Please refer the attached screenshot. Since the data is Client Confidential we have masked the data.
Regards,
Meenakshi
1 Answer, 1 is accepted
0
Hi Meenakshi,
Please avoid posting a forum thread and a support ticket about the same thing.
Now to your question -
When you use border, border-top, etc, you need to specify the border style and width as well. Currently you are specifying only the border color, which is incorrect. You can use the border-color CSS property if you want to set only the border color.
In addition, please do not use the GridLines ASP.NET property, as it renders obsolete HTML attributes, which do not work well with CSS skins.
Here is a demo showing how to set white borders for the detail tables and detail table cells, how to set white background for detail table rows, and how to align detail table columns with master table columns.
Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Please avoid posting a forum thread and a support ticket about the same thing.
Now to your question -
When you use border, border-top, etc, you need to specify the border style and width as well. Currently you are specifying only the border color, which is incorrect. You can use the border-color CSS property if you want to set only the border color.
In addition, please do not use the GridLines ASP.NET property, as it renders obsolete HTML attributes, which do not work well with CSS skins.
Here is a demo showing how to set white borders for the detail tables and detail table cells, how to set white background for detail table rows, and how to align detail table columns with master table columns.
<%@ Page Language="C#" %><%@ Import Namespace="System.Data" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <script runat="server"> protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { DataTable dt = new DataTable(); DataRow dr; int colsNum = 5; int rowsNum = 2; string colName = "Column"; for (int j = 1; j <= colsNum; j++) { dt.Columns.Add(String.Format("{0}{1}", colName, j)); } for (int i = 1; i <= rowsNum; i++) { dr = dt.NewRow(); for (int k = 1; k <= colsNum; k++) { dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); } dt.Rows.Add(dr); } (sender as RadGrid).DataSource = dt; } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head runat="server"><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>RadControls</title><style type="text/css"> .RadGrid td{padding:0}div.RadGrid .rgDetailTable,div.RadGrid .rgDetailTable td{ border-color:#fff;}div.RadGrid .rgDetailTable td.rgExpandCol{ border-color:#8ea3b9;}div.RadGrid .rgDetailTable tr{ background:none #fff;}/* The following is required for pixel-exact alignment in IE7 *//*.RadGrid .rgMasterTable .rgDetailTable{border-left-width:0}*/</style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /> <telerik:RadGrid ID="RadGrid1" runat="server" Width="800px" Skin="WebBlue" AutoGenerateColumns="false" OnNeedDataSource="RadGrid_NeedDataSource"> <MasterTableView TableLayout="Fixed"> <Columns> <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" /> <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" /> <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="140px" /> <telerik:GridBoundColumn DataField="Column4" HeaderText="Col 4" HeaderStyle-Width="80px" /> <telerik:GridBoundColumn DataField="Column5" HeaderText="Col 5" HeaderStyle-Width="80px" /> </Columns> <DetailTables> <telerik:GridTableView Width="100%"> <Columns> <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" /> <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" /> <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="140px" /> <telerik:GridBoundColumn DataField="Column4" HeaderText="Col 4" HeaderStyle-Width="80px" /> <telerik:GridBoundColumn DataField="Column5" HeaderText="Col 5" HeaderStyle-Width="80px" /> </Columns> <DetailTables> <telerik:GridTableView Width="100%"> <Columns> <telerik:GridBoundColumn DataField="Column1" HeaderText="Col 1" /> <telerik:GridBoundColumn DataField="Column2" HeaderText="Col 2" HeaderStyle-Width="200px" /> <telerik:GridBoundColumn DataField="Column3" HeaderText="Col 3" HeaderStyle-Width="140px" /> <telerik:GridBoundColumn DataField="Column4" HeaderText="Col 4" HeaderStyle-Width="80px" /> <telerik:GridBoundColumn DataField="Column5" HeaderText="Col 5" HeaderStyle-Width="80px" /> </Columns> </telerik:GridTableView> </DetailTables> </telerik:GridTableView> </DetailTables> </MasterTableView></telerik:RadGrid> </form></body></html>Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.