WebHierarchicalDataGrid™ によって、多くの機能を有効にし、複雑な動作や動的操作を実行できます。ただし最も一般的に使用するのはデータを表示するためです。WebHierarchicalDataGrid を使用したデータバインドと表示は簡単なプロセスです。これは多くの形態の階層データソースにバインドできます。階層データを取得する便利な方法の 1 つは、WebHierarchicalDataSource™ を使用することです。WebHierarchicalDataSource コンポーネントを使用してデータにバインドする方法の詳細は、 WebHierarchicalDataSource を使用した作業の開始を参照してください。
Northwind Categories および Products テーブルを使用して WebHierarchicalDataGrid を WebHierarchicalDataSource コンポーネントにバインドする方法を学習します。
ASP.NET Web ページを作成します。
ツールボックスからページに ScriptManager コンポーネントをドラッグします。
ツールボックスからページに WebHierarchicalDataGrid コントロールをドラッグします。
ツールボックスからページに WebHierarchicalDataSource コンポーネントをドラッグします。
注: WebHierarchicalDataSource の設定方法を既に理解している場合、このコンポーネントを設定して親子関係を持つ Categories および Products データを取得し、手順 26 に進んでください。
WebHierarchicalDataSource のスマート タグをクリックして、[リレーションシップの編集] を選択します。クイック デザインが表示します。
[ビューの追加] オプションをクリックします。
表示するドロップダウン リストから [新しいデータ ソース] を選択します。
注: この時点でページにおいてデータ ソースがすぐに使用可能になっている場合には、これらのデータ ソースはドロップダウン リストに表示されます。データ ソースに複数のビューがある場合には、DataView ドロップダウン リストで選択可能です。
[データ ソース構成] ウィザードが表示します。
[データベース] を選択します。
[OK] をクリックします。
WebHierarchicalDataSource は SqlDataSource コンポーネントをフォームに追加すると、[データソースの構成] ウィザードが SqlDataSource コンポーネントのために表示します。
[新しい接続] をクリックして接続文字列を構成します。[接続を追加] ダイアログが表示します。
この場合、使用しているサーバー、SQLEXPRESS にサーバー名を指定します。データベースを Northwind に設定します。
[OK] をクリックします。[接続の構成] 画面に戻ります。
[次へ] をクリックします。
[テーブル] または [ビュー] から [列の指定] を選択し以下を実行します:
ドロップダウン リストから Categories テーブルを選択します。
[列] セクションで、CategoryID、CategoryName、および Description を選択してこれらの列を表示します。
この時点で、SqlDataSource コンポーネントが取得されたデータの Insert、Update および Delete ステートメントを生成することを指定するために [詳細] ボタンをクリックするオプションがあります。
[次へ] をクリックします。
SqlDataSource がデータを取得することを保証するためにクエリをテストします。
[完了] をクリックして構成ウィザードを閉じます。SqlDataSource は Northwind データベースから Categories データを取得するように設定されます。
[OK] をクリックして、クイック デザインに戻ります。追加したばかりの SqlDataSource を確認します。
SqlDataSource1 ノードの真下にある Add Child ノードをクリックします。子の構成画面が表示します。
注: 追加されたデータ ソースと同じレベルにある Add View リンクをクリックすることによって、この時点で既存のデータ ソースの兄弟ノードを追加することも可能です。
[子データ ソース] ドロップダウン リストで [新しいデータ ソース] を選択します。
注: この時点で、最初のデータ ソースを選択して自己関係的なビューを作成することもできます。詳細は、 自己関係的なデータ関係の作成を参照してください。
二番目の SqlDataSource で手順 8-12 を繰り返しますが、今回はすべての列を選択して Products テーブルを選択します。
関係のための列を選択することによって、2 つのデータ ソースの間の関係を追加します。
[親列] ドロップダウン リストで [CategoryID] を選択します。
[子列] ドロップダウン リストで [CategoryID] を選択します。
注: 複合キーに基づいて追加の列を選択することによって、テーブルを関連付けることができます。詳細は、 複合キーの関係を追加を参照してください。
[OK] をクリックして、クイック デザイン ビューに戻ります。
この時点で、WebHierarchicalDataSource は 2 つの SQL データ ソースを使用して階層データを表示する準備ができました。[適用]、そして [OK] をクリックします。
WebHierarchicalDataGrid の DataSourceID プロパティを [プロパティ] ウィンドウで WebHierarchicalDataSource1 に設定します。WebHierarchicalDataGrid のバンド、列、およびキーを更新しますか?とプロンプトされます。
[はい] をクリックします。これで DataMember および Key プロパティが、WebHierarchicalDataSource でユーザーが設定する最初のデータ表示の名前である SqlDataSource1_DefaultView に自動的に設定されます。
アプリケーションを実行します。WebHierarchicalDataGrid は、Categories および Products テーブルの階層表示を表示します。
