[Solved] set background color for 2nd level detail table

[Priya]

hi,
I have a radgrid with 2 level detail tables.
For the 1st detail table i applied CSS by giving styles in CSS

 

.DetailTable_Default Caption
{
 background-color:#b0c4de;
}
Caption
{
color:#233D3D; text-align:left; font-weight:bold; text-transform:uppercase;background-color:#b0c4de;
}

<DetailTables>
        <telerik:GridTableView Name="TableViewAssociateDoc" CommandItemDisplay="Top" Width="100%"
        Caption="TERMS AND SC DOCUMENTS" AllowPaging="false" PageSize="1" CssClass="DetailTable_Default">

i have another detail table insideTableViewAssociateDoc.
But i couldnt set a different style for that detail table caption .hw is it possible
plz help me...........
Thanks...

[Princy]

Hello Priya,

You can try out the following code to set the background color of the third level grid caption:
aspx:

<telerik:RadGrid  ID="RadGrid1" DataSourceID="SqlDataSource" runat="server" >
       <MasterTableView DataSourceID="SqlDataSource">
         <DetailTables >
           <telerik:GridTableView ShowFooter="true" Caption="SecondLevelGrid" CssClass="Detail1" DataSourceID="SqlDataSource1" Name="Detail1" runat="server" >
            <DetailTables>
              <telerik:GridTableView CssClass="Detail2" Caption="ThirdLevelGrid"  DataSourceID="SqlDataSource2" Name="Detail2" runat="server" >

css:

 <style type="text/css">
    .Detail2 Caption
      {
       background-color:Red !important;
      }
  </style>

Thanks
Princy.

[Priya]

Thanks alot for ur quick response....

firstly i tried with

.DetailTable_Default Caption

{

background-color:#b0c4de;

}

But it didnt work even for the 1st detail table
So i gave

.DetailTable_Default Caption

{

background-color:#b0c4de;

}

Caption

{

color:#233D3D; text-align:left; font-weight:bold; text-transform:uppercase;background-color:#b0c4de;

}

Then only that 1st level detail table woked

I tried this for the 2nd level detail table too by giving a differnet CSS class name
ie,

.DetailTable_Sub Caption

{

background-color:#00c4de;

}

Caption

{

color:#233D3D; text-align:left; font-weight:bold; text-transform:uppercase;background-color:#ff0000;

}

<MasterTableView DataSourceID="SqlDataSource">

<DetailTables >

<telerik:GridTableView ShowFooter="true" Caption="SecondLevelGrid" CssClass="DetailTable_Default" DataSourceID="SqlDataSource1" Name="Detail1" runat="server" >

<DetailTables>

<telerik:GridTableView CssClass="DetailTable_Sub" Caption="ThirdLevelGrid"  DataSourceID="SqlDataSource2" Name="Detail2" runat="server" >

but no effect....

[Princy]

 Hello Priya,

Did you try adding the !important keyword? If not, try adding it and see if it helps. Since the skin definitions will override any additional css classes for the nested tables, you will have to put a !important keyword to the corresponding inner tables styles in order to take precedence over the owner table rendering.
css:

.DetailTable_Sub Caption
{
 background-color:#00c4de !important;
}

Thanks
Princy.

[Priya]

hi
i also tried with !important

            }
.DetailTable_sub Caption

{ background-color:Red !important;}

but no effect...

[Priya]

Hi,
now its working fine....i thk it may be due to IE version..
Thakns alot...

[Anil Mandava]

I have one detail table and a nested view template and want to change the background color of firstlevel detail table.

my radgrid is using office2007 skin

and I want to be able to change the first level details table background  color

[Princy]

Hi Anil,

I believe, you want to change the appearance of the child table in a hierarchical grid when a predefined skin is applied. If so, then you can refer to the following document which explains on how to get this done:
Different styles in each hierarchy level with skin applied

Hope this helps..
Princy.

[Anil Mandava]

I am not able to change the filter columns background color eventhough I did the same way as you suggested

[Princy]

Hello Anil,

For changing the appearance of the filter row in the child table of a grid, you can follow a slightly different appraoch, which is shown in the example below:
aspx:

<telerik:RadGrid  ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server"
Skin="Office2007" Width= "95%" AutoGenerateColumns="False">
     <PagerStyle Mode="NumericPages"></PagerStyle>
          <MasterTableView DataSourceID="AccessDataSource1" Width= "100%">
               <DetailTables>
                    <telerik:GridTableView DataSourceID="AccessDataSource2" Width="100%" CssClass="RadGrid_Detail" runat= "server">
                    .........

js:

 .RadGrid_Detail .rgFilterRow
   {
     background: plum !important;

   }

Thanks
Princy.

[Philip]

Hi,

How about setting the background color for the caption of the detail table to match the backcolor value of the ItemStyle and AlternatingItemStyle of the parent table.

            <DetailTables>
               <telerik:GridTableView Caption="Add entries to the source above" ... />
            </DetailTables>
            <ItemStyle BackColor="LightCyan" Font-Bold="True" Font-Italic="False" Font-Overline="False"
                Font-Strikeout="False" Font-Underline="False" Wrap="True" />
            <AlternatingItemStyle BackColor="Beige" Font-Bold="True" Font-Italic="False"
                Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
                Wrap="True" />

Can this only be done at run-time? Samples appreciated. Thanks.

[Dimo]

Hello Philip,

For this scenario you need to determine the parent row of the detail table programmatically. Then you can assign suitable CSS classes or properties, according to your preference.

Please review the following example, which should provide guidance how to proceed:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-obtain-reference-to-radgrid-detailtables-containing-rows-and-cells-and-customize-their-appearance.aspx

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.