Today we will create multilevel grid in simplest manner. So here I go.
Here for example I am taking northwind database and our requirment is to determine Category & its products.
Means category is parent and product is chid.Now here are some basic steps just follow it and you will get hierachical grid.
Step 1:- Drag drop a dataGrid on page and define column according to your need.
@@asp:DataGrid ID=”dgCategoryParent” runat=”server” AutoGenerateColumns=”False$$
@@Columns$$
@@asp:BoundColumn DataField=”CategoryId” Visible=”false”@@ @@/asp:BoundColumn$$
@@asp:TemplateColumn$$
@@HeaderTemplate$$
@@table border=”1″ width=”100%”$$
@@tr$$
@@td width=”1″$$ @@/td$$
@@td$$ Category @@/td$$
@@td$$Description @@/td$$
@@/tr$$
@@/table$$
@@/HeaderTemplate$$
@@ItemTemplate$$
@@table border=”1″ width=”100%”$$
@@tr$$ @@td width=”1″$$ @@asp:Button ID=”btnTest” runat=”server” Text=”+” /$$
@@/td$$td$$
@@asp:Label ID=”lblCategory” runat=”server” Text=’@@%# DataBinder.Eval(Container, “DataItem.CategoryName”) %$$’$$ @@/asp:Label$$
@@/td$$
@@td$$
@@asp:Label ID=”lblDescription” runat=”server” Text=’@@%# DataBinder.Eval(Container, “DataItem.Description”) %$$’$$@@/asp:Label$$
@@/td$$
@@/tr$$
@@tr$$
@@td colspan=”3″$$
@@asp:DataGrid ID=”dgProductChild” runat=”server” AutoGenerateColumns=”false” CellPadding=”4″
ForeColor=”#333333″ GridLines=”Both” $$
@@FooterStyle BackColor=”#5D7B9D” Font-Bold=”True” ForeColor=”White” /$$
@@EditItemStyle BackColor=”#999999″ /$$
@@SelectedItemStyle BackColor=”#E2DED6″ Font-Bold=”True” ForeColor=”#333333″ /$$
@@PagerStyle BackColor=”#284775″ ForeColor=”White” HorizontalAlign=”Center” /$$
@@AlternatingItemStyle BackColor=”White” ForeColor=”#284775″ /$$
@@ItemStyle BackColor=”#F7F6F3″ ForeColor=”#333333″ /$$
@@Columns$$
@@asp:BoundColumn DataField=”productName” HeaderText=”Product”$$@@/asp:BoundColumn$$
@@asp:BoundColumn DataField=”UnitPrice” HeaderText=”Unit price”$$@@/asp:BoundColumn$$
@@asp:BoundColumn DataField=”Quantityperunit” HeaderText=”Quantity per unit”$$@@/asp:BoundColumn$$
@@/Columns$$
@@/asp:DataGrid$$
@@/td$$
@@/tr$$
@@/table$$
@@/ItemTemplate$$
@@/asp:TemplateColumn$$
@@/Columns$$
@@HeaderStyle BackColor=”#5D7B9D” Font-Bold=”True” ForeColor=”White” /$$
@@/asp:DataGrid$$
Step 2:-
Now step 2 is to bindGrid for this we have wrote following code.
Remember here we just binding our first data which is related to parent means “Category”
Dim sqlcon As New SqlConnection(strCONNECTIONSTRING)
sqlcon.Open()
Dim sqlcmd As New SqlCommand
sqlcmd.CommandText = "SELECT categoryId,categoryName,description FROM categories"
sqlcmd.CommandType = CommandType.Text
sqlcmd.Connection = sqlcon
Dim ds As New DataSet
Dim sda As New SqlDataAdapter
sda.SelectCommand = sqlcmd
sda.Fill(ds)
Me.dgCategoryParent.DataSource = ds
Me.dgCategoryParent.DataBind()
sqlcon.Close()
sqlcon = Nothing
Step 3:- Now as we now there is row data Bound event on this event our action is to bind
So just find the child control ” product DataGrid ” and bind it. As shown below
Protected Sub dgCategoryParent_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgCategoryParent.ItemDataBound
Try
Dim blnBind As Boolean = False
Select Case e.Item.ItemType
Case ListItemType.Item
blnBind = True
Case ListItemType.AlternatingItem
blnBind = True
Case Else
blnBind = False
End Select
If blnBind = True Then
Dim intId As Integer = e.Item.Cells(0).Text
Dim MyGrid As DataGrid
Dim mybtn As Button
mybtn = CType(e.Item.FindControl("btnTest"), Button)
MyGrid = CType(e.Item.FindControl("dgProductChild"), DataGrid)
If MyGrid Is Nothing = False AndAlso mybtn Is Nothing = False Then
mybtn.Attributes.Add("Onclick", "javascript: return myvisiblity('" & mybtn.ClientID & "','" & MyGrid.ClientID & "')")
Me.pvtBindProductForCategory(intId, MyGrid)
End If
End If
Catch ex As Exception
Throw ex
End Try
End Sub
Step 4:- more over if you want collapse property than add a button on main row and apply java script on it. see below function for it
myvisiblity(str, gridId) { var myBtn1 = document.getElementById(str) var mygrid1 = document.getElementById(gridId); if (myBtn1.value == "+") { mygrid1.style.display = 'none'; myBtn1.value = "-"; } else { mygrid1.style.display = 'block'; myBtn1.value = "+"; } return false; }
You will find a collasible datagrid.
Step 5 : here is your final output
I hope you understand the startegy here.
You can download code at
Enjoy programming!
Thanks & Esteemed Regards
Rajat Jaiswal
