WebHierarchicalDataGrid™ allows many features to be enabled for complex behaviors and dynamic operations. The most common use however, is to display data. Binding and displaying data with WebHierarchicalDataGrid is a simple process. It can bind to many forms of hierarchical data sources. One convenient way to obtain hierarchical data is by using WebHierarchicalDataSource™. For more information on using the WebHierarchicalDataSource component to bind to data, see Getting Started with WebHierarchicalDataSource.
You will learn how to bind WebHierarchicalDataGrid to the WebHierarchicalDataSource component using the Northwind Categories and Products table.
Create an ASP.Net web page.
Drag a ScriptManager component from the toolbox onto the page.
Drag a WebHierarchicalDataGrid control from the toolbox onto the page.
Drag a WebHierarchicalDataSource component from the toolbox onto the page.
Click WebHierarchicalDataSource’s Smart Tag and select Edit Relations. The Quick Design appears.
Click the Add View option.
Select New Data Source from the drop-down list that appears.
The Data Source Configuration Wizard appears.
Select Database.
Click OK.
WebHierarchicalDataSource adds a SqlDataSource component to the form and the Configure Data Source wizard appears for the SqlDataSource component.
Click New Connection to configure the connection string. The Add Connection dialog appears.
Set the server name to the server you are using, SQLEXPRESS in this case. Set the database to Northwind.
Click Ok. You are returned to the Configure Connection screen.
Click Next.
Select Specify Columns from a Table or View and do the following:
Choose the Categories table from the drop-down list.
In the Columns section, select CategoryID, CategoryName, and Description to display those columns.
At this point you have the option to click the Advanced button to specify that the SqlDataSource component should generate Insert, Update, and Delete statements for the data retrieved.
Click Next.
Test your query to make sure SqlDataSource retrieves your data.
Click Finish to close the configuration wizard. SqlDataSource is set up to retrieve the Categories data from the Northwind database.
Click Ok to return to the Quick Design. You will see the SqlDataSource you just added.
Click the Add Child node directly under the SqlDataSource1 node. The child configuration screen appears.
Select New Data Source in the Child DataSource drop-down list.
Repeat steps 8 – 12 for the second SqlDataSource, this time choosing the Products table with all columns selected.
Add the relation between the two data sources by selecting the columns for the relationship.
Select CategoryID in the Parent Columns drop-down list.
Select CategoryID in the Child Columns drop-down list.
Click Ok to return to the Quick Design view.
At this point, WebHierarchicalDataSource is ready to use two SQL data sources to display hierarchical data. Click Apply then Ok.
Set WebHierarchicalDataGrid’s DataSourceID property to WebHierarchicalDataSource1 in the Properties window. You will be prompted to Refresh Bands, Columns, and Keys for WebHierarchicalDataGrid.
Click Yes. This will automatically set the DataMember and Key properties to SqlDataSource1_DefaultView, which is the name of the first data view that you set up in WebHierarchicalDataSource.
Run the application. WebHierarchicalDataGrid displays a hierarchical view of the Categories and Products tables.
