css in merged cells

[MBEN]

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?

[MBEN]

Hi,

Any update on this. I could not find anything that will help me with changing the row style. Please help.

[Galin]

Hi,

You can set a CssClass on merged cell and use the corresponded class for styling, e.g.
C#

row.Cells[i].CssClass = "mergedCell";

CSS

.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

[MBEN]

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.

[Galin]

Hello,

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

[MBEN]

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?

[Galin]

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:

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

[MBEN]

Thanks for the response. However i see no change with the solution provided.
Could you give me a working sample?

[Galin]

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

[MBEN]

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?

[Galin]

Hi,

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

[MBEN]

That seems to work.
Thanks!

[MBEN]

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.

[Galin]

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:

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