Skip to content Skip to sidebar Skip to footer

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.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        int spanColumn_1_start = 1;
        int spanColumn_1_length = 3;

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

        //remove the spanned cells
        for (int i = 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 colspan
        int spanColumn_2_start = 2;
        int spanColumn_2_length = 3;

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

        //remove the spanned cells
        for (int i = 1; i < spanColumn_2_length; i++)
        {
            e.Row.Cells.RemoveAt(spanColumn_2_start + 1);
        }
    }
    else if (e.Row.RowType == DataControlRowType.DataRow)
    {
        int rowIndex = e.Row.DataItemIndex;

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

        //span 4 rows in column 3 starting at row 6
        if (rowIndex == 9)
        {
                int rowSpan = 4;
                int columnIndex = 3;

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

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

The above snippet will give the following result.

result

UPDATE

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

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    //cast the sender back to a gridview
    GridView gv = sender as GridView;

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

        //loop all the columns and create a new cell for each
        for (int i = 0; i < gv.Columns.Count; i++)
        {
            TableCell cell = new TableCell();
            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);
    }
}

Post a Comment for "How To Achieve Multiple Colspan And Multiple Header Row Using ASP.Net Gridview?"