ASP.NET GridView RowSpan using RowCreated Event - How to add Table Dynamic RowSpan with GridView
HTML has the RowSpan and ColSpan attributes for table cells or table columns. HTML RowSpan and ColSpan attribures are very common and frequently used in table desing. And for a better view or from requirements, in your ASP.NET pages you might need to use ColSpan and RowSpan especially in DataGrid or in GridView objects.
One of the problems related with RowSpan usage in GridView and DataGrid in ASP.NET is how to add the RowSpan attribute dynamically?
Actually the GridView has the solution with itself.
We can develop our ASP.NET code using the RowCreated event of the GridView object on the code-behind section.
I am now going to try to demonstrate within a sample ASP.NET web site application, how ASP.NET developers can use the GridView.RowCreated event for solving RowSpan problem.
An other problem is how to set the rowspan value, the number of data rows or table rows to span.
Below is a screenshot of the this sample ASP.NET web application.
Sample ASP.NET GridView with RowSpan Attribute of Table Cell is Set
In this sample project, I will use LINQ to SQL classes to get the datasource of the gridview object.
First I created the Data Class .dbml file and the data context class DataClasses1DataContext.
To complete this task just click the "Add > New Item" from the website application context menu and select the "LINQ to SQL Classes" as the new item template.
The data that we will bind to the datagrid/gridview comes from the DataContext class ExecuteQuery (Of TResult) method.
Here is how I implemented the gridview databinding using ExecuteQuery method.
I also used the ToList() extension to get the data.
Dim dcDataContext As New DataClasses1DataContext
dcDataContext.Connection.ConnectionString = GetConnectionString()
dcDataContext.Connection.Open()
Dim IEnumerableList As IEnumerable(Of Product)
IEnumerableList = dcDataContext.ExecuteQuery(Of Product)( _
"SELECT * FROM Product").ToList
Me.GridView1.DataSource = IEnumerableList
Me.GridView1.DataBind()
dcDataContext.Connection.Close()
Now we will implement the GridView1_RowCreated event handler for RowCreated event of the GridView1.
Protected Sub GridView1_RowCreated(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowCreated
Dim gv As GridView = CType(sender, GridView)
If e.Row.RowType = DataControlRowType.Header Then
Dim tc As New TableCell()
tc.Text = "Customer" 'RowSpan Column Header
e.Row.Cells.Add(tc)
ElseIf e.Row.RowType = DataControlRowType.DataRow Then
If e.Row.RowIndex = 0 Then
Dim tc As New TableCell()
tc.RowSpan = 1 'Set RowSpan attribute
tc.VerticalAlign = VerticalAlign.Top
'Create a dropdownlist within the table cell
Dim ddl As New DropDownList()
ddl.ID = "ddlCustomer"
ddl.DataTextField = "Name"
ddl.DataValueField = "ID"
'Add a dropdownlist to the table cell
tc.Controls.Add(ddl)
'Add the cell to the row
e.Row.Cells.Add(tc)
'Get data for the dropdownlist
Dim dcDataContext As New DataClasses1DataContext
dcDataContext.Connection.ConnectionString = GetConnectionString()
dcDataContext.Connection.Open()
Dim iList As IEnumerable(Of Customer)
iList = dcDataContext.ExecuteQuery(Of Customer)( _
"SELECT * FROM Customer").ToList
ddl.DataSource = iList
ddl.DataBind()
dcDataContext.Connection.Close()
Else
Dim tc As TableCell = gv.Rows(0).Cells(gv.Rows(0).Cells.Count - 1)
'Increase the rowspan row count by one
tc.RowSpan = tc.RowSpan + 1
End If
End If
End Sub
As you can see on the above ASP.NET codes, the header of the column which will span table or gridview rows is set at the below conditional statement.
This will pass the condition for the first row which forms of the header of the gridview table.
If e.Row.RowType = DataControlRowType.Header Then
We coded to create a TableCell() object which will be the header column in the gridview.
I set the column name and then add the new TableCell to the Cells collection of the first row.
The second condition which validates for any DataRow.
ElseIf e.Row.RowType = DataControlRowType.DataRow Then
What we will code within this if condition is going to be checking the e.Row.RowIndex.
If e.Row.RowIndex is "0" which means we are implementing the Create event of the first data row, we will populate the contents of the cell which will span rows using RowSpan attribute.
I created again a new tablecell and set the RowSpan property of this table cell to "1".
Since I do not know what to set as the value of the rowspan attribute I will set it to 1 for the first row. And then increase it by one for every row created within the gridview.
The last conditional case "ELSE" implements updating the rowspan value.
See below how I coded this task. I get the first row and the rowspan cell, then increase its RowSpan attribute value by one.
Dim tc As TableCell = gv.Rows(0).Cells(gv.Rows(0).Cells.Count - 1)
'Increase the rowspan row count by one
tc.RowSpan = tc.RowSpan + 1
This is a sample ASP.NET web site poject where RowSpan in GridView is implemented using the GridView1.RowCreated event handler is used.
You can download the source codes of the sample ASP.NET project from ASP.NET RowSpan GridView Sample Project Source Codes.