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

Styling Group/Subgroup headers and footers

1 Answer 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
justin
Top achievements
Rank 1
justin asked on 02 Jun 2014, 12:38 PM
I would like to style my group headers slightly different than the subgroup headers. I would also like to style my group footers slightly different than my subgroup footers.

by default, the group and subgroups are styled the exact same and it is hard to differentiate if you are looking at a group or subgroup, especially when looking at the footers.

See the attached picture. Ideally the group header text color would be different than the subgroup header text color. and the group footer bg color would be different from the subgroup footer bg color.

Any help is appreciated. Thanks.

Justin

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 05 Jun 2014, 08:33 AM
Hello Justin,

For achieving such result you could handle the server-side OnPreRender event of the grid, get reference to the GroupHeaderItem and GroupFooterItem items and depending on their GroupIndex to change their style.

Following is a simple example demonstrating how to apply different styles for different group levels:
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridItem[] footers = RadGrid1.MasterTableView.GetItems(GridItemType.GroupFooter);
    GridItem[] headers = RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader);
 
    foreach (GridGroupFooterItem footer in footers)
    {
        string[] groupIndex = footer.GroupIndex.Split('_');
        switch (groupIndex.Length)
        {
            case 1:
                footer.BackColor = System.Drawing.Color.Blue;
                footer.ForeColor = System.Drawing.Color.White;
                break;
            case 2:
                footer.BackColor = System.Drawing.Color.Purple;
                footer.ForeColor = System.Drawing.Color.White;
                break;
            default:
                break;
        }
    }
 
    foreach (GridGroupHeaderItem header in headers)
    {
        string[] groupIndex = header.GroupIndex.Split('_');
        switch (groupIndex.Length)
        {
            case 1:
                header.BackColor = System.Drawing.Color.Blue;
                header.ForeColor = System.Drawing.Color.White;
                break;
            case 2:
                header.BackColor = System.Drawing.Color.Purple;
                header.ForeColor = System.Drawing.Color.White;
                break;
            default:
                break;
        }
    }
}

The above could be easily modified, so it could handle more nested groups.

Hope this helps.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
justin
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or