バージョン

WebHierarchcialDataSource にバインド

始める前に

WebExplorerBar™ は階層データ ソースにバインドでき、データ階層の各レベルを表示します。最上位のレベルはさまざまなグループを表し、各子レベルは項目を表します。

達成すること

AccessDataSource コンポーネントを使用して WebExplorerBar を WebHierarchicalDataSource コンポーネントにバインドする方法を学習します。

以下の手順を実行します

  1. Visual Studio™ ツールボックスから Web ページに ScriptManager コンポーネントをドラッグします。

  2. WebExplorerBar コントロールをページにドラッグします。

  3. WebHierarchicalDataSource コンポーネントをページにドラッグします。

  4. Nortwind データベースから Categories および Products データを取得するために、2 つの AccessDataSource コンポーネントを使用するように WebHierarchicalDataSource を設定します。WebHierarchicalDataSource を使用するために詳細なガイドが必要な場合には、 WebHierarchicalDataSource で開始を参照してください。WebHierarchicalDataSource コンポーネントを設定した後は、以下のマークアップができます。

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>

注: 明確にするために、データ ビューの ID プロパティは、WebHierarchicalDataSource によって設定されるデフォルト値から変更されました。

  1. WebExplorerBar の DataSourceID プロパティを、WebHierarchicalDataSource コンポーネントの ID である WebHierarchicalDataSource1 に設定します。

  2. WebExplorerBar の項目にデータ バインドを設定して、Categories データ ビューと Products データ ビューの CategoryName プロパティと ProductName プロパティをそれぞれ表示します。

    1. ExplorerBarItemBinding オブジェクトを DataBindings コレクションに追加します。

    2. DataMember プロパティを CategoriesDataview に設定します。

    3. TextField プロパティを CategoryName に設定します。

    4. もうひとつの ExplorerBarItemBinding オブジェクトをコレクションに追加します。

    5. DataMember を ProductsDataview に、TextField を ProductName に設定します。

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>
  1. アプリケーションを実行します。WebExplorerBar コントロールはバインドされる階層データ ソースに基づいてグループと項目を表示します。

WebExplorerBar BindingtoanHierarchicalDataSource 01.png