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.
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
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:
C#:
CSS:
Thanks,
Shinu
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
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#:
CSS:
Thanks,
Shinu
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.
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
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:
Hope that helps.
Regards,
Konstantin Dikov
Telerik
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
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
Please find attached the image which explains from where the yellow color to start from.
Thanks Ankit
0
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:
And the CSS:
Hope that helps.
Regards,
Konstantin Dikov
Telerik
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.