locked
Gridview multiple header rows in c# RRS feed

  • Question

  • User1151703306 posted

    Hello there,

    How to show multirow header in gridview in asp.net ?

    I need use header template and item template and design it according to my requirements

    I have tried the code below but I don't understand because the columns are not aligned.

    The output is :

    Please can you help me ?

    Thanks in advance for nay help.

    My code below

        <asp:GridView ID="gvCustomers" runat="server"
            AutoGenerateColumns="false" CssClass="mGrid"
            HorizontalAlign="Center"
            Width="100"
            DataKeyNames="sID">
            <Columns>
    
    
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgOrdersShow"
                            runat="server" OnClick="Show_Hide_OrdersGrid"
                            ImageUrl="/aspnet/img/plus.png"
                            CommandArgument="Show" />                
                    </ItemTemplate>
                </asp:TemplateField>
    
    
    
                <asp:TemplateField>
                    <HeaderTemplate>
                        <th colspan="6">Category</th>
                        <tr class="gvHeader">
                            <th style="width: 0px"></th>
                            <th colspan="3">Hardware</th>
                            <th colspan="3">Software</th>
                        </tr>
                        <tr class="gvHeader">
                            <th></th>
                            <th>S. No.</th>
    
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <td>test1</td>
                        <td>test2</td>
                        <td>test3</td>
                        <td>test4</td>
                        <td>test5</td>
                    </ItemTemplate>
                </asp:TemplateField>
    
    
            </Columns>
        </asp:GridView>

    Thursday, October 17, 2019 9:11 AM

Answers

  • User314352500 posted

    Hello Golia,

    Please try this version :

        <asp:GridView ID="gvCustomers" runat="server"
            AutoGenerateColumns="false" 
            CssClass="mGrid"
            HorizontalAlign="Center"
            DataKeyNames="sID">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgOrdersShow"
                            runat="server" 
                            OnClick="Show_Hide_OrdersGrid"
                            ImageUrl="/aspnet/img/plus.png"
                            CommandArgument="Show" />                
                    </ItemTemplate>
                </asp:TemplateField>
    
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label1" 
                                runat="server"
                                Text="S. No."
                                ToolTip="S. No.">
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <th colspan="18">Category</th>
                                </tr>
                                <tr>
                                    <th colspan="2">Hardware</th>
                                    <th colspan="2">Software</th>
                                    <th colspan="2">Hardware1</th>
                                    <th colspan="2">Software1</th>
                                </tr>
                                <tr>
                                    <td>test1</td>
                                    <td>test2</td>
                                    <td>test3</td>
                                    <td>test4</td>
                                    <td>test5</td>
                                    <td>test6</td>
                                    <td>test7</td>
                                    <td>test8</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table>
                                <tr>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:TemplateField>
    
            </Columns>
        </asp:GridView>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 28, 2019 2:08 PM

All replies

  • User-1038772411 posted


    hello Golia

    I added code of code behind page and html page you can add multiple header rows.

    The below code is of Code Beind(.aspx.cs) page code

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Section1Data1"), new DataColumn("Section1Data2"), new DataColumn("Section2Data1"), new DataColumn("Section2Data2") });
                    for(int i=0; i<=3; i++)
                    {
                        dt.Rows.Add("CName "+i, "Country "+i, "EName "+i, "ECountry "+i);
                    }                
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
    
    
    
            protected void OnDataBound(object sender, EventArgs e)
            {
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell cell = new TableHeaderCell();
                cell.Text = "xxxxxx";
                cell.ColumnSpan = 1;
                row.Controls.Add(cell);
    
                cell = new TableHeaderCell();
                cell.Text = "Customers";
                cell.ColumnSpan = 2;            
                row.Controls.Add(cell);
    
                cell = new TableHeaderCell();
                cell.ColumnSpan = 2;
                cell.Text = "Employees";
                row.Controls.Add(cell);
    
                row.BackColor = ColorTranslator.FromHtml("#d9aaed");
                GridView1.HeaderRow.Parent.Controls.AddAt(0, row);
            }

    Below code is of aspx page code

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <asp:GridView ID="GridView1" HeaderStyle-BackColor="#5151a0" HeaderStyle-ForeColor="#ffffff" runat="server" AutoGenerateColumns="false" OnDataBound = "OnDataBound"> <Columns> <asp:TemplateField HeaderText="More Info"> <ItemStyle HorizontalAlign="center"></ItemStyle> <ItemTemplate > <i class="fa fa-plus" aria-hidden="true"></i> </ItemTemplate> </asp:TemplateField> </Columns> <Columns> <asp:BoundField DataField="Section1Data1" HeaderText="Data1" ItemStyle-Width="150" /> <asp:BoundField DataField="Section1Data2" HeaderText="Data2" ItemStyle-Width="150" /> <asp:BoundField DataField="Section2Data1" HeaderText="Data1" ItemStyle-Width="150" /> <asp:BoundField DataField="Section2Data2" HeaderText="Data2" ItemStyle-Width="150" /> </Columns> </asp:GridView> </asp:Content>

    Thanks.

    Thursday, October 17, 2019 1:25 PM
  • User288213138 posted

    Hi Golia,

    I need use header template and item template and design it according to my requirements

    I have tried the code below but I don't understand because the columns are not aligned.

    According to your description, I couldn’t understand your requirement clearly.

    Do you want to align the <tr> of class="gvHeader"?

    And If you want to use <td> directly in the itemtemplate, then there will be one more <td> after rendering. So I suggest putting <td> in the table.

    This demo for you as a reference:

     <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:ImageButton ID="imgOrdersShow" runat="server" ImageUrl="/aspnet/img/plus.png" CommandArgument="Show" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td>Category</td>
                                    </tr>
                                    <tr>
                                        <td>Hardware</td>
                                        <td>Software</td>
                                    </tr>
                                    <tr>
                                        <td>S. No.</td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>Test1</td>
                                        <td>Test2</td>
                                        <td>Test3</td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    The result:

    And I think it's a good idea to add multiple headers to the Gridview in the code behind.

    This demo for your as a reference:https://www.aspsnippets.com/Articles/GridView-with-Multiple-Headers-in-ASPNet.aspx

    Best regards,

    Sam

    Friday, October 18, 2019 6:57 AM
  • User1151703306 posted

    thank you for help and suggestion's.

    but the values of rows  are not aligned in the columns.

    please see this picture :

    my code :

        <asp:GridView ID="gvCustomers" runat="server"
            AutoGenerateColumns="False" CssClass="mGrid"
            HorizontalAlign="Center"
            Width="800px"
            DataKeyNames="sID">
            <Columns>
    
                <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgOrdersShow"
                            runat="server"
                            OnClick="Show_Hide_OrdersGrid"
                            ImageUrl="/aspnet/img/plus.png"
                            CommandArgument="Show" />
                    </ItemTemplate>
                </asp:TemplateField>
    
                <asp:TemplateField>
                    <HeaderTemplate>
                        <table>
                            <tr>
                                <th colspan="18">Category</th>
                            </tr>
                            <tr>
                                <th colspan="4"></th>
                                <th colspan="2">Hardware</th>
                                <th colspan="2">Software</th>
                                <th colspan="2">Hardware 1</th>
                                <th colspan="2">Software 1</th>
                            </tr>
                            <tr>
                                <th colspan="3"></th>
                                <th>S. No.</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                            </tr>
                        </table>
                    </HeaderTemplate>
    
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>Test1 Test2 Test3</td>
                                <td>Test2</td>
                                <td>Test3</td>
                                <td>Test1</td>
                                <td>Test2</td>
                                <td>Test3</td>
                                <td>Test1</td>
                                <td>Test2</td>
                                <td>Test3</td>
                            </tr>
                        </table>
                    </ItemTemplate>
    
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

    Friday, October 18, 2019 1:43 PM
  • User288213138 posted

    Hi Golia,

    <table>
                            <tr>
                                <th colspan="18">Category</th>
                            </tr>
                            <tr>
                                <th colspan="4"></th>
                                <th colspan="2">Hardware</th>
                                <th colspan="2">Software</th>
                                <th colspan="2">Hardware 1</th>
                                <th colspan="2">Software 1</th>
                            </tr>
                            <tr>
                                <th colspan="3"></th>
                                <th>S. No.</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                                <th>Number</th>
                                <th>Km</th>
                            </tr>
                        </table>

    If you want to align the columns of two tables by colspan Attribute, it seems impossible. This can only be set by the style of css and this way is very trouble.

    And the class"'mGrid" and "gvHeader" also change the style of the Gridview. So I don't suggest use html to add multiple header to the gridview.

    You can add multiple headers to GridView using the OnDataBound event.

    https://www.aspsnippets.com/Articles/GridView-with-Multiple-Headers-in-ASPNet.aspx

    Best regards,

    Sam

    Monday, October 21, 2019 5:45 AM
  • User1151703306 posted

    Thank you for reply.

    But your suggestion https://www.aspsnippets.com/Articles/GridView-with-Multiple-Headers-in-ASPNet.aspx it's not for me because in my GridView I have in the first column and when I try to open the child gridview, everything goes wrong

                <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgOrdersShow"
                            runat="server"
                            OnClick="Show_Hide_OrdersGrid"
                            ImageUrl="/aspnet/img/plus.png"
                            CommandArgument="Show" />
                    </ItemTemplate>
                </asp:TemplateField>

    Monday, October 21, 2019 6:24 PM
  • User288213138 posted

    Hi Golia,

    GridView I have in the first column and when I try to open the child gridview, everything goes wrong

    Is there any connection between open the child gridview and add multiple headers in DataBound?

    Here is my test code:

     <script type="text/javascript">
            $("[src*=plus]").live("click", function () {
                $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
                $(this).attr("src", "../Images/minus.PNG");
            });
            $("[src*=minus]").live("click", function () {
                $(this).attr("src", "../Images/plus.PNG");
                $(this).closest("tr").next().remove();
            });
        </script>
    
     <form id="form1" runat="server">
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound" OnDataBound="gvCustomers_DataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <img alt = "" style="cursor: pointer" src="../Images/plus.PNG" />
                        <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                            <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false">
                                <Columns>
                                   
                                    <asp:TemplateField HeaderText="CustomerId">
                                        <ItemTemplate><%#Eval("CustomerId")%></ItemTemplate>
                                        <EditItemTemplate>
                                            <asp:TextBox ID="txtintervention" runat="server" Text='<%#Eval("CustomerId")%>'/>
                                        </EditItemTemplate>
                                    </asp:TemplateField>
    
                                    
                                    <asp:TemplateField HeaderText="Name">
                                        <ItemTemplate><%#Eval("Name")%></ItemTemplate>
                                        <EditItemTemplate>
                                            <asp:TextBox ID="txtworkshop" runat="server" Text='<%#Eval("Name")%>'/>
                                        </EditItemTemplate>
                                    </asp:TemplateField>
    
                                </Columns>
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
        </form>
    
    
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    gvCustomers.DataSource = GetData("select * from Customers");
                    gvCustomers.DataBind();
                }
            }
            private static DataTable GetData(string query)
            {
                string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    using (SqlCommand cmd = new SqlCommand())
                    {
                        cmd.CommandText = query;
                        using (SqlDataAdapter sda = new SqlDataAdapter())
                        {
                            cmd.Connection = con;
                            sda.SelectCommand = cmd;
                            using (DataSet ds = new DataSet())
                            {
                                DataTable dt = new DataTable();
                                sda.Fill(dt);
                                return dt;
                            }
                        }
                    }
                }
            }
            protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    string customerId = gvCustomers.DataKeys[e.Row.RowIndex].Value.ToString();
                    GridView gvOrders = e.Row.FindControl("gvOrders") as GridView;
                    gvOrders.DataSource = GetData(string.Format("select * from Customer where CustomerId='{0}'", customerId));
                    gvOrders.DataBind();
                }
            }     
            protected void gvOrders_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "Edit")
                {
                    GridView g1 = (GridView)sender;                              
                }
            }
    
            protected void gvCustomers_DataBound(object sender, EventArgs e)
            {
                GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
                TableHeaderCell cell = new TableHeaderCell();
                cell.Text = "Title1";
                cell.ColumnSpan = 2;
                row.Controls.Add(cell);
    
                cell = new TableHeaderCell();
                cell.ColumnSpan = 2;
                cell.Text = "Title2";
                row.Controls.Add(cell);
    
                row.BackColor = ColorTranslator.FromHtml("#3AC0F2");
                gvCustomers.HeaderRow.Parent.Controls.AddAt(0, row);
            }
    

    The result:

    Best regards,

    Sam

    Tuesday, October 22, 2019 5:47 AM
  • User314352500 posted

    Hello Golia,

    Please try this version :

        <asp:GridView ID="gvCustomers" runat="server"
            AutoGenerateColumns="false" 
            CssClass="mGrid"
            HorizontalAlign="Center"
            DataKeyNames="sID">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgOrdersShow"
                            runat="server" 
                            OnClick="Show_Hide_OrdersGrid"
                            ImageUrl="/aspnet/img/plus.png"
                            CommandArgument="Show" />                
                    </ItemTemplate>
                </asp:TemplateField>
    
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label1" 
                                runat="server"
                                Text="S. No."
                                ToolTip="S. No.">
                            </asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <table>
                                <tr>
                                    <th colspan="18">Category</th>
                                </tr>
                                <tr>
                                    <th colspan="2">Hardware</th>
                                    <th colspan="2">Software</th>
                                    <th colspan="2">Hardware1</th>
                                    <th colspan="2">Software1</th>
                                </tr>
                                <tr>
                                    <td>test1</td>
                                    <td>test2</td>
                                    <td>test3</td>
                                    <td>test4</td>
                                    <td>test5</td>
                                    <td>test6</td>
                                    <td>test7</td>
                                    <td>test8</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table>
                                <tr>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                    <td>your value</td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </asp:TemplateField>
    
            </Columns>
        </asp:GridView>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 28, 2019 2:08 PM