How To Achieve Multiple Colspan And Multiple Header Row Using Asp.net Gridview?

I'm in a situation were need to achieve multiple colspan and two header row using ASP.Net gridview. Something like below +----------+--------------------------------+--------------

Solution 1:

Access to the RowSpan and ColumnSpan for a grid view is done through the Cells property.

To access the header cells:

//Replace ColumnSpan with RowSpan if needed (and if you can get multiple header rows)
Gridview1.HeaderRow.Cells[CELL_INDEX].ColumnSpan = 2; //Need to know the cell index

To access the cells of a normal row:

//Replace ColumnSpan with RowSpan if needed
Gridview1.Rows[ROW_INDEX].Cells[CELL_INDEX].ColumnSpan = 2; //Need to know the row index and the cell index in that row

The multiple header row might be a bit more tricky. I've never done it, but the guy here seemed to have a good answer: How to add Header and Subheader in Gridview

Solution 2:

It can be done, but it takes a bit of trial and error to get the design you want. Use the GridView OnRowDataBound event. It would be easier to do this after the GridView is build, especially for RowSpan.

protectedvoidGridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        intspanColumn_1_start=1;
        intspanColumn_1_length=3;

        //apply colspan
        e.Row.Cells[spanColumn_1_start].ColumnSpan = 3;

        //remove the spanned cellsfor (inti=1; i < spanColumn_1_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_1_start + 1);
        }

        //note that the startindex of the 2nd colspan is set after removing cells for 1st colspanintspanColumn_2_start=2;
        intspanColumn_2_length=3;

        //apply colspan
        e.Row.Cells[spanColumn_2_start].ColumnSpan = 3;

        //remove the spanned cellsfor (inti=1; i < spanColumn_2_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_2_start + 1);
        }
    }
    elseif (e.Row.RowType == DataControlRowType.DataRow)
    {
        introwIndex= e.Row.DataItemIndex;

        //to make a rowspan you have to work backwards since the next row does not exist yetif (rowIndex == 1)
        {
            GridView1.Rows[rowIndex - 1].Cells[0].RowSpan = 2;
            e.Row.Cells.RemoveAt(0);
        }

        //span 4 rows in column 3 starting at row 6if (rowIndex == 9)
        {
                introwSpan=4;
                intcolumnIndex=3;

                //apply rowspan
                GridView1.Rows[rowIndex - rowSpan].Cells[columnIndex].RowSpan = rowSpan;

                //remove the spanned rowsfor (inti=1; i < rowSpan; i++)
                {
                    GridView1.Rows[rowIndex - (rowSpan - i)].Cells.RemoveAt(columnIndex);
                }
        }
    }
}

The above snippet will give the following result.

UPDATE

To add an extra header row you need to use the OnRowCreated event of the GridView.

protectedvoidGridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    //cast the sender back to a gridviewGridViewgv= sender as GridView;

    //check if the row is the header rowif (e.Row.RowType == DataControlRowType.Header)
    {
        //create a new rowGridViewRowextraHeader=newGridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
        extraHeader.BackColor = Color.Green;

        //loop all the columns and create a new cell for eachfor (inti=0; i < gv.Columns.Count; i++)
        {
            TableCellcell=newTableCell();
            cell.Text = "ExtraHeader " + i;

            //add the cell to the new header row
            extraHeader.Cells.Add(cell);
        }

        //add the new row to the gridview
        gv.Controls[0].Controls.AddAt(0, extraHeader);
    }
}