Adding Multiple Header Rows at Runtime in RadGrid

[Nidhi]

Hi All,

Please help me to do so...
I want to add multiple header rows at runtime in a Rad Grid. These header rows contain controls also...

[Sebastian]

Hello Nidhi,

Basically, you can start from the approach presented in this documentation topic:
http://www.telerik.com/help/aspnet-ajax/grdcustomizewithgridtemplatecolumn.html

but instead of using html tables you can insert in the GridHeaderItem cell of the template column asp Table with controls residing inside cells of this table.

For this purpose you need to intercept the ItemCreated event of the grid when e.Item is GridHeaderItem, locate the header cell of the template column using the unique name of the column, then generate asp Table and the controls inside it and add it to the Controls collection of the header cell.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ildar]

Can you provide an example of that?
Especially using GridHeaderItem?
I need multiple header rows with different ColumnSpan and RowSpan set.
It is on the top horizontal.
And the same thing I need vertically on the left vertical side of the grid 
with different ColumnSpan and RowSpan set.
Can you provide example of that too?

[Sebastian]

Hello Ildar,

You can modify the implementation presented in this help article:

http://www.telerik.com/help/aspnet-ajax/grdtotalsingridfooters.html (paragraph 'Multi-line footer totals')

and inject asp Table in the grid header item (inside a conditional block which checks whether e.Item is GridHeaderItem)

For data cells you can implement row/column span either with template columns as discussed previously or changing the span dynamically as shown in this code library thread.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jason Maronge]

Here is how I did it.  You have to use the PreRender event to get it to work.  Hope this helps.

Jason

protected void rg_PreRender(object sender, EventArgs e)
{
    //get the current header
    GridItem[] header = rg.MasterTableView.GetItems(GridItemType.Header);
    //get the current THead element
    GridTHead head = ((GridTHead)header[0].Parent.Controls[0].Parent);
    //Get the GridHeaderItem from the THead
    GridHeaderItem currentHeaderItem = (GridHeaderItem)head.Controls[0];
    //Clear all GridHeaderItems
    head.Controls.Clear();
    //create a new GridHeaderItem which will be the new row
    GridHeaderItem newHeaderItem = new GridHeaderItem(rg.MasterTableView, 0, 0);

    /*  My specific implementation for adding new row

    newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });
    newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " " });
    newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = " ", Width = new Unit(230, UnitType.Pixel) });

    for (int i = 0; i < statuses.Count; i++)
    {
        Entities.AssessmentStatus status = statuses[i];
        GridTableHeaderCell cell = new GridTableHeaderCell()
                                       {
                                           Text = status.Name,
                                           ColumnSpan = 2,
                                           HorizontalAlign = HorizontalAlign.Center
                                       };

        if (i != statuses.Count - 1)
            cell.Width = new Unit(145, UnitType.Pixel);

        newHeaderItem.Cells.Add(cell);
    }

    */
    //Add back the GridHeaderItems in the order you want them to appear
    head.Controls.Add(newHeaderItem);
    head.Controls.Add(currentHeaderItem);
}

[Jason Maronge]

For grids that have a command item you need to modify the code

            GridHeaderItem currentHeaderItem = (GridHeaderItem) head.Controls[1];

            head.Controls.RemoveAt(1);

Jason

[neebs]

Hi,

I am using Jason's method to add an additional row to the header and it is working. However I need to be able to style the expand/collapse cell in the header and I haven't figured this out. Any ideas?

[Sebastian]

Hi neebs,

Have you tried styling directly the cell which hosts the expand/collapse image? Try applying inline styles for that cell to see whether this helps.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[neebs]

Hi,

I'm not sure what you mean by applying inline styles. I am trying to attain a grid header comprised of two rows. I used Jason's approach, and the code that performs the updates is here:

    private IWHeaderItem[] GetHeaders(int row)
    {
        ArrayList c = new ArrayList();
        IWHeaderItem hdr;

        switch (row)
        {
            case 0:
                hdr = new IWHeaderItem("Dummy1", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("Dummy2", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("Dummy3", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("FundCode", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("AsOfDate", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("SubTotalLevel", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("StrategySortPlusAlias", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("StrategyAlias", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("ManagerFundCode", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("ManagerName", 0, 1, " ", true, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("PriorMonthEndCapital", 0, 1, "Prior Month", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("ContributionsWithdrawals", 0, 1, "Contr. /", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("BeginCapital", 0, 1, " ", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("Income", 0, 1, " ", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("EndCapital", 0, 1, " ", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("YTDIncome", 0, 1, " ", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("Allocation", 0, 1, "Month End", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("RateOfReturn", 0, 3, "Rate of Return", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("RateOfReturn", 0, 3, "Attribution", true, HorizontalAlign.Center);
                c.Add(hdr);

                break;
            case 1:
                hdr = new IWHeaderItem("Dummy1", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("Dummy2", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("Dummy3", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("FundCode", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("AsOfDate", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("SubTotalLevel", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("StrategySortPlusAlias", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("StrategyAlias", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("ManagerFundCode", 0, 1, " ", false, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("ManagerName", 0, 1, "Manager", true, HorizontalAlign.Left);
                c.Add(hdr);
                hdr = new IWHeaderItem("PriorMonthEndCapital", 0, 1, "End Capital", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("ContributionsWithdrawals", 0, 1, "With.", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("BeginCapital", 0, 1, "Begin Capital", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("Income", 0, 1, "Income", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("EndCapital", 0, 1, "End Capital", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("YTDIncome", 0, 1, "YTD Income", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("Allocation", 0, 1, "Allocation", true, HorizontalAlign.Right);
                c.Add(hdr);
                hdr = new IWHeaderItem("MTDRateOfReturn", 0, 1, "MTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("QTDRateOfReturn", 0, 1, "QTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("YTDRateOfReturn", 0, 1, "YTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("MTDAttribution", 0, 1, "MTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("QTDAttribution", 0, 1, "QTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                hdr = new IWHeaderItem("YTDAttribution", 0, 1, "YTD", true, HorizontalAlign.Center);
                c.Add(hdr);
                break;
        }

        return (IWHeaderItem[])c.ToArray(typeof(IWHeaderItem));
    }

    // Note: This approach is offered in this Telerik Posting:
    // http://www.telerik.com/community/forums/aspnet-ajax/grid/adding-multiple-header-rows-at-runtime-in-radgrid.aspx
    //
    protected void RadGridRealMcCoy_PreRender(object sender, EventArgs e)
    {
        IWHeaderItem[] row1hdrs = GetHeaders(0);
        IWHeaderItem[] row2hdrs = GetHeaders(1);

        GridItem[] gheader = RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.ColGroup);

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

        int hdr1indx = 0;       // logical column index
        int hdr2indx = 0;
        int hdr1colindx = 0;    // Physical column index
        int hdr2colindx = 0;
        int hdr1nextcol = 0;    // Next logical column
        int hdr2nextcol = 0;

        int hdr1totalcols = 0;
        int hdr2totalcols = 0;
        int hdr1colcount = 0;
        int hdr2colcount = 0;

        foreach (IWHeaderItem hdr in row1hdrs)
        {
            hdr1totalcols += hdr.ColumnSpan;
        }

        foreach (IWHeaderItem hdr in row2hdrs)
        {
            hdr2totalcols += hdr.ColumnSpan;
        }

        do
        {
            GridTableHeaderCell cell;
            if ((hdr1colcount >= hdr1totalcols) && (hdr2colcount >= hdr2totalcols))
            {
                break;
            }

            if (hdr1indx >= hdr1nextcol)
            {
                cell = new GridTableHeaderCell
                           {
                               Text = row1hdrs[hdr1colindx].Text,
                               ColumnSpan = row1hdrs[hdr1colindx].ColumnSpan,
                               HorizontalAlign = row1hdrs[hdr1colindx].HorizontalAlign
                           };
                cell.CssClass = "HeaderTop";
                hdr1Item.Cells.Add(cell);
                hdr1nextcol = hdr1indx + row1hdrs[hdr1colindx].ColumnSpan;
                hdr1colindx += 1;
            }
            hdr1colcount += 1;
            hdr1indx += 1;

            if (hdr2indx >= hdr2nextcol)
            {
                cell = new GridTableHeaderCell
                           {
                               Text = row2hdrs[hdr2colindx].Text,
                               ColumnSpan = row2hdrs[hdr2colindx].ColumnSpan,
                               HorizontalAlign = row2hdrs[hdr2colindx].HorizontalAlign
                           };
                cell.CssClass = "HeaderBottom";
                hdr2Item.Cells.Add(cell);
                hdr2nextcol = hdr2indx + row2hdrs[hdr2colindx].ColumnSpan;
                hdr2colindx += 1;
            }
            hdr2colcount += 1;
            hdr2indx += 1;

        } while (true);

        //Add back the GridHeaderItems in the order you want them to appear
        head.Controls.Add(hdr1Item);
        head.Controls.Add(hdr2Item);

        if (HiddenFieldCollapseOverride.Value == "No")
        {
            foreach (GridItem gridItem in RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.GroupHeader))
            {
                gridItem.Expanded = false;
            }
            HiddenFieldCollapseOverride.Value = "Yes";
        }
    }

The stylesheet entries that are pertinent are here:

div.Ironwood.RadGrid_Default .rgMasterTable .HeaderTop
{
    font-family:Arial;
    font-size:10px;
    font-weight:normal;
    background-image:url(Images/hdrbackground.gif);
    background-repeat:repeat-x;
    background-position:top;
    vertical-align:bottombottom;
    padding-left:7px;
    padding-right:7px;
}
div.Ironwood.RadGrid_Default .rgMasterTable .HeaderBottom
{
    font-family:Arial;
    font-size:10px;
    font-weight:normal;
    background-image:url(Images/hdrbackground.gif);
    background-repeat:repeat-x;
    background-position:bottombottom;
    vertical-align:top;
    padding-left:7px;
    padding-right:7px;
}

and the image of the resulting grid header is attached. Note: I am using the Default skin.

You can see that the Group Column header still has the Default skin style applied to each row of the header, resulting in the dual gradients. The rest of the header I have overridden with the styles above, so that the top half of a gradient image shows in the top row, and the bottom half of the same gradient image shows in the bottom row, making the two rows appear as one. The purpose of all this is to allow the treatment of the last 6 columns where you have a category centered above each of the three columns, and MTD, QTD and YTD over each individual column.

All that remains is to override the group expand column headers to match and it will look great.

Thanks, Steve

[Sebastian]

Hello neebs,

Thank you for the additional explanation - now I think I see your point more clearly.

To address the unwanted visual effect with the group expand/collapse column, consider overriding the rgGroupCol style defined from the embedded skin (see the enclosed screenshot with IE developer toolbar element inspection for details). In case you implemented hierarchy, the relevant style would be rgExpandCol.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[neebs]

Sebastian,

I think you are looking at the wrong cell. Your screenshot shows the expand/collapse cell for a group header selected. I am not interested in changing the style of that cell. If you look at the screenshot I uploaded earlier, the cell I want to override is the table heading cell (actually there are two table heading cells since I am replacing the original header row with two.) You will notice the gradient in the header cell of the group expand/collapse column appears twice. I have successfully replaced that style in the data column headers with my own gradient to eliminate the dual gradients. I would like to do that to the leftmost header column as well.

Thanks, Steve

[Veli]

Hello neebs,

In this case, the CSS you need to use is:

div.RadGrid table.rgMasterTable th.rgHeader.rgGroupCol

If you need to access the cell programmatically, the cell has an index of 2 in the GridGroupHeaderItem of the MasterTableView. This is because the first 2 columns are the ExpandCollapseColumn and RowIndicatorColumn that are always initialized, even though not always shown.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[neebs]

Here's a new twist to this. My above example creates a grouped RadGrid, with multiple header rows so that  you can span columns for legibility. SO the top row might span 3 columns with the heading 'Attribution', and the bottom row might have 'MTD', 'QTD', and 'YTD' in the three columns. I used Jason's solution and it's working fine. Now I have a request to allow the grouping to be removed, so that they just get a simple grid with no groups. This is working too. However I would like to enable sorting by column headings in the non-grouped view. Since I am replacing the header items with dynamically created GridHeaderItem's, how do I specify the GridTableHeaderCell items such that they fire the sorting function. Here is a snippet of where the GridTableHeaderCell items are created:

                    cell = new GridTableHeaderCell
                               {
                                   Text = row2hdrs[hdr2colindx].Text,
                                   ColumnSpan = row2hdrs[hdr2colindx].ColumnSpan,
                                   HorizontalAlign = row2hdrs[hdr2colindx].HorizontalAlign
                               };
                    cell.CssClass = row2hdrs[hdr2colindx].ClassOverride;

                    hdr2Item.Cells.Add(cell);

Thanks, Steve

[Veli]

Hello neebs,

As you have now modified your default grid header item and the header cells that used to render a sort link button now do not, you have to manually add a button somewhere in your header cell. The button can be a regular push Button, LinkButton or ImageButton and it should have CommandName="Sort" and CommandArgument="[DataField]" where [DataField] is the field you want to sort by.

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Suresh K]

Hello neebs,
what is the "IWHeaderItem".when i convert it to VB Code it showing error like this.

Type "IWHeaderItem" is not Defined

change "IWHeaderItem" to "GridHeaderItem"

or

change "IWHeaderItem" to "RepeaterItem"

or

change "IWHeaderItem" to "GridGroupHeaderItem"

how can i define this.
please help me.

can you please provide this code in VB.

Thank You.
Suresh K.

[neebs]

Hi Suresh,

Since this posting I have modified the code slightly to allow its use in the GridFooter as well as the Grid Header. So instead of IWHeaderItem, I call it IWGridItem. Here is the definition of the class. Sorry I don't have it in VB.Net, the translation is pretty simple though:

using System.Web.UI.WebControls;

namespace App_Code
{
    /// <summary>
    /// Summary description for IWHeaderItem
    /// </summary>
    public class IWGridItem : object
    {
        public IWGridItem(string name, int column, int columnspan, string text,
            bool visible, HorizontalAlign horizontalalign, string classoverride, bool? sortable,
            string sortexpression)
        {
            Name = name;
            Column = column;
            ColumnSpan = columnspan;
            Text = text;
            Visible = visible;
            HorizontalAlign = horizontalalign;
            ClassOverride = classoverride;
            Sortable = sortable;
            SortExpression = sortexpression;
        }

        public string Name { get; set; }
        public int Column { get; set; }
        public int ColumnSpan { get; set; }
        public string Text { get; set; }
        public bool Visible { get; set; }
        public HorizontalAlign HorizontalAlign { get; set; }
        public string ClassOverride { get; set; }
        public bool? Sortable { get; set; }
        public string SortExpression { get; set; }
    }
}

And to refresh the code that calls this, along with the sorting capability:

    private void InitRealMcCoyGridHeader(object sender, EventArgs e)
    {
        IWGridItem[] row1hdrs = GetRealMcCoyHeaders(0);
        IWGridItem[] row2hdrs = GetRealMcCoyHeaders(1);

        //get the current header
        GridItem[] header = RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.Header);
        //get the current THead element

        if (header.Length != 0)
        {
            GridTHead head = ((GridTHead) header[0].Parent.Controls[0].Parent);
            //Clear all GridHeaderItems
            head.Controls.Clear();
            //create a new GridHeaderItem which will be the new row
            GridHeaderItem hdr1Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);
            GridHeaderItem hdr2Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);

            int hdr1indx = 0; // logical column index
            int hdr2indx = 0;
            int hdr1colindx = 0; // Physical column index
            int hdr2colindx = 0;
            int hdr1nextcol = 0; // Next logical column
            int hdr2nextcol = 0;

            int hdr1totalcols = 0;
            int hdr2totalcols = 0;
            int hdr1colcount = 0;
            int hdr2colcount = 0;

            foreach (IWGridItem hdr in row1hdrs)
            {
                hdr1totalcols += hdr.ColumnSpan;
            }

            foreach (IWGridItem hdr in row2hdrs)
            {
                hdr2totalcols += hdr.ColumnSpan;
            }

            do
            {
                GridTableHeaderCell cell;
                if ((hdr1colcount >= hdr1totalcols) && (hdr2colcount >= hdr2totalcols))
                {
                    break;
                }

                if (hdr1indx >= hdr1nextcol)
                {
                    cell = new GridTableHeaderCell
                                   {
                                       Text = row1hdrs[hdr1colindx].Text,
                                       ColumnSpan = row1hdrs[hdr1colindx].ColumnSpan,
                                       HorizontalAlign = row1hdrs[hdr1colindx].HorizontalAlign,
                                       CssClass = row1hdrs[hdr1colindx].ClassOverride
                                   };

                    if (row1hdrs[hdr1colindx].Name == "ExpandAll")
                    {
                        Button toggle = new Button
                                            {
                                                ID = "ButtonExpandCollapse",
                                                CssClass = "rgExpand",
                                                CommandName = "ExpandAll",
                                                UseSubmitBehavior = false
                                            };
                        toggle.Click += toggle_Click;
                        toggle.EnableViewState = true;
                        cell.Controls.Add(toggle);

                        AjaxSetting ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(toggle.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(RadGridRealMcCoy.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(HiddenFieldExpandAllCommand.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(RadGridRealMcCoy.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(HiddenFieldExpandAllCommand.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);
                    }

                    //cell.CssClass = row1hdrs[hdr1colindx].ClassOverride;
                    hdr1Item.Cells.Add(cell);
                    hdr1nextcol = hdr1indx + row1hdrs[hdr1colindx].ColumnSpan;
                    hdr1colindx += 1;
                }
                hdr1colcount += 1;
                hdr1indx += 1;

                if (hdr2indx >= hdr2nextcol)
                {

                    cell = new GridTableHeaderCell
                               {
                                   Text = row2hdrs[hdr2colindx].Text,
                                   ColumnSpan = row2hdrs[hdr2colindx].ColumnSpan,
                                   HorizontalAlign = row2hdrs[hdr2colindx].HorizontalAlign,
                                   CssClass = row2hdrs[hdr2colindx].ClassOverride
                               };

                    if ((mViewMode == ViewMode.None) && (row2hdrs[hdr2colindx].Sortable == true))
                    {
                        // sortable, setup sort header
                        LinkButton lbtn = new LinkButton
                                             {
                                                 Text = row2hdrs[hdr2colindx].Text,
                                                 CommandName = "Sort",
                                                 CommandArgument = row2hdrs[hdr2colindx].SortExpression
                                             };
                        cell.Controls.Clear();
                        cell.Controls.Add(lbtn);
                    }

                    hdr2Item.Cells.Add(cell);
                    hdr2nextcol = hdr2indx + row2hdrs[hdr2colindx].ColumnSpan;
                    hdr2colindx += 1;
                }
                hdr2colcount += 1;
                hdr2indx += 1;

            } while (true);

            //Add back the GridHeaderItems in the order you want them to appear
            head.Controls.Add(hdr1Item);
            head.Controls.Add(hdr2Item);

            if (HiddenFieldCollapseOverride.Value == "No")
            {
                foreach (GridItem gridItem in RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.GroupHeader))
                {
                    gridItem.Expanded = false;
                }
                HiddenFieldCollapseOverride.Value = "Yes";
            }

        }
    }

Note: mViewMode is a variable that indicates how the grid is arranged. ViewMode.None is an un-grouped display, while anything else is grouped.

Steve

[Suresh K]

Hello neebs,

Thank you for the additional explanation.

Thank You
Suresh K.

[Jens Olesen]

Hi all,

I am using Jason's approach to add a single HeaderRow - and it works fine ! (Thanks Jason !).

Now my customer want's me to add the standard filter functionality - and it simply doesn't work !
When pressing the filter button on some columns - the expected menu pops up and it works fine. On other columns a java error pops up: Microsoft JScript runtime error: '_data' is null or not an object.

It seems that it is the getColumnByUniqueName() in function _showFilterMenu()  that fails to find the column in which the filter icon is placed.
It seems to be the leftmost 3-4 columns that works ok - and the rest doesn't work.

Any ideas ?

Thanks in advance
 
==== 3 hours later: =========================================================================
I solved the problem:

The new Header reocord I created was meant to group a number of columns in the grid (colour and a single headertext in each group)
  
The new (extra) header record has to have exactly the same number of cells as the already existing header-record.
During debug, check new_header_record.cells.count = existing_header_record.cells.count. If not equal you have a problem.

In order to do the grouping, I marked most of the cells as not visible, and set the columnspan of 1 cell in every group to the number of cells it should span. This worked fine until I introduced filtering.
Instead of setting the columns not visible, they should have an attribute "display" = "none".
Now everything works fine.
I think the Client side code checks the number of columns present in the extra header record. If columns in this record are 'not visible', the columns are not rendered - and the code will only find the first x colmns (where x = number of 'visible=true' columns).

However I have a new problem:
Column sort does not work at all !

Any ideas ?

[Jens Olesen]

Finally I made this work:

For some reason Jason's method (remove header and insert it again together with the extra header) cause sorting to fail totally.

I found that it is not possible to remove the header and add it again (even if this is the only thing you do), without messing up the column sort.

So in order not to break anything, you should leave the existing header where it was born, and simply add the new/extra header in the wanted position (typical this would be something like this: head.Controls.AddAt(1, newHeaderItem) ).

If someone could tell me why you can't remove the header and insert it again without having a problem with columm sorting I would be very pleased ;-)

See the attached image to se my new grid.

I really think Telerik should improve the grid functionality so that extra headerrecords are supported.

Thanks

[neebs]

Hi Jens,

I was able to accomplish what you require by using the attached code. Sorry I can't upload an entire project, this grid application has grown to epic proportions. The only thing is, I do not require nor support filtering. Here is how I did it. First, I defined a class that stores Header items as I need to define them:

using System.Web.UI.WebControls;

namespace App_Code
{
    /// <summary>
    /// Summary description for IWHeaderItem
    /// </summary>
    public class IWGridItem : object
    {
        public IWGridItem(string name, int column, int columnspan, string text,
            bool visible, HorizontalAlign horizontalalign, string classoverride, bool? sortable,
            string sortexpression)
        {
            Name = name;
            Column = column;
            ColumnSpan = columnspan;
            Text = text;
            Visible = visible;
            HorizontalAlign = horizontalalign;
            ClassOverride = classoverride;
            Sortable = sortable;
            SortExpression = sortexpression;
        }

        public string Name { get; set; }
        public int Column { get; set; }
        public int ColumnSpan { get; set; }
        public string Text { get; set; }
        public bool Visible { get; set; }
        public HorizontalAlign HorizontalAlign { get; set; }
        public string ClassOverride { get; set; }
        public bool? Sortable { get; set; }
        public string SortExpression { get; set; }
    }
}

Then, in my web page, I added a method that loads an array of these objects. Note that there are two possible arrays returned, based on the parameters to the method call. One is for the top row, the other for the bottom:

    private IWGridItem[] GetRealMcCoyHeaders(int row)
    {
        ArrayList c = new ArrayList();
        IWGridItem hdr;
        mViewMode = (IronwoodDefs.RealMcCoyViewMode)Convert.ToInt32(RadComboBoxView.SelectedValue);
        //bool sortable = (mViewMode == IronwoodDefs.RealMcCoyViewMode.None);
        const bool sortable = true;


        switch (row)
        {
            case 0:
                if (((IronwoodDefs.RealMcCoyViewMode)Convert.ToInt32(RadComboBoxView.SelectedValue)) != IronwoodDefs.RealMcCoyViewMode.None)
                {
                    hdr = new IWGridItem("ExpandAll", 0, 1, " ", true, HorizontalAlign.Center, hdrgroupcol, null,
                                           null);
                    c.Add(hdr);
                }
                hdr = new IWGridItem("Dummy2", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Dummy3", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("FundCode", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("AsOfDate", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("SubTotalLevel", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategySortPlusAlias", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategyAlias", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("TargetRangeHigh", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("AllocationRangePlusTargetRange", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerFundCode", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategyOrder", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Final", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerTargetRangeHigh", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerName", 0, 1, " ", true, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerTargetRange", 0, 1, "Target", true, HorizontalAlign.Center, hdrtop, null, null);
                if (mViewMode != IronwoodDefs.RealMcCoyViewMode.ByAllocationRange)
                {
                    hdr.Visible = false;
                }
                c.Add(hdr);
                hdr = new IWGridItem("Divider1", 0, 1, " ", true, HorizontalAlign.Left, hdrtoplefthighlight, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("PriorMonthEndCapital", 0, 1, "Prior Month", true, HorizontalAlign.Right,
                                       hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ContributionsWithdrawals", 0, 1, "Contr. /", true, HorizontalAlign.Right,
                                       hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("BeginCapital", 0, 1, " ", true, HorizontalAlign.Right, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Income", 0, 1, " ", true, HorizontalAlign.Right, hdrtop, null, null);
                c.Add(hdr);
//                hdr = new IWGridItem("IncomeImg", 0, 1, " ", true, HorizontalAlign.Center, hdrtop, null, null);
//                c.Add(hdr);
                hdr = new IWGridItem("EndCapital", 0, 1, " ", true, HorizontalAlign.Right, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("YTDIncome", 0, 1, " ", true, HorizontalAlign.Right, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Divider2", 0, 1, " ", true, HorizontalAlign.Left, hdrtoplefthighlight, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Allocation", 0, 1, "Month End", true, HorizontalAlign.Right, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("RateOfReturn", 0, 3, "Rate of Return", true, HorizontalAlign.Center, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("RateOfReturn", 0, 3, "Attribution", true, HorizontalAlign.Center, hdrtop, null, null);
                c.Add(hdr);

                break;
            case 1:
                if (((IronwoodDefs.RealMcCoyViewMode)Convert.ToInt32(RadComboBoxView.SelectedValue)) != IronwoodDefs.RealMcCoyViewMode.None)
                {
                    hdr = new IWGridItem("ExpandAll", 0, 1, " ", true, HorizontalAlign.Center, hdrgroupcol, null,
                                           null);
                    c.Add(hdr);
                }
                hdr = new IWGridItem("Dummy2", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Dummy3", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("FundCode", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("AsOfDate", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("SubTotalLevel", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategySortPlusAlias", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategyAlias", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("TargetRangeHigh", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("AllocationRangePlusTargetRange", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerFundCode", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("StrategyOrder", 0, 1, " ", false, HorizontalAlign.Left, hdrbottom, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Final", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerTargetRangeHigh", 0, 1, " ", false, HorizontalAlign.Left, hdrtop, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("ManagerName", 0, 1, "Manager", true, HorizontalAlign.Left, hdrbottom, sortable,
                                       "ManagerName");
                c.Add(hdr);
                hdr = new IWGridItem("ManagerTargetRange", 0, 1, "Range", true, HorizontalAlign.Center, hdrbottom, sortable, "ManagerTargetRange");
                if (mViewMode != IronwoodDefs.RealMcCoyViewMode.ByAllocationRange)
                {
                    hdr.Visible = false;
                }
                c.Add(hdr);
                hdr = new IWGridItem("Divider1", 0, 1, " ", true, HorizontalAlign.Left, hdrbottomlefthighlight, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("PriorMonthEndCapital", 0, 1, "End Capital", true, HorizontalAlign.Right,
                                       hdrbottom, sortable, "PriorMonthEndCapital");
                c.Add(hdr);
                hdr = new IWGridItem("ContributionsWithdrawals", 0, 1, "With.", true, HorizontalAlign.Right, hdrbottom,
                                       sortable, "ContributionsWithdrawals");
                c.Add(hdr);
                hdr = new IWGridItem("BeginCapital", 0, 1, "Begin Capital", true, HorizontalAlign.Right,
                                       hdrbottom, sortable, "BeginCapital");
                c.Add(hdr);
                hdr = new IWGridItem("Income", 0, 1, "Income", true, HorizontalAlign.Right, hdrbottom, sortable, "Income");
                c.Add(hdr);
//                hdr = new IWGridItem("IncomeImg", 0, 1, " ", true, HorizontalAlign.Center, hdrbottom, null, null);
//                c.Add(hdr);
                hdr = new IWGridItem("EndCapital", 0, 1, "End Capital", true, HorizontalAlign.Right, hdrbottom,
                                       sortable, "EndCapital");
                c.Add(hdr);
                hdr = new IWGridItem("YTDIncome", 0, 1, "YTD Income", true, HorizontalAlign.Right, hdrbottom,
                                       sortable, "YTDIncome");
                c.Add(hdr);
                hdr = new IWGridItem("Divider2", 0, 1, " ", true, HorizontalAlign.Left, hdrbottomlefthighlight, null, null);
                c.Add(hdr);
                hdr = new IWGridItem("Allocation", 0, 1, "Allocation", true, HorizontalAlign.Right,
                                       hdrbottom, sortable, "Allocation");
                c.Add(hdr);

                GetParameters();
                string month;
                try
                {
                    month = ((DateTime) mAsOfDate).ToString("MMM");
                }
                catch (Exception)
                {
                    month = "MMM";
                }
                hdr = new IWGridItem("MTDRateOfReturn", 0, 1, month, true, HorizontalAlign.Center, hdrbottombold, sortable,
                                       "MTDRateOfReturn");
                c.Add(hdr);
                hdr = new IWGridItem("QTDRateOfReturn", 0, 1, "QTD", true, HorizontalAlign.Center, hdrbottom, sortable,
                                       "QTDRateOfReturn");
                c.Add(hdr);
                hdr = new IWGridItem("YTDRateOfReturn", 0, 1, "YTD", true, HorizontalAlign.Center, hdrbottom, sortable,
                                       "YTDRateOfReturn");
                c.Add(hdr);
                hdr = new IWGridItem("MTDAttribution", 0, 1, "MTD", true, HorizontalAlign.Center, hdrbottom, sortable,
                                       "MTDAttribution");
                c.Add(hdr);
                hdr = new IWGridItem("QTDAttribution", 0, 1, "QTD", true, HorizontalAlign.Center, hdrbottom, sortable,
                                       "QTDAttribution");
                c.Add(hdr);
                hdr = new IWGridItem("YTDAttribution", 0, 1, "YTD", true, HorizontalAlign.Center, hdrbottom, sortable,
                                       "YTDAttribution");
                c.Add(hdr);
                break;
        }

        return (IWGridItem[])c.ToArray(typeof(IWGridItem));
    }

Then a method that initializes the headers. This replaces the existing single header with the two headers that I am creating. It also handles multi-column headers and creates a functional Expand-All button (see the attached image).

    private void InitRealMcCoyGridHeader()
    {
        IWGridItem[] row1hdrs = GetRealMcCoyHeaders(0);
        IWGridItem[] row2hdrs = GetRealMcCoyHeaders(1);

        //get the current header
        GridItem[] header = RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.Header);
        //get the current THead element

        if (header.Length != 0)
        {
            GridTHead head = ((GridTHead) header[0].Parent.Controls[0].Parent);
            //Clear all GridHeaderItems
            head.Controls.Clear();
            //create a new GridHeaderItem which will be the new row
            GridHeaderItem hdr1Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);
            GridHeaderItem hdr2Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);

            int hdr1indx = 0; // logical column index
            int hdr2indx = 0;
            int hdr1colindx = 0; // Physical column index
            int hdr2colindx = 0;
            int hdr1nextcol = 0; // Next logical column
            int hdr2nextcol = 0;

            int hdr1totalcols = 0;
            int hdr2totalcols = 0;
            int hdr1colcount = 0;
            int hdr2colcount = 0;

            foreach (IWGridItem hdr in row1hdrs)
            {
                hdr1totalcols += hdr.ColumnSpan;
            }

            foreach (IWGridItem hdr in row2hdrs)
            {
                hdr2totalcols += hdr.ColumnSpan;
            }

            do
            {
                GridTableHeaderCell cell;
                if ((hdr1colcount >= hdr1totalcols) && (hdr2colcount >= hdr2totalcols))
                {
                    break;
                }

                if (hdr1indx >= hdr1nextcol)
                {
                    cell = new GridTableHeaderCell
                                   {
                                       Text = row1hdrs[hdr1colindx].Text,
                                       ColumnSpan = row1hdrs[hdr1colindx].ColumnSpan,
                                       HorizontalAlign = row1hdrs[hdr1colindx].HorizontalAlign,
                                       CssClass = row1hdrs[hdr1colindx].ClassOverride
                                   };

                    if (row1hdrs[hdr1colindx].Name == "ExpandAll")
                    {
                        Button toggle = new Button
                                            {
                                                ID = "ButtonExpandCollapse",
                                                CssClass = "rgExpand",
                                                CommandName = "ExpandAll",
                                                UseSubmitBehavior = false
                                            };
                        toggle.Click += toggle_Click;
                        toggle.EnableViewState = true;
                        cell.Controls.Add(toggle);

                        AjaxSetting ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(toggle.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(RadGridRealMcCoy.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(toggle.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(HiddenFieldExpandAllCommand.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);

                        ajaxsetting = new AjaxSetting(RadGridRealMcCoy.ID);
                        ajaxsetting.UpdatedControls.Add(new AjaxUpdatedControl(HiddenFieldExpandAllCommand.ID,
                                                                               RadAjaxLoadingPanelRealMcCoy.ID));
                        RadAjaxManagerRealMcCoy.AjaxSettings.Add(ajaxsetting);
                    }

                    hdr1Item.Cells.Add(cell);
                    hdr1nextcol = hdr1indx + row1hdrs[hdr1colindx].ColumnSpan;
                    hdr1colindx += 1;
                }
                hdr1colcount += 1;
                hdr1indx += 1;

                if (hdr2indx >= hdr2nextcol)
                {

                    cell = new GridTableHeaderCell
                               {
                                   Text = row2hdrs[hdr2colindx].Text,
                                   ColumnSpan = row2hdrs[hdr2colindx].ColumnSpan,
                                   HorizontalAlign = row2hdrs[hdr2colindx].HorizontalAlign,
                                   CssClass = row2hdrs[hdr2colindx].ClassOverride
                               };

                    //if ((mViewMode == IronwoodDefs.RealMcCoyViewMode.None) && (row2hdrs[hdr2colindx].Sortable == true))
                    if (row2hdrs[hdr2colindx].Sortable == true)
                    {
                        // sortable, setup sort header
                        LinkButton lbtn = new LinkButton
                                             {
                                                 Text = row2hdrs[hdr2colindx].Text,
                                                 CommandName = "Sort",
                                                 CommandArgument = row2hdrs[hdr2colindx].SortExpression
                                             };
                        cell.Controls.Clear();
                        cell.Controls.Add(lbtn);
                    }

                    hdr2Item.Cells.Add(cell);
                    hdr2nextcol = hdr2indx + row2hdrs[hdr2colindx].ColumnSpan;
                    hdr2colindx += 1;
                }
                hdr2colcount += 1;
                hdr2indx += 1;

            } while (true);

            //Add back the GridHeaderItems in the order you want them to appear
            head.Controls.Add(hdr1Item);
            head.Controls.Add(hdr2Item);

            if (HiddenFieldCollapseOverride.Value == "No")
            {
                foreach (GridItem gridItem in RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.GroupHeader))
                {
                    gridItem.Expanded = false;
                }
                HiddenFieldCollapseOverride.Value = "Yes";
            }

        }
    }

This method is called in the RadGrid.ItemCreated event handler as follows. (Note: I am also adding an extra footer to the table in this method using a similar approach, and hooking an event handler to group footers so I can capture when the user clicks on a subtotal row:

    protected void RadGridRealMcCoy_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridHeaderItem)
        {
            InitRealMcCoyGridHeader();
        }
        else if (e.Item is GridFooterItem)
        {
            InitRealMcCoyGridFooter();
        }
        else if (e.Item is GridGroupFooterItem)
        {
            switch ((IronwoodDefs.RealMcCoyViewMode)Convert.ToInt32(RadComboBoxView.SelectedValue))
            {
                case IronwoodDefs.RealMcCoyViewMode.ByStrategy:
                    GridGroupFooterItem footerItem = (GridGroupFooterItem)e.Item;
                    if (footerItem.DataItem != null)
                    {
                        string[] keys =
                            ((System.Data.DataRowView) (e.Item.DataItem)).Row.ItemArray[0].ToString().Split('|');
                        if (keys.Length == 2)
                        {
                            footerItem.Attributes.Add("onclick", string.Format("DisplayHistoryByGroup('GroupHistory|{0}')", keys[1]));
                        }
                    }
                    break;
            }

        }
    }

I now have a multi-header grid that is sortable. Check out the image. Hope this helps.

Steve

[Veli]

Hi huys,

Here are a few notes on what is supported by RadGrid and what not, in terms of modifying and customizing the table header:

1. You should not remove the default generated header row (GridHeaderItem) on the server. If you do so, you might expect sorting and other header-related commands to fail. Instead, try to keep the original header and modify its cells.

2. You should not change the number of header cells, meaning that every data column in the grid table should have a corresponding <th> header cell. Failing to observe this requirement will break the client column objects, the header context menus and any other header related client functionality, like drag-to-group.

3. For maximum consistency, we recommend to always only modify the header cell content, meaning you are not advised to add and remove header cell, neither on the server, nor on the client. The recommended approach for modifying the header item is through the HeaderTemplate of the GridTemplateColumn, as Stefan noted above in the second post, or, alternatively, dynamically adding controls into your header cells. This can be done in a couple of RadGrid events: ItemCreated, ItemDataBound, or PreRender. Note that if you add postback controls dynamically, and you need to fire these control's postback events, creating them on PreRender might be too late.

To sum it up, the original header structure of the grid table should always be preserved. If you have 5 columns, you need to have a <tr> with 5 <th> elements inside. Otherwise, you may expect various client functionality to break. You should not remove the header item from the table view, otherwise, header-related commands will not be fired in RadGrid.

I hope these guidelines are useful.

Sincerely yours,
Veli
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.

[Jens Olesen]

Thanks a lot for your input Steve and Veli !

I really appreciate it.
It is alwys nice with some firm guidelines and samples !

Could you explain (a small hint would be fine) why I cannot remove the Header-record and put it back in again (What's going on behind the scene)  ?.

Thanks.

[Veli]

Hi Jens,

RadGrid (and more exactly the GridTableView instances) holds references to the GridHeaderItem that is originally created. If you remove it or replace it with another instance, the internally kept original GridHeaderItem instance will be invalid. Hence, commands firing from the header item can break. It may not always happen. It's just a non-supported scenario in RadGrid.

Greetings,
Veli
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.

[Thijs van Gestel]

Hello, I'm trying to do this as well in my Radgrid, and I tried Jason's method(without removing the current GridHeaderItem) but for some reason, the radgrid doesn't allow me to add multiple GridHeaderItems to the GridTHead element. Trying to add multiple GridHeaderItems will simply don't do anything.

I'm using the Q2 2009 version of the radgrid, has this functionality been removed in this version? If this is the case, how would I be able to add multiple headers to my radgrid instead?

[Veli]

Hi Thijs,

As I mentioned 2 posts ago, removing controls from the grid header is not supported. Jason's approach does exactly that and you may run into trouble with any header-related functionality in RadGrid.

Regards,
Veli
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.

[Thijs van Gestel]

Hello veli,

I might not have been completely clear on this, but I use just part of jason's code and -only- try to add a second header item, without ever removing the existing header element of the GridThead element. The code, in this case, is like this:

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

        //to test, fill it with currentheader
        newHeaderItem = currentHeaderItem;

        //Add the GridHeaderItem
        head.Controls.Add(newHeaderItem);

The problem that I get is in the last step, head.Controls.Add(newHeaderItem); It just goes through this step without any problems, but when I check the head.Controls collection, it still only contains 1 headeritem(the current header item, which was already there) and the newHeaderItem is nowhere to be found. The odd thing is that it doesn't give an error either, the application just goes on like the add was succesful.

In any case Veli, if this isn't the right approach for adding more than 1 header to a tableview, is there another method you'd recommend to use?

[Veli]

Hi Thijs,

Let me make a few comments on this piece of code:

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

//header[0] is the GridHeaderItem instance
//also header[0].Parent == header[0].Parent.Controls[0].Parent
GridTHead head = ((GridTHead)header[0].Parent.Controls[0].Parent);

//header[0] is already the GridHeaderItem instance, so this is excessive
GridHeaderItem currentHeaderItem = (GridHeaderItem)head.Controls[1];
//create a new GridHeaderItem which will be the new row

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

//to test, fill it with currentheader
//BUT!!! you are assigning a reference of the original
//GridHeaderItem instance to the new object
newHeaderItem = currentHeaderItem;

//Add the GridHeaderItem
head.Controls.Add(newHeaderItem);

In other words, if we shorten the above piece:

//get the current header
GridItem header = RadGrid1.MasterTableView.GetItems(GridItemType.Header);
GridHeaderItem currentHeaderItem = (GridHeaderItem)header[0];
GridTHead head = (GridTHead)currentHeaderItem.Parent;

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

//to test, fill it with currentheader
newHeaderItem = currentHeaderItem;

//but this is equivalent to:
Object obj1 = new Object();
Object obj2 = new Object();
obj1 = obj2;
//at this point, obj1 and obj2 are references to one and the
//same thing. Cannot re-add an object to a collection it's
//already in

//Add the GridHeaderItem  ?!?!
head.Controls.Add(newHeaderItem);

Regards,
Veli
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.

[Thijs van Gestel]

ah, I see your point, yes. After just adding a completely new header item without it simply referring to the existing header item does allow me to add multiple headers. Thanks for the help.

[neebs]

Veli,

As you can see by the length of this thread, perhaps providing a more flexible header/footer interface would be worth considering for future releases. One of the most common requests I see for grid implementations has to do with header formatting. If I can have a grid that looks like:

---   Net Return   ---
MTD      QTD    YTD

It takes up a lot less horizontal space than:

MTD Net Return   QTD Net Return   YTD Net Return

My implementation using Jason's approach is now working fine, with no unexpected side-effects. The only header functionality that I am implementing, however, is sorting. I don't know if it would work if I were requiring filtering.

Steve

[Veli]

Hi neebs,

The most flexible approach RadGrid currently supports is using GridTemplateColumns to define custom item and header templates for every grid cell. Programmatically inserting header items is OK too, under some scenarios, and if you do not remove any existing items or cells from the grid header, as already discussed above. Providing greater flexibility with the grid header is on the agenda, but any concrete development schedules cannot be given at the moment.

Sincerely yours,
Veli
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.

[Mark Gilbert]

Hello,
 I am trying to add a second header row with columns, as well.
 I can't figure out what I'm doing wrong. No error is thrown, but the second header does not appear on the grid. This grid is bound at run-time to a dataset...

<telerik:RadGrid
    ID="RadGrid_IVRExpress_Sales"
    runat="server"
    onprerender="RadGrid_IVRExpress_Sales_PreRender"
    onexcelexportcellformatting="..."
    onitemcreated="..."
    oncolumncreated="..."
    onitemdatabound="..."
    Width="600px"
    GridLines="None">
    <ExportSettings ExportOnlyData="True" IgnorePaging="True">
    </ExportSettings>
    <MasterTableView AutoGenerateColumns="True" CommandItemDisplay="Top" TableLayout="Fixed">
        <CommandItemSettings ExportToExcelText="Export" ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false">
        </CommandItemSettings>
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
        </ExpandCollapseColumn>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Simple">
    </HeaderContextMenu>
</telerik:RadGrid>

PreRender event:

RadGrid rg = ((RadGrid)sender);

//get the current header
GridItem[] header = rg.MasterTableView.GetItems(GridItemType.Header);
//get the current THead element
GridTHead head = ((GridTHead)header[0].Parent.Controls[0].Parent);
//Get the GridHeaderItem from the THead
GridCommandItem commandHeaderItem = (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 newHeaderItem = new GridHeaderItem(rg.MasterTableView, 0, 0);

GridTableHeaderCell gthc = new GridTableHeaderCell();
gthc.Text = "Test 1";
gthc.ColumnSpan = 10;
gthc.HorizontalAlign = HorizontalAlign.Center;
newHeaderItem.Cells.Add(gthc);

gthc = new GridTableHeaderCell();
gthc.Text = "Test 2";
gthc.ColumnSpan = 6;
gthc.HorizontalAlign = HorizontalAlign.Center;
newHeaderItem.Cells.Add(gthc);

head.Controls.Add(commandHeaderItem);
head.Controls.Add(newHeaderItem);
head.Controls.Add(currentHeaderItem);

As I said, the command button header and the original header appear, but not the new header...

Any suggestions?
Thanks, Mark

[neebs]

Mark,

I think the problem you have is a result of this sequence:

GridCommandItem commandHeaderItem = (GridCommandItem)head.Controls[0];
GridHeaderItem currentHeaderItem = (GridHeaderItem)head.Controls[1];
//Clear all GridHeaderItems
head.Controls.Clear();

Clearing the controls, then trying to reuse commandHeaderItem and currentHeaderItem. Better if you recreate the header items from scratch, clear the header and re-add them. as in:

         //get the current header
        GridItem[] header = RadGridRealMcCoy.MasterTableView.GetItems(GridItemType.Header);
        //get the current THead element

        if (header.Length != 0)
        {
            GridTHead head = ((GridTHead) header[0].Parent.Controls[0].Parent);
            //Clear all GridHeaderItems
            head.Controls.Clear();
            //create a new GridHeaderItem which will be the new row
            GridHeaderItem hdr1Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);
            GridHeaderItem hdr2Item = new GridHeaderItem(RadGridRealMcCoy.MasterTableView, 0, 0);

... (fill in hdr1Item and hdr2Item)

            //Add back the GridHeaderItems in the order you want them to appear
            head.Controls.Add(hdr1Item);
            head.Controls.Add(hdr2Item);

Steve

[Mark Gilbert]

I am not sure if that is the issue. The command header and the original header are displayed in the grid with no issue. The new header, however, doesn't appear in the grid. Executing my pre-render event or commenting it out produces an identical grid.

[neebs]

Yes, but in this case, using something after you clear it is probably going to produce unpredictable results. You are calling the Clear() method of a ControlsCollection object. I believe this deletes the controls and subjects them to garbage collection. Why don't you try to create a new GridCommandItem and GridHeaderItem, populate them from the old ones (the ones you are trying to reuse), then clear the Controls before adding the new ones back in?

Steve

[Mark Gilbert]

Nope - no luck. This code produces a grid with no visible header:

RadGrid rg = ((RadGrid)sender);
GridItem[] header = rg.MasterTableView.GetItems(GridItemType.Header);
GridTHead head = ((GridTHead)header[0].Parent.Controls[0].Parent);
head.Controls.Clear();

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

GridTableHeaderCell gthc = new GridTableHeaderCell();
gthc.Text = "Test 1";
gthc.ColumnSpan = 10;
gthc.HorizontalAlign = HorizontalAlign.Center;
newHeaderItem.Cells.Add(gthc);

gthc = new GridTableHeaderCell();
gthc.Text = "Test 2";
gthc.ColumnSpan = 6;
gthc.HorizontalAlign = HorizontalAlign.Center;
newHeaderItem.Cells.Add(gthc);

head.Controls.Add(newHeaderItem);

[Veli]

Hi Mark,

Here is the recommended approach:

protected void Page_PreRender(object sender, EventArgs e)
{
    GridHeaderItem header = (GridHeaderItem)RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0];
    GridTHead head = (GridTHead)header.Parent;

    //create a new GridHeaderItem which will be the new row
    GridHeaderItem newHeaderItem = new GridHeaderItem(RadGrid1.MasterTableView, 0, 0);

    //add 2 empty table header cells, as there are 2 hidden columns always created in RadGrid
    newHeaderItem.Cells.Add(new GridTableHeaderCell());
    newHeaderItem.Cells.Add(new GridTableHeaderCell());

    //Add as many header cells as you need with required colspans
    newHeaderItem.Cells.Add(new GridTableHeaderCell { Text = "added" });
    newHeaderItem.Cells.Add(new GridTableHeaderCell { Text = "added", ColumnSpan = 2 });
    newHeaderItem.Cells.Add(new GridTableHeaderCell { Text = "added" });

    head.Controls.AddAt(0, newHeaderItem);
}

You need to first add 2 cells for the 2 invisible grid columns. These cells will not render, but you need to have them. Then you can add your own visible cells. Note also - no control clearing. It is not recommended to clear the controls that are already added to the GridTHead instance that is the parent of the current header item. You can read above for an explanation.

Greetings,
Veli
the Telerik team

[Fariborz]

I am using your recommended code and it works fine in adding an extra header row to the original header.
But the problem is that the data rows are not attached to their respective headers and scrolling makes the headers not aligned to the data rows.

[Veli]

Because scrolling and column operations (resizing, drag-to-group, column show/hide) need to interact with the header row and its cells, adding a second header row is not supported in these scenarios, as this would interfere with the client-side grid behavior.

Veli
the Telerik team

[Jens Olesen]

Hi Veli,

I am using this extra header in my Grids very very often for grouping of columns (only to help the user navigate in huge grids).
I know it is not supported, and I am sorry that some functionality doesn't work at all (like col. scrolling mentioned by Fariborz).

Any chance that Telerik will support this in the future ?
Also support for extra footerrows would be nice.

Do you know about other products with support for this ?

Thanks

[Veli]

We currently do not have any plans of supporting multiple header rows (or footer rows) in RadGrid. Also, none of our table-based data components support multi-row headers at the moment.

Veli
the Telerik team

[GTL Dev]

I am following this recommended approach and I am setting the Horizontal align = center but it has no affect.

.HorizontalAlign = HorizontalAlign.Center


My grid is using the Outlook skin.


is there something else i need to do?

[Veli]

Hi Softwarelicense,

This is because setting:

GridHeaderItem.HorizontalAlign = HorizontalAlign.Center

sets the text-align:center inline style to the parent <tr> element. However, RadGrid's CSS skin overwrites this style, because it uses a CSS rule applied directly to the <th> header cell elements (through the .rgHeader style applied to header cells).

To successfully apply a CSS style to your additional header, use a specific CSS class on the header row and then a CSS rule that will apply the style:

//create a new GridHeaderItem which will be the new row
GridHeaderItem newHeaderItem = new GridHeaderItem(RadGrid1.MasterTableView, 0, 0);
newHeaderItem.CssClass = "extraHeader";

tr.extraHeader th.rgHeader
{
    text-align:center;
}

Veli
the Telerik team

[Ed]

Hi Support,

Please urge the development teams to think about including this functionality in a future release; there are now many of us here who have shown we would benefit from it (and I suspect many more besides).  I am also using Jason's solution, which is working very nicely; however, it hardly justifies the large licence fee we pay for Telerik products when the only solution to a problem is to use unofficial, unsupported code donated by a member of the public.

Thanks,

Ed Graham

[Veli]

Hi Ed,

I have created a feature request in our Public Issue Tracking System (PITS) for this. Now the community can vote to raise the priority of this request in the future planning cycles of the development team.

Veli
the Telerik team

[Ed]

Thank you very much, Veli; it's greatly appreciated.  Everyone, please vote!

[TelDev]

Hi,

I am also using a telerik grid with multiple headers as explained by you by adding 2 extra columns and then headers with column spans.
The headers with column spans has their own css class. The problem i am facing is the backgroud color of the top header. The scrollbar starts vertically from header 2, but not from header 1.
I have attched a image.

Thanks
TelDev

[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