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).
|