Merger Header in GridView

Written on 10:26 PM by Mj blog

Let’s see how to merge the Header in the Gridview this can be achieved by either C# . Lets place a gridview on the aspx HTML source file

Sample View

HTML Source Code

<asp:GridView ID="GridView1" runat="server" BackColor="White"
        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
        ForeColor="Black" GridLines="Horizontal" onrowcreated="GridView1_RowCreated">
        <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
        <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
        <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White"
            BorderColor="#000066" BorderStyle="Solid" BorderWidth="1px" />
    </asp:GridView>

C# Code

It’s simple create row created event and use this code

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            //Build Gridview in runtime
            GridView objGrdView = (GridView)sender; 
            GridViewRow objGrdViewRow = new
            GridViewRow(0, 0,  DataControlRowType.Header,  DataControlRowState.Insert);         
            //Create table cell
            TableCell objTblCell = new TableCell();
            //Add cell
            objTblCell.Text = "Name"; //provide the heard test
            objTblCell.ColumnSpan = 2;
            objTblCell.CssClass = "lblColor";
            objTblCell.HorizontalAlign = HorizontalAlign.Center;
            objGrdViewRow.Cells.Add(objTblCell);
            //Add cell 
            objTblCell = new TableCell(); //Create another cell
            objTblCell.HorizontalAlign = HorizontalAlign.Center;
            objTblCell.CssClass = "lblColor";
            objTblCell.Text = "Employee";
            objTblCell.ColumnSpan = 1;
            objGrdViewRow.Cells.Add(objTblCell);
            objGrdView.Controls[0].Controls.AddAt(0, objGrdViewRow);
        }
    }

we have checked for the row type whether its a header row and then we have taken the instance of the gridview then we have created new gridview row which is like tr of the table and table cell which is equal to the td of the table and we have inserted those td in the tr and then inserted the row on the first row of the gridview (which is nothing but a table on the runtime)

I forgot to say guys you have to bind the gridview ….

Hope its useful

Posted in Gridview | Comment Now!