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

How to add a row in Header of RadGrid

19 Answers 423 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bruce Lam
Top achievements
Rank 1
Bruce Lam asked on 17 Nov 2009, 08:05 AM
Please help me how to add a row in Header and merge some cells in row of Header

19 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 17 Nov 2009, 10:02 AM
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.
0
Michael Fuller
Top achievements
Rank 1
answered on 11 Feb 2010, 08:05 PM
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?
0
Pavlina
Telerik team
answered on 12 Feb 2010, 07:33 AM
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.
0
Joe
Top achievements
Rank 1
answered on 18 Feb 2010, 10:09 PM
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 = 3HorizontalAlignHorizontalAlign = HorizontalAlign.Center });  
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Reg Code"ColumnSpan = 2HorizontalAlignHorizontalAlign = HorizontalAlign.Center });  
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Actual"ColumnSpan = 7HorizontalAlignHorizontalAlign = HorizontalAlign.Center });  
 
 
        head.Controls.Add(_currentHeaderCommand);  
        head.Controls.Add(newHeaderItem);  
        head.Controls.Add(currentHeaderItem);  
    } 
0
Pavlina
Telerik team
answered on 24 Feb 2010, 10:27 AM
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.
0
Joe
Top achievements
Rank 1
answered on 24 Feb 2010, 12:45 PM
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 = 3HorizontalAlign = HorizontalAlign.Center });  
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Reg Code"ColumnSpan = 2HorizontalAlign = HorizontalAlign.Center });  
        newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "Actual"ColumnSpan = 7HorizontalAlign = 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);  
            }  
 
        }  
    } 
0
Pavlina
Telerik team
answered on 01 Mar 2010, 01:33 PM
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.
0
First
Top achievements
Rank 1
answered on 03 May 2010, 05:11 AM
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
0
OPL
Top achievements
Rank 1
answered on 06 Jan 2011, 12:06 PM
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
0
Pavlina
Telerik team
answered on 07 Jan 2011, 04:36 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Megan Vee
Top achievements
Rank 1
answered on 11 Jan 2011, 05:48 PM
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
0
Pavlina
Telerik team
answered on 14 Jan 2011, 04:15 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Karrie
Top achievements
Rank 1
answered on 04 Apr 2013, 10:36 PM
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

0
RJ
Top achievements
Rank 1
answered on 17 Feb 2016, 11:09 AM
How about dynamic Multi-Column Headers in codebehind
0
Pavlina
Telerik team
answered on 22 Feb 2016, 10:57 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
RJ
Top achievements
Rank 1
answered on 24 Feb 2016, 10:11 AM

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

0
Pavlina
Telerik team
answered on 29 Feb 2016, 10:16 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
RJ
Top achievements
Rank 1
answered on 28 Jul 2016, 08:03 AM

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

 

 

 

 

0
RJ
Top achievements
Rank 1
answered on 30 Nov 2016, 07:24 AM

Any updates?

;(

Tags
Grid
Asked by
Bruce Lam
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Michael Fuller
Top achievements
Rank 1
Pavlina
Telerik team
Joe
Top achievements
Rank 1
First
Top achievements
Rank 1
OPL
Top achievements
Rank 1
Megan Vee
Top achievements
Rank 1
Karrie
Top achievements
Rank 1
RJ
Top achievements
Rank 1
Share this question
or