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

css in merged cells

13 Answers 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 20 Sep 2012, 06:40 PM
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?

13 Answers, 1 is accepted

Sort by
0
MBEN
Top achievements
Rank 1
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.
0
Galin
Telerik team
answered on 26 Sep 2012, 05:58 AM
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
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 1
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.


0
Galin
Telerik team
answered on 01 Oct 2012, 02:54 PM
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
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 1
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?
0
Galin
Telerik team
answered on 08 Oct 2012, 06:13 AM
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
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 1
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?
0
Galin
Telerik team
answered on 11 Oct 2012, 03:04 PM
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
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 1
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?
0
Galin
Telerik team
answered on 12 Oct 2012, 12:26 PM
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
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 1
Veteran
answered on 12 Oct 2012, 04:54 PM
That seems to work.
Thanks!
0
MBEN
Top achievements
Rank 1
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.
0
Galin
Telerik team
answered on 17 Oct 2012, 06:00 PM
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
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.
Tags
Grid
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
MBEN
Top achievements
Rank 1
Veteran
Galin
Telerik team
Share this question
or