Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Getting Started with WebHierarchicalDataSource

Before You Begin

The WebHierarchicalDataSource™ component allows you to use a variety of data sources as the data source for a data-bound control such as the WebHierarchicalDataGrid™. You can add data relations to WebHierarchicalDataSource – a powerful and flexible technique to display hierarchical data or combine different data sources.

What You Will Accomplish

You will learn how to display a hierarchical view in the WebHierarchicalDataGrid using the WebHierarchicalDataSource component and two SQL Data Sources.

Follow These Steps

  1. Create an ASP.Net web page.

  2. Drag a ScriptManager component from the toolbox onto the page.

  3. Drag a WebHierarchicalDataGrid control from the toolbox onto the page.

  4. Drag a WebHierarchicalDataSource component from the toolbox onto the page.

  5. Click WebHierarchicalDataSource’s Smart Tag and select 'Configure DataSource'. The Quick Design appears.

WebHierarchicalDataSource Getting Started with WebHierarchicalDatasource 011.png

  1. Click the Add View option.

  2. Select New Data Source from the drop-down list that appears.

Note
Note:

If you have data sources readily available on your page at this time, these data sources will appear in the drop-down list. If you have multiple views in a data source, they are selectable in the DataView drop-down list.

The Data Source Configuration Wizard appears.

WebHierarchicalDataSource Getting Started with WebHierarchicalDatasource 02.png

  1. Select Database.

  2. Click Ok.

  3. WebHierarchicalDataSource adds a SqlDataSource component to the form and the Configure Data Source wizard appears for the SqlDataSource component.

  4. Configure the data source to retrieve the Regions table with all columns selected from the Northwind database.

  5. Click Ok to return to the Quick Design. You will see the SqlDataSource you just added.

WebHierarchicalDataSource Getting Started with WebHierarchicalDatasource 033.png

  1. Click the Add Child node directly under the SqlDataSource1 node. The child configuration screen appears.

Note
Note:

You can also add a sibling node for the existing data source at this point by clicking on the Add View link at the same level of the added data source.

  1. Select New Data Source in the Child DataSource drop-down list.

Note
Note:

At this point, you can also select the first data source to create a self-related view. For more information, see Creating a Self-Related Data Relation.

  1. Repeat steps 8 – 12 for the second SqlDataSource, this time choosing the Territory table with all columns selected.

  2. Add the relation between the two data sources by selecting the columns for the relationship.

    1. Select RegionID in the Parent Columns drop-down list.

    2. Select RegionID in the Child Columns drop-down list.

WebHierarchicalDataSource Getting Started with WebHierarchicalDatasource 044.png
Note
Note:

You can relate tables by selecting additional columns based on a composite key. For more information, see Add a Composite Key Relationship.

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

  • In the properties window for the WebHierarchicalDataGrid, set the DataSourceId to the id of WebHierarchicalDataSource.

  • Run the application. The WebHierarchicalDataGrid displays a hierarchical view of the Region data with its associated Territory data for each Region.