css in merged cells

14 posts, 0 answers
  1. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 20 Sep 2012 Link to this post

    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?
  2. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 24 Sep 2012 Link to this post

    Hi,

    Any update on this. I could not find anything that will help me with changing the row style. Please help.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Galin
    Admin
    Galin avatar
    526 posts

    Posted 26 Sep 2012 Link to this post

    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.
  5. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 26 Sep 2012 Link to this post

    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.


  6. Galin
    Admin
    Galin avatar
    526 posts

    Posted 01 Oct 2012 Link to this post

    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.
  7. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 01 Oct 2012 Link to this post

    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?
  8. Galin
    Admin
    Galin avatar
    526 posts

    Posted 08 Oct 2012 Link to this post

    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.
  9. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 08 Oct 2012 Link to this post

    Thanks for the response. However i see no change with the solution provided.
    Could you give me a working sample?
  10. Galin
    Admin
    Galin avatar
    526 posts

    Posted 11 Oct 2012 Link to this post

    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.
  11. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 11 Oct 2012 Link to this post

    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?
  12. Galin
    Admin
    Galin avatar
    526 posts

    Posted 12 Oct 2012 Link to this post

    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.
  13. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 12 Oct 2012 Link to this post

    That seems to work.
    Thanks!
  14. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 12 Oct 2012 Link to this post

    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.
  15. Galin
    Admin
    Galin avatar
    526 posts

    Posted 17 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017