In order to complete this walkthrough, you will need the following:

• Access to the Microsoft Access NorthWind database.
• Visual Studio 2003 Application.

1. Binding Hierarchical DataSource to WebGrid.
2. Drag OleDbDataAdapter from Data tab to the WebForm.
3. Click Next until Generate SQL statements page, type in SELECT * FROM PRODUCTS in the textbox and click Next then Finish. Right click the newly created oleDbDataAdapter and select Generate DataSet, click OK.
4. Rename the oleDbDataAdapter object to daProducts.
5. Switch to HTML View and add the event OnInitializeLayout="WebGrid1_InitLayout" inside the <ISWebGrid:WebGrid id="WebGrid1" ... tag.
6. Now open the code-behind editor by right clicking on the page and click View Code.
7. Add using ISNet.WebUI.WebGrid; at the top of the code-behind page.
8. Add following C# code:
   

   C#

   Copy Code

   protected void WebGrid1_InitLayout(object sender, ISNet.WebUI.WebGrid.LayoutEventArgs e) { // set valuelist for ShipVia WebValueList vlShipVia = WebGrid1.GetTableByName("Orders").Columns.GetNamedItem("ShipVia").ValueList; Hashtable htShipVia = new Hashtable(); htShipVia.Add("1", "Speedy Express"); htShipVia.Add("2", "United Package"); htShipVia.Add("3", "Federal Shipping"); vlShipVia.DataSource = htShipVia; // set valuelist for Products WebValueList vlProd = WebGrid1.GetTableByName("Order Details").Columns.GetNamedItem("ProductID").ValueList; if (!vlProd.IsDataCached()) { daProducts.Fill(dsNorthWind1.Products); vlProd.DataSource = dsNorthWind1; } vlProd.SetDataSource("Products", "ProductName","ProductID"); }

9. Set the WebGrid's Width to 600px, Height to 300px for larger display.
10. Open WebGrid.NET Designer, expand RootTable, expand ChildTables, expand Orders table and select its Columns.
11. Move the ShipVia column to the third column from the top.
12. Click OK to apply all settings.
13. Compile and run the WebForm.