colspan gridview rows

Question

I have added rows into gridview. There are 20 columns in gridview. How can i do a colspan-like feature in gridview which could show me 2-3 rows under 2-3 columns and remaining as a colspan.

Basically i wish to implement colspan in gridview on the rows of the gridview.

hence my present gv is like ;

Col 1 Col 2 Col 3 Col 4 ...... Col 20

Cell1 Cell2 Cell3 Cell 4 ...... Cell 20 (For Rows # 1)

I wish to have something like

Col 1 Col 2 Col 3 Col 4 ...... Col 20

    Cell1      Cell2    ...... Cell 20   (For Rows # 1)

Let me know for any query.

Thanks

Solution

You need to handle the OnRowCreated event of the GridView as follows:

 protected void grid_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        e.Row.Cells[2].ColumnSpan = 2;
        //now make up for the colspan from cell2
        e.Row.Cells.RemoveAt(4);
    }
}

Your markup should be something like this:

<asp:GridView runat="server" ID="grid" OnRowCreated="grid_RowCreated" >

On the above example, I populated the grid with this:

DataTable dt = new DataTable();
        for (int i = 0; i < 5; i++)
        {
            dt.Columns.Add("Col " + i);
        }
        for (int i = 0; i < 10; i++)
        {
            DataRow r = dt.NewRow();
            r.ItemArray=new object[]{"row "+i,"row "+i,"row "+i,"row "+i,"row "+i};
            dt.Rows.Add(r);
        }

        grid.DataSource = dt;
        grid.DataBind();

And it produces this:

I just realized that you wanted to have the ROWS (not necessarily the header) to have certain colspan, in which case you can do:

 protected void grid_RowCreated(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[2].ColumnSpan = 2;
        //now make up for the colspan from cell2
        e.Row.Cells.RemoveAt(4);
    }
}

And it will produce:

Comments

[xorpower]

what is the use of the second code snippet you have posted? plus, where to include the same?

[Icarus]

@Xor power: The second code snippet is different from the first one in that the first one checks if the row being created is a Header and the second one checks if the row being created is a DataRow (pay attention at the if statements; they are different).

[xorpower]

I am not asking for the rowcreated events. I am asking for the code snippets that has included 2 for loops (between 2 row created events)

[Icarus]

@Xor power they are used to populate the grid with dummy data so I could demonstrate the result of handling the rowcreated event. Ignore them since you'll be binding your grid with real data.

[Fandango68]

That's excellent but how to do the same only for the Footer row?

[Icarus]

@Fernando68 just check if (e.Row.RowType == DataControlRowType.Footer){ ... }

[Garr Godfrey]

if it needs to depend on the data, you may need it in OnRowDataBound instead