Adding Multiple Header Rows to Telerik RadGrid
<p>I'm using Telerik RadGrid and have a requirement which I was able to achieve but it seems to not work in the manner I expected.</p>

<p>Requirement :
Add a Parent Header row on one button click (Load 5 Records) and remove on another button click (Load More Records)</p>

<p><a href="https://i.stack.imgur.com/yjLoI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yjLoI.png" alt="Multiple Header Rows"></a></p>

<p>The Grid declaration is as below</p>

<pre><code>                            &lt;telerik:RadGrid ID="rgDetails1" runat="server" Width="99.9%" Skin="Office2010Blue"
                                EnableEmbeddedSkins="true" AutoGenerateColumns="true" OnColumnCreated="rgDetails1_ColumnCreated"&gt;
                                &lt;MasterTableView DataKeyNames="RowID" TableLayout="Fixed" HeaderStyle-Height="28px"&gt;
                                    &lt;NoRecordsTemplate&gt;
                                        &lt;asp:Label ID="lblError" runat="server" Text="No records to display."&gt;&lt;/asp:Label&gt;&lt;/NoRecordsTemplate&gt;
                                &lt;/MasterTableView&gt;
                                &lt;ClientSettings&gt;
                                    &lt;Resizing AllowColumnResize="True" /&gt;
                                    &lt;Scrolling AllowScroll="true" ScrollHeight="280px" UseStaticHeaders="true"&gt;&lt;/Scrolling&gt;
                                    &lt;ClientEvents OnGridCreated="GridCreated" /&gt;
                                &lt;/ClientSettings&gt;
                            &lt;/telerik:RadGrid&gt;
</code></pre>

<p>and the Grid is bound with below codes</p>

<pre><code>protected void btnLoad1_Click(object sender, EventArgs e)
{
    DataTable fdtObjDetails = null;
    try
    {
        fdtObjDetails = LoadData(5);

        GridColumnGroup parentHeader = new GridColumnGroup();
        parentHeader.HeaderText = "Essential";
        parentHeader.Name = "Group1";
        parentHeader.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
        rgDetails1.MasterTableView.ColumnGroups.Add(parentHeader);

        rgDetails1.DataSource = fdtObjDetails;
        rgDetails1.DataBind();
    }
    catch (Exception objExcep)
    {
        string fstrError = objExcep.ToString();
    }
}
</code></pre>

<p>and on Column Created event of the RadGrid grouping is done.</p>

<pre><code>protected void rgDetails1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        try
        {
            if (e.Column.HeaderText != "" &amp;&amp; e.Column.HeaderText != string.Empty &amp;&amp; e.Column.HeaderText != null)
            {
                e.Column.ItemStyle.Height = System.Web.UI.WebControls.Unit.Pixel(20);
                switch (e.Column.HeaderText.ToUpper())
                {
                    case "ROWID":
                    case "ROW ID":
                        e.Column.Visible = false;
                        break;

                    case "TYPE":
                        e.Column.HeaderText = "Type";
                        e.Column.UniqueName = "Type";
                        e.Column.HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(100);
                        e.Column.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                        e.Column.HeaderStyle.VerticalAlign = VerticalAlign.Middle;
                        e.Column.ColumnGroupName = "Group1";
                        break;

                    case "FLIGHT NAME":
                    case "FLIGHT_NAME":
                        {
                            e.Column.HeaderText = "Flight Name";
                            e.Column.UniqueName = "Flight_Name";
                            e.Column.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                            e.Column.HeaderStyle.VerticalAlign = VerticalAlign.Middle;
                            e.Column.ColumnGroupName = "Group1";
                            break;
                        }

                    case "LIVES":
                        {
                            e.Column.HeaderText = "Lives";
                            e.Column.UniqueName = "Lives";
                            GridBoundColumn _GridColumn = (GridBoundColumn)e.Column;
                            e.Column.HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(60);
                            e.Column.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                            e.Column.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
                            e.Column.HeaderStyle.VerticalAlign = VerticalAlign.Middle;
                            _GridColumn.DataFormatString = "{0:#,###}";
                            e.Column.ColumnGroupName = "Group1";
                            break;
                        }
                }
            }
        }
        catch (Exception objExcep)
        {
            string fstrClsNm = "AL-CLS" + this.GetType().BaseType.FullName + "-rgDetails1_ColumnCreated()";
        }
    }
</code></pre>

<p>Now the problem is, as soon as I click any one of the buttons I get the below error. </p>

<p><a href="https://i.stack.imgur.com/ZffKE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZffKE.png" alt="enter image description here"></a></p>

<p>How do I resolve this? or is there any other way to add Header Rows which looks similar to the image above?</p>