Binding to WebHierarchcialDataSource

Before You Begin

The WebExplorerBar™ can bind to a hierarchical data source, displaying each level of the data hierarchy. The topmost level represents the different groupings, with each child level representing the items.

What You Will Accomplish

You will learn how to bind WebExplorerBar to the WebHierarchicalDataSource component using AccessDataSource components.

Follow These Steps

Drag a ScriptManager component from the Visual Studio™ Toolbox onto the web page.
Drag a WebExplorerBar control onto the page.
Drag a WebHierarchicalDataSource component onto the page.
Set the WebHierarchicalDataSource to use 2 AccessDataSource components to retrieve the Categories and Products data from Nortwind database. If you need a detailed walkthrough for using the WebHierarchicalDataSource, see Getting Started with WebHierarchicalDataSource. After setting up the WebHierarchicalDataSource component, you will have the following markup.

In HTML:

    <asp:AccessDataSource ID="CategoriesDS" runat="server" DataFile="~/App_Data/Nwind.mdb"
        SelectCommand="SELECT Categories.CategoryID, Categories.CategoryName FROM Categories ">
    </asp:AccessDataSource>
    <asp:AccessDataSource ID="ProductsDS" runat="server" DataFile="~/App_Data/Nwind.mdb"
        SelectCommand="SELECT Products.ProductID, Products.ProductName, Products.CategoryID FROM Products ">
    </asp:AccessDataSource>
    <ig:WebHierarchicalDataSource ID="whds" runat="server">
        <DataViews>
            <ig:DataView DataSourceID="CategoriesDS" ID="Categories" />
            <ig:DataView DataSourceID="ProductsDS" ID="Products" />
        </DataViews>
        <DataRelations>
            <ig:DataRelation ParentDataViewID="Categories" ParentColumns="CategoryID" ChildDataViewID="Products"
                ChildColumns="CategoryID" />
        </DataRelations>
    </ig:WebHierarchicalDataSource>

Note	Note: For clarity, the data view’s id properties have been changed from the default values set by WebHierarchicalDataSource.

Set WebExplorerBar’s DataSourceID property to WebHierarchicalDataSource1—the id of the WebHierarchicalDataSource component.
Set the data bindings for WebExplorerBar’s items to display the CategoryName and ProductName properties of the Categories data view and Products data view, respectively.
1. Add a ExplorerBarItemBinding object to the DataBindings collection.
2. Set the DataMember property to CategoriesDataview.
3. Set the TextField property to CategoryName.
4. Add another ExplorerBarItemBinding object to the collection.
5. Set the DataMember to ProductsDataview and the TextField to ProductName.

In HTML:

   <ig:WebExplorerBar GroupExpandBehavior="SingleExpanded" MaxGroupHeight="200px" DataSourceID="whds"
         InitialDataBindDepth="0" ID="WebExplorerBar1" runat="server" Width="300px">
        <DataBindings>
            <ig:ExplorerBarItemBinding DataMember="Categories" TextField="CategoryName" />
            <ig:ExplorerBarItemBinding DataMember="Products" TextField="ProductName" />
        </DataBindings>
    </ig:WebExplorerBar>

Run the application. The WebExplorerBar control displays the groups and items based on the hierarchical data source it is bound to.

WebExplorerBar BindingtoanHierarchicalDataSource 01.png

ASP.NET | Help Topics

Binding to WebHierarchcialDataSource

Before You Begin

What You Will Accomplish

Follow These Steps

Related Topics