How to add a row in Header of RadGrid

[Bruce Lam]

Please help me how to add a row in Header and merge some cells in row of Header

[Princy]

Hello lam,

You could use GridTemplateColumns to customize your header rows. Here's a help document which explains more on customizing the grid with Templatecolumns using HTML tables in the HeaderTemplate, take a look at it:
Customizing with GridTemplateColumn

Thanks
Princy.

[Michael Fuller]

In my project were unable to use GridTemplateColumns because of the dynamic nature of our grid's data.  How can we add on additional header rows and merge/span column headers by using code behind only?

[Pavlina]

Hello Michael,

I suggest you examine the following code library, which demonstrates how to span any given cell over a number of rows/columns.
http://www.telerik.com/community/code-library/aspnet-ajax/grid/span-cells-in-grid-over-multiple-positions.aspx

Sincerely yours,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Joe]

When we implement a spanned column header using the following code, all sorting ceases to work.  We've tried to use the override on the master table to get the grid to sort, but no luck.  We've implemented sorting in our object and it still won't sort.   Any ideas.

    protected void SetupDualHeaders(object sender, EventArgs e)
    {
        RadGrid _grid = ((RadGrid)sender);

        //get the current header
        GridItem[] header = _grid.MasterTableView.GetItems(GridItemType.Header);
        //get the current THead element
        GridTHead head = ((GridTHead)header[0].Parent.Controls[1].Parent);
        //Get the GridHeaderItem from the THead
        GridCommandItem _currentHeaderCommand = (GridCommandItem)head.Controls[0];
        GridHeaderItem currentHeaderItem = (GridHeaderItem)head.Controls[1];
        //Clear all GridHeaderItems
        head.Controls.Clear();
        //create a new GridHeaderItem which will be the new row
        GridHeaderItem newnewHeaderItem = new GridHeaderItem(_grid.MasterTableView, 0, 0);

        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " ", ColumnSpan = 3, HorizontalAlignHorizontalAlign = HorizontalAlign.Center });
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Reg Code", ColumnSpan = 2, HorizontalAlignHorizontalAlign = HorizontalAlign.Center });
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Actual", ColumnSpan = 7, HorizontalAlignHorizontalAlign = HorizontalAlign.Center });


        head.Controls.Add(_currentHeaderCommand);
        head.Controls.Add(newHeaderItem);
        head.Controls.Add(currentHeaderItem);
    }

[Pavlina]

Hello,

The following code library presents how to perform individual sorting and filtering for sub-columns in template column (with multi-header appearance):
Individual filtering and sorting for "sub-columns" in template column

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Joe]

That's rather complex (as I then have to implement a double hit against the database or the object).  Here's what we wound up doing instead last week.  In the original example provided, the headers were cleared.  Well this not only causes sorting to break, but will also clear out the command item and the filter rows - so it's not really a good thing.   Instead we looped through the header collection found the correct GrideHeader Item (vs the command item or the filter item) and inserted a row above it. This will let your sorting, filtering, etc work without any significant code.   Make sure this is fired as the Grid PreRender Event. Here's the code.

protected void SetupDualHeaders(object sender, EventArgs e)

{

RadGrid _grid = ((RadGrid)sender);

//get the current header

GridItem[] header = _grid.MasterTableView.GetItems(GridItemType.Header);

//get the current THead element

GridTHead head = ((GridTHead)header[0].Parent.Controls[1].Parent);

GridHeaderItem newHeaderItem = new GridHeaderItem(_grid.MasterTableView, 0, 0);

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " ", ColumnSpan = 3, HorizontalAlign = HorizontalAlign.Center });

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Reg Code", ColumnSpan = 2, HorizontalAlign = HorizontalAlign.Center });

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Actual", ColumnSpan = 7, HorizontalAlign = HorizontalAlign.Center });

for (int i = 0; i < head.Controls.Count; i++)

{               // loop through the header controls collection and find the 'row' that has the same type of GridHeaderItem             // Then insert the new row just above it - remember the 0 based index will push the original header row down

if (head.Controls[i].GetType() == newHeaderItem.GetType())

{

head.Controls.AddAt(i, newHeaderItem);

}

}

}

[Pavlina]

Hello Joe,

Thank you for sharing your solution found with the community. I am sure it would be helpful for the people which are searching a similar functionality.

Regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[First]

Great! Thanks Joe. Your solution is very helpful and elegant I would say.
Sometimes you just get unsual requests from the users.
My user wants the footer to be on top of the grid. I've been searching high and low, but I couldn't find a good solution to it.
And this is just great. 
http://www.telerik.com/community/forums/aspnet-ajax/grid/footer-position.aspx

You have scored a gold point!

Sxin

[OPL]

Hi,
I tried to use Joe sample (thks. Joe).

It works great but i encountered some troubles when using filtering with hierarchical or radajax call.

My original header is copy in the fitering row.

Thanks.

OPL

[Pavlina]

Hello Jérôme,

As the provided information is not enough for us to replicate the issue locally, I will ask you to open a regular support ticket and send us small runnable application which demonstrates the problem. We will test it locally and advise you further.

Thank you!

Best wishes,
Pavlina
the Telerik team

[Megan Vee]

How do you make the different header rows have different formatting? 
Can someone provide an example?
Mine are both defaulting to the skin and I can't seem to change it. 
Please help.
Thank you.
-M

[Pavlina]

Hi Bruce Lam,

To achieve the desired functionality you could try overriding the css classes of the RadGrid headers. Refer to the following online article for more information about the RadGrid skin css classes:
http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

All the best,
Pavlina
the Telerik team

[Karrie]

Telerik's Q1 2013 release of ColumnGroups and ColumnGroupName for RadGrid
may help some people in this thread.  Here's the demo :  

Grid - Multi-Column Headers

[RJ]

How about dynamic Multi-Column Headers in codebehind

[Pavlina]

Hi,

If you want dynamic multi-column headers you need to create the entire grid in the Page_Load or Page_Init event as shown in the help article below. Note that it is not supported to create columns in the aspx definition and multi column headers in the code behind for the same grid.
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/defining-structure/creating-a-radgrid-programmatically

Regards,
Pavlina
Telerik

[RJ]

Hi Pavlina,

Can you please post snippet sample of just two column using code behind. 1st column normal header (e.g Record Number). 2nd column multi column header (e.g. Client Name. which has 2 column First Name and Last Name). 

Thanks in advance,

RJ

[Pavlina]

Hello,

You can try using the code snippet below in order to add multi-column headers dynamically:

protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

 

            {

 

                RadGrid1.AllowFilteringByColumn = false;


 

                RadGrid1.AllowSorting = true;

 

                RadGrid1.AutoGenerateColumns = false;

 

                RadGrid1.AllowPaging = true;

 

                RadGrid1.PreRender += RadGrid1_PreRender;

 

                RadGrid1.NeedDataSource += RadGrid1_NeedDataSource;

 

                RadGrid1.ClientSettings.Scrolling.AllowScroll = false;

 

                RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;

 

                RadGrid1.PagerStyle.Position = GridPagerPosition.TopAndBottom;

 

                RadGrid1.PagerStyle.Mode = GridPagerMode.NumericPages;

 

                foreach (Group group in Groups)

 

                {

 

                    GridColumnGroup gridGroup = new GridColumnGroup();

 

   

 

                    RadGrid1.MasterTableView.ColumnGroups.Add(gridGroup);

 

   

 

                    gridGroup.Name = group.Name;

 

                    gridGroup.HeaderText = group.Name;

 

                    foreach (GroupItem item in group.Items)

 

                    {

 

                        GroupItem dataItem = item;

 

                        GridColumn col =

 

                            RadGrid1.MasterTableView.AutoGeneratedColumns.First(c => c.UniqueName == dataItem.DataName);

 

                        col.ColumnGroupName = group.Name;

 

                        col.HeaderText = item.ColumnHeading;

 

                    }

 

                }

 

            }

 

        }

You should also add grid columns manually on Page_Load.

Regards,
Pavlina
Telerik

[RJ]

Hi Pavlina,

Thanks for the snippets but I wasn't able to make it work. How were you able to populate Groups? Currently my groups is based on checked items on dropdown, which I made it as an object. Each checked items has 2 items of status and notes. When view grid button is clicked, checked items will be saved in the database and return datasource with columns Task1, Task1Status, Task1Notes, Task3, Task3Status, Task3Notes. Assuming that Task1 and Task3 are the items that's been checked on the combo checkbox.

I'm having issue with this lines: BTW I'm using vb code.

RadGrid1.PreRender += RadGrid1_PreRender
RadGrid1.NeedDataSource += RadGrid1_NeedDataSource

RadGrid1.MasterTableView.AutoGeneratedColumns.First(c => c.UniqueName == dataItem.DataName);

AutoGeneratedColumns.First is not recognize so replaced it AutoGeneratedColumns.Find but I cannot find documentation on how to use it.

I just need to get the column so that I could set its group, or maybe a working sample perhaps in vb.

 

Thanks again,

RJ

 

 

 

 

[RJ]

Any updates?

;(