Hi,
I am forming my grid cells by merging multiple rows as shown here :
http://www.telerik.com/community/forums/aspnet-ajax/grid/can-i-use-html-code-like-lt-td-rowsapn-2-gt-in-grid.aspx#1144543
I have different color for my alternate rows. But with the merged cell functionality the css is all mixed up as shown in the screen shot. Could you suggest how to put have the non-merged cells as the alternate row?
I am forming my grid cells by merging multiple rows as shown here :
http://www.telerik.com/community/forums/aspnet-ajax/grid/can-i-use-html-code-like-lt-td-rowsapn-2-gt-in-grid.aspx#1144543
I have different color for my alternate rows. But with the merged cell functionality the css is all mixed up as shown in the screen shot. Could you suggest how to put have the non-merged cells as the alternate row?
13 Answers, 1 is accepted
0

MBEN
Top achievements
Rank 2
Veteran
answered on 24 Sep 2012, 07:43 PM
Hi,
Any update on this. I could not find anything that will help me with changing the row style. Please help.
Any update on this. I could not find anything that will help me with changing the row style. Please help.
0
Hi,
You can set a CssClass on merged cell and use the corresponded class for styling, e.g.
C#
CSS
Also, the other option is to style it at run time:
I hope this helps.
All the best,
Galin
the Telerik team
You can set a CssClass on merged cell and use the corresponded class for styling, e.g.
C#
row.Cells[i].CssClass =
"mergedCell"
;
.RadGrid td.mergedCell
{
background
:
#b3bdd2
;
}
Also, the other option is to style it at run time:
row.Cells[i].Style.Add(
"Background"
,
"#b3bdd2"
);
I hope this helps.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

MBEN
Top achievements
Rank 2
Veteran
answered on 26 Sep 2012, 10:26 PM
The solution given here does not work. The grid looks as attached.
I also do not want the rows to have a hard coded color. I just want the merged rows to have the same color so for the user the merger rows look as one row and the following row should take the alternate row color.
I also do not want the rows to have a hard coded color. I just want the merged rows to have the same color so for the user the merger rows look as one row and the following row should take the alternate row color.
0
Hello,
You can use style the merged cell depending oн the Skin, for example
The merged cell is styled on the screenshot. Do you expect different behavior? Could you please give us more details on what you are trying to achieve?
Greetings,
Galin
the Telerik team
You can use style the merged cell depending oн the Skin, for example
div.RadGrid_Default td.mergedCell
{
background
:
#F2F2F2
;
}
div.RadGrid_Black td.mergedCell
{
background
:
#494949
;
}
The merged cell is styled on the screenshot. Do you expect different behavior? Could you please give us more details on what you are trying to achieve?
Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

MBEN
Top achievements
Rank 2
Veteran
answered on 01 Oct 2012, 03:12 PM
In the screenshot attached, I have merged the two rows where the Account is 2011 Retirement. These rows have a different value for PayoutType and Description but the other columns have same value so I merged the two rows to give the appearance of one row. However the style for the cells 'PayoutType and Payout description' are different. I want them to have the same color and the next row to have a different color.
Does that make sense?
Does that make sense?
0
Hello,
This is a specific custom scenario and you should add a custom logic. However, I suggest you to style the merged row only without changing the other elements. Perhaps the easier way to achieve this is by using JavaScript:
and CSS
I hope this helps.
All the best,
Galin
the Telerik team
This is a specific custom scenario and you should add a custom logic. However, I suggest you to style the merged row only without changing the other elements. Perhaps the easier way to achieve this is by using JavaScript:
function
pageLoad() {
$telerik.$(
".MergedCell"
).each(
function
()
{
var
className =
"mergedRows"
;
var
mergedRows = parseInt(
this
.getAttribute(
"rowspan"
), 10);
$telerik.$(
this
.parentNode).addClass(className).nextAll().slice(0,mergedRows).addClass(className);
});
}
and CSS
div.RadGrid tr.mergedRows
{
background
:
#ffa517
;
}
I hope this helps.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

MBEN
Top achievements
Rank 2
Veteran
answered on 08 Oct 2012, 03:30 PM
Thanks for the response. However i see no change with the solution provided.
Could you give me a working sample?
Could you give me a working sample?
0
Hello,
You can find a sample page in the attached archive. Please check it out and let me know how it goes.
All the best,
Galin
the Telerik team
You can find a sample page in the attached archive. Please check it out and let me know how it goes.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

MBEN
Top achievements
Rank 2
Veteran
answered on 11 Oct 2012, 03:18 PM
I can change the merged row color now but it is also changing the row color for the next row.
In your example the rows 4,5,6 are the merged rows but it is also displaying row 7 in the new color for merged rows.
Can we have just the merged rows to have a different color?
In your example the rows 4,5,6 are the merged rows but it is also displaying row 7 in the new color for merged rows.
Can we have just the merged rows to have a different color?
0
Hi,
In this case, please change the js function to the following one
Greetings,
Galin
the Telerik team
In this case, please change the js function to the following one
function
pageLoad() {
$telerik.$(
".MergedCell"
).each(
function
() {
var
className =
"mergedRows"
;
var
mergedRows = parseInt(
this
.getAttribute(
"rowspan"
), 10);
$telerik.$(
this
.parentNode).addClass(className).nextAll().slice(0, mergedRows-1).addClass(className);
});
}
Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

MBEN
Top achievements
Rank 2
Veteran
answered on 12 Oct 2012, 04:54 PM
That seems to work.
Thanks!
Thanks!
0

MBEN
Top achievements
Rank 2
Veteran
answered on 12 Oct 2012, 11:26 PM
Hi,
There still seems to be an issue with this. If I have several sets of merged rows subsequently, they all have the same color. It is very difficult for the user to read those rows without distinguishing between them. I need the user to have the appearance of alternate rows (after merging the rows) to have a different color.
attached is an example of what it looks like right now.
There still seems to be an issue with this. If I have several sets of merged rows subsequently, they all have the same color. It is very difficult for the user to read those rows without distinguishing between them. I need the user to have the appearance of alternate rows (after merging the rows) to have a different color.
attached is an example of what it looks like right now.
0
Hello,
As I mentioned in the previous post, this is a specific custom scenario and you should add a custom logic.
For example you can add different CSS classes on every alternate merged rows. You can achieve this on client side in case there are only one merged cell on a row:
Additionally, the other way to achieve this is on server side be merging not only the cell, but the whole rows and adding a <br /> between the different items.
Please give a try and let me know how it goes.
All the best,
Galin
the Telerik team
As I mentioned in the previous post, this is a specific custom scenario and you should add a custom logic.
For example you can add different CSS classes on every alternate merged rows. You can achieve this on client side in case there are only one merged cell on a row:
function
pageLoad() {
$telerik.$(
".MergedCell"
).each(
function
(i) {
if
(i%2)
{
var
className =
"mergedRows"
;
var
mergedRows = parseInt(
this
.getAttribute(
"rowspan"
), 10);
$telerik.$(
this
.parentNode).addClass(className).nextAll().slice(0, mergedRows-1).addClass(className);
}
});
}
Additionally, the other way to achieve this is on server side be merging not only the cell, but the whole rows and adding a <br /> between the different items.
Please give a try and let me know how it goes.
All the best,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.