Multi column header in ASP.NET GridView

Question

I have a gridview contains 30 columns where few columns i have to set single column on top of it ie i have Leaf Name,Leaf Code,Leaf Value,Leaf Vendor Code,Leaf Id,Leaf ZOnal,Leaf Leveller columns where i need to give single column on top of it as Leaves Details.I did following code in rowdatabound with no success, new single column is coming on top of all.Could you please tell me what i did wrong.One more important thing i did is , i set gridview property PagerSettings Position top so that could come on top of grid as index values 1,2,3 etc.

here is my gridview

 <asp:GridView ID="grdcell" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="13" DataKeyNames="firstname,location"
                CellPadding="4" ForeColor="#333333" OnPageIndexChanging="grdNewcells_PageIndexChanging" OnRowDataBound="grdcell_RowDataBound" >
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:TemplateField HeaderText="Insert" HeaderStyle-HorizontalAlign="Left">
                        <HeaderTemplate>
                            <asp:CheckBox ID="insertall" Text="Insert All" onclick="checkAll(this);" runat="server" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="insertChk" runat="server" />
                        </ItemTemplate>
                        <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Leaf_NAME" HeaderText="Leaf Name" SortExpression="Leaf_NAME"></asp:BoundField>
                    <asp:BoundField DataField="Leaf_CODE" HeaderText="Leaf Code" SortExpression="Leaf_CODE"></asp:BoundField>
                    <asp:BoundField DataField="Leaf_Value" HeaderText="Leaf Value" SortExpression="Leaf_Value"></asp:BoundField>
                    <asp:BoundField DataField="LeafVENDOR_CODE" HeaderText="Leaf Vendor Code" SortExpression="LeafVENDOR_CODE"></asp:BoundField>
                    <asp:BoundField DataField="Leaf_ID" HeaderText="Leaf Id" SortExpression="Leaf_ID"></asp:BoundField>
                    <asp:BoundField DataField="Leaf_ZOnal" HeaderText="Leaf ZOnal" SortExpression="Leaf_ZOnal"></asp:BoundField>
                    <asp:BoundField DataField="Leaf_Leveller" HeaderText="Leaf Leveller" SortExpression="Leaf_Leveller"></asp:BoundField>
                    <asp:BoundField DataField="Loaction" HeaderText="Loaction" SortExpression="Loaction"></asp:BoundField>

and the code what i did in row data bound as shown below

GridViewRow gvRow = e.Row;
                if (gvRow.RowType == DataControlRowType.Header)
                {
                    if (gvRow.Cells[1].Text == "Leaf_NAME")
                    {
                        gvRow.Cells.Remove(gvRow.Cells[1]);
                        GridViewRow gvHeader = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Insert);
                        TableCell headerCell0 = new TableCell()
                        {
                            Text = "Leaves Details",
                            HorizontalAlign = HorizontalAlign.Center,
                            RowSpan = 6
                        };

                        gvHeader.Cells.Add(headerCell0);

                        grdcell.Controls[0].Controls.AddAt(0, gvHeader);
                    }
                }

Answer 1

i did it by using following link, but i used gridview row created event

single column for multiple column

Answer 2

In order to "group" several columns in a common header (with subheaders), I use a TemplateField. For 2 subcolumns, it would look like this:

<asp:TemplateField HeaderStyle-HorizontalAlign="Center">
    <HeaderTemplate>
        <table runat="server" class="leafCommonHeader" align="center" cellpadding="0" cellspacing="0">
            <tr class="multiColumnMainHeader">
                <td colspan="2">
                    <asp:Label runat="server" CssClass="leafHeader" Text="Leaf Details" />
                </td>
            </tr>
            <tr runat="server">
                <td class="leafNameField">
                    <asp:LinkButton runat="server" CssClass="leafHeader" OnCommand="gvLeavesColumnSort" CommandArgument="LeafName" Text="Name" />
                </td>
                <td class="leafNameField">
                    <asp:LinkButton runat="server" CssClass="leafHeader" OnCommand="gvLeavesColumnSort" CommandArgument="LeafCode" Text="Code" />
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table runat="server" class="leafCommonItem" cellpadding="0" cellspacing="0">
            <tr>
                <td class="leafNameField">
                    <asp:Literal runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LeafName")) %>' />
                </td>
                <td class="leafCodeField">
                    <asp:Literal runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "LeafCode") %>' />
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:TemplateField>

The link buttons in the subheaders are there to implement the sort of the subcolumns. I included a few CssClass attributes that allow to customize the cells and labels. The CSS classes leafNameField and leafCodeField can set the with of their column, for example.

Disclaimer: this code was not tested with paging turned on.