This is a migrated thread and some comments may be shown as answers.

Skin for Detail Table in RadGrid

1 Answer 217 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Meenakshi Nagalingam
Top achievements
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,

.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

Sort by
0
Dimo
Telerik team
answered on 27 May 2010, 08:59 AM
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.


<%@ 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.
Tags
Grid
Asked by
Meenakshi Nagalingam
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or