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

Background color of parent row of detail table in rad grid

8 Answers 727 Views
Grid
This is a migrated thread and some comments may be shown as answers.
kdyeqb
Top achievements
Rank 1
kdyeqb asked on 27 May 2014, 12:03 PM
Hello,
  I am using radgrid to display the data. I want to set the background colour of the parent row of the detail table in the rad grid.I want the colour from the start (extreme left) so that it covers the expandcol cell of master table too.
Please suggest.

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 28 May 2014, 08:39 AM
Hi,

You can try the following code snippet to set BackColor for MasterTable.

ASPX:
<MasterTableView>
   <ItemStyle BackColor="Yellow" />
   <AlternatingItemStyle BackColor="Yellow" />

C#:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
 //To set color to the ExpandColumn
  (RadGrid1.MasterTableView.GetColumn("ExpandColumn") as GridExpandColumn).ItemStyle.CssClass = "ExpandCollapse";      
}

CSS:
<style type="text/css">
  .ExpandCollapse
  {
    background-color: Yellow;
  }
</style>

Thanks,
Shinu
0
kdyeqb
Top achievements
Rank 1
answered on 28 May 2014, 10:21 AM
Hi,

But that will give the background color to all rows of master table.But I want color only in the parent row of detail tables.Please have a look into the attachment where I have marked exactly where I want the color.

Thanks
Ankit
0
Shinu
Top achievements
Rank 2
answered on 29 May 2014, 05:18 AM
Hi,

You can achieve this by accessing the DetailTable and check if its expanded then set the row color as shown below.

C#:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
  foreach (GridDataItem dataItem in RadGrid1.Items)
    {
      if (dataItem.Expanded && dataItem.OwnerTableView.Name == "TableName")
      {
       dataItem.BackColor = Color.Yellow;
       dataItem.CssClass = "rowColor";
      }
    }
}

CSS:
<style type="text/css">
  .rowColor .rgExpandCol
  {
      background-color: Yellow !important;
  }
</style>

Thanks,
Shinu
0
kdyeqb
Top achievements
Rank 1
answered on 29 May 2014, 11:55 AM
Hi , 
There are two detail tables in Master table of radgrid but Detail table 1 visible is set to false . There is one white line is coming up above the detail table 2. PLease have a look in at the attached screenshot.
This white line needs to be removed.
Please suggest.
0
Konstantin Dikov
Telerik team
answered on 02 Jun 2014, 08:20 AM
Hi Ankit,

In general, when you set the Visible property of GridTableView within the DetailTables collection, no element will be rendered for that GridTableView, so the line you are referring too is not related with the hidden table.

I could suggest that you inspect the generated HTML and see what is causing that line to be displayed in your exact scenario.

Nevertheless, you could try to use the following CSS and see if it removed the line on your end:
<style type="text/css">
    .RadGrid tr td{
        border: none!important;
        padding-top: 0!important;
    }
</style>

Hope that helps.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
kdyeqb
Top achievements
Rank 1
answered on 06 Jun 2014, 06:38 AM
Thanks a lot for your reply.....The CSS which you gave works fine in IE7 browser but not in IE8 or IE9 or chrome.
White line is still there for these browsers.
you gave this CSS: 

<style type="text/css">    .RadGrid tr td{        border: none!important;        padding-top: 0!important;    }</style>

Can you please provide a way out for these browsers too.


Thanks Ankit
0
kdyeqb
Top achievements
Rank 1
answered on 06 Jun 2014, 09:32 AM
Thanks for the reply...I tried out your suggestion it gives the yellow color to the parent row of detail table but it doesn't start from where it exactly needs to.
Please find attached the image which explains from where the yellow color to start from.

Thanks Ankit
0
Konstantin Dikov
Telerik team
answered on 10 Jun 2014, 07:18 AM
Hello Ankit,

The TD elements that you are referring to does not have rgExpandCol class, so they will not be styled with the current suggestions.

What you could do for setting a yellow color to those TD element is to use the Shinu's approach for adding CSS classes to the element, but with one addition line for adding a CSS class to the TR element in question:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem dataItem in RadGrid1.Items)
    {
        if (dataItem.OwnerTableView.Name == "TableViewName")
        {
            dataItem.BackColor = System.Drawing.Color.Yellow;
            dataItem.CssClass = "rowColor";
            (dataItem.OwnerTableView.Parent.Parent as TableRow).CssClass = "parentRow";
        }
    }
}

And the CSS:
<style type="text/css">
    .rowColor .rgExpandCol {
        background-color: Yellow !important;
    }
  
    .parentRow td{
        background-color: Yellow !important;
    }
</style>

Hope that helps.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
kdyeqb
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
kdyeqb
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or