Extending DataGrid in ASP.NET

During developement with DataGrid, we might come across many situations in which we need to extend DataGrid for our requirements. For example, we need to have a separate header other than the header provided by DataGrid. In that case we need to add new Datagrid item of header type to DataGrid. In this article we will see how we can extend the DataGrid for these type of requirements.

Additional Header in DataGrid

For having additional header in DataGrid, we need to add new datagrid item. For adding datagrid item without DataSource, check out this article. Consider we have DataGrid as shown below,

<asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; POSITION: absolute; TOP: 5px" runat="server" HeaderStyle-CssClass="tableheader" HeaderStyle- BackColor="#aaaadd" BorderColor="Black" ItemStyle-CssClass="tableItem" >

</asp:DataGrid>

Code behind for this datagrid is like this,

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    If Not IsPostBack() Then
        Dim oConn As New SqlConnection("Initial Catalog=Northwind;Data Source=localhost;Integrated Security=SSPI;")
        Dim sa As New SqlDataAdapter("select top 10 Productname,categoryid from products", oConn)
        Dim oDataset As New DataSet()
        sa.Fill(oDataset, "Products")
        DataGrid1.DataSource = oDataset
        DataGrid1.DataBind()
    End If

End Sub

As seen above, in this example we have simple DataGrid which is fetching data from products table and displaying that in the table structure using DataGrid. But in this DataGrid, we need to add one additional Header with text "List of Products". There are many ways to do this, here we are going to see one of the best method to do that. To have additional header, we need to add one datagriditem of header type to DataGrid. The code snippet for doing this,

Private Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemCreated
    If e.Item.ItemType = ListItemType.Header Then
            Dim dgItem As DataGridItem
            Dim dgCell As TableCell
            dgItem = New DataGridItem(0, 0, ListItemType.Header)
            dgCell = New TableCell()
            dgCell.ColumnSpan = 2
            dgItem.Cells.Add(dgCell)
            dgCell.Text = "List of Products"
            DataGrid1.Controls(0).Controls.AddAt(0, dgItem)
    End If

End Sub

Basically here we are adding one header datagriditem to DataGrid. It is clearly mentioned in above mentioned article for how to add DataGriditem to DataGrid.

Having Header (Separator) in Between Rows in DataGrid

Like having additional header, we might require to have header (separator) in between rows in DataGrid. For this requirement also we can apply the same concept for adding separator to DataGrid. Code snippet for adding header in between rows is this,

If e.Item.ItemType = ListItemType.Footer Then
            Dim dgItem As DataGridItem
            Dim dgCell As TableCell
            dgItem = New DataGridItem(6, 6, ListItemType.Header)
            dgCell = New TableCell()
            dgCell.ColumnSpan = 2
            dgItem.Cells.Add(dgCell)
            dgCell.Text = "Food Products"
            DataGrid1.Controls(0).Controls.AddAt(6, dgItem)
End If

With Separator and Additional Header, DataGrid will like this

Conclusion

With this concept, you can extend DataGrid for whatever requirement. Key concept behind this example is adding datagrid item to datagrid. This datagrid item has to be added before the DataGrid is bounded to DataSource, otherwise it wont come in the UI till it bounded back again with datasource. Other important thing while adding is that position of DataGrid item, before creating 5 items in DataGrid we cant add datagrid item to 5th position. Thatswhy in this example also, i added the 6th datagrid item after all the items are created in DataGrid( adding after footer is created).