How to Change Gridview 's Cell Syle of Grouped Row

Posted by: chenpengbnu on 10 September 2017, 11:41 am EST

  • Posted 10 September 2017, 11:41 am EST

    In grouped mode, group rows are used to combine rows with identical values in grouping columns.

    How can I Change one Cell's Syle(such as backagecolor) of the Group rows?

    thanks a lot.
  • Replied 10 September 2017, 11:41 am EST

    hi,all

    I catch a picture to display what i want.
    please help me.

  • Replied 10 September 2017, 11:41 am EST

    Hi,

    You can change the backcolor of the cells of GroupHeaderRow in the the RowCreated event of C1GridView using the code below:

    protected void C1GridView1_RowCreated(object sender, C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs e)
    {
    if (e.Row.RowType == C1.Web.UI.Controls.C1GridView.C1GridViewRowType.GroupHeader)
    {
    e.Row.Cells[1].BackColor = Color.Aqua;
    }
    }



    and you can change the backcolor of the cells with equal value in the RowDataBound event of C1GridView using the code below:

    protected void C1GridView1_RowDataBound(object sender, C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs e)
    {
    if (e.Row.RowType == C1.Web.UI.Controls.C1GridView.C1GridViewRowType.DataRow)
    {
    if (e.Row.Cells[6].Text == e.Row.Cells[7].Text )
    {
    e.Row.Cells[6].BackColor = Color.Orange;
    e.Row.Cells[7].BackColor = Color.Orange;
    }
    }
    }


    You can provide the index of the columns in Cells[] accordingly.

    Regards
    Abdias
  • Replied 10 September 2017, 11:41 am EST

    Hellow Abdias,

    Thanks very much for your help!

    I tried your method using "C1.Web.UI.Controls.C1GridView",and it worked.But when i can't use it for the "C1.Web.Wijmo.Controls.C1GridView" ,because "C1.Web.Wijmo.Controls.C1GridView" doesn't has the property of "C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowType.GroupHeader".

    Could you give more advice?

    chen peng
  • Replied 10 September 2017, 11:41 am EST

    Hellow Abdias,

    I kown why grouprowtype is not suported in new gridview.It seems that in the new gridview,group rows are created in client-side by javastript.

    so,I have no way for changing cell's style of group rows.god! maybe it's possible using javascript,but i don't kown how.

    thanks all the same!

    chen peng
  • Replied 10 September 2017, 11:41 am EST

    Hi,

    the group header and group footer rows are marked with the "wijmo-wijgrid-groupheaderrow" and "wijmo-wijgrid-groupfooterrow" css classes. You need to override these classes to implement custom appearance.

    For example:

    .wijmo-wijgrid tr.wijmo-wijgrid-groupheaderrow td
    {
    background-color: red;
    }

    Regards,
    Sergey.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels