C1TreeView を XML に連結する

このチュートリアルでは、Visual Studio のインストール済みテンプレートにより XML ファイルを作成し、XML データソースコンポーネントを Web サイトに追加してそれを C1TreeView に割り当て、さらに C1TreeView の連結を設定する方法を示します。

次の手順を実行します。

ツールボックスにて C1TreeView をダブルクリックして、コントロールをプロジェクトに追加します。
下記の手順でXMLファイルを作成します。:

ソリューションエクスプローラで App_Data を右クリックし、［新しい項目の追加］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。

XML ファイルを選択し、その名前を TreeView_Hierarchy.xml に変更します。

XML ビューに切り替えて、次のデータを TreeView_Hierarchy.xml に追加します。

ソースビュー	コードのコピー
<?xml version="1.0" encoding="utf-8" ?> <root> <TreeViewNode Text="ホーム"> <TreeViewNode Text="会社概要"></TreeViewNode> <TreeViewNode Text="ご挨拶"></TreeViewNode> <TreeViewNode Text="国内拠点"></TreeViewNode> </TreeViewNode> <TreeViewNode Text="製品"> <TreeViewNode Text="ハードウェア"></TreeViewNode> <TreeViewNode Text="ソフトウェア"></TreeViewNode> </TreeViewNode> <TreeViewNode Text="サービス"> <TreeViewNode Text="トレーニング"></TreeViewNode> <TreeViewNode Text="コンサルティング"></TreeViewNode> </TreeViewNode> </root>

ソースビュー

コードのコピー

<?xml version="1.0" encoding="utf-8" ?>
<root>
<TreeViewNode Text="ホーム">
    <TreeViewNode Text="会社概要"></TreeViewNode>
    <TreeViewNode Text="ご挨拶"></TreeViewNode>
    <TreeViewNode Text="国内拠点"></TreeViewNode>
</TreeViewNode>
<TreeViewNode Text="製品">
    <TreeViewNode Text="ハードウェア"></TreeViewNode>
    <TreeViewNode Text="ソフトウェア"></TreeViewNode>
</TreeViewNode>
<TreeViewNode Text="サービス">
    <TreeViewNode Text="トレーニング"></TreeViewNode>
    <TreeViewNode Text="コンサルティング"></TreeViewNode>
</TreeViewNode>
</root>

.aspx ページに戻り、「デザイン 」タブを選択してデザインビューに切り替えます。下記の手順に従い、新しいデータソースを作成します。
1. C1TreeView のスマートタグをクリックして[C1TreeView タスク]メニューを開き、[データソースの選択]ドロップダウンから[新しいデータソース…]を選択します。
2. [データソース構成ウィザード]が開きます。
3. XMLファイルを選択して、〈OK〉をクリックします。
XmlDataSource1 がプロジェクトに追加されます。
下記の手順でデータソースを構成します。
1. C1TreeView のスマートタグをクリックして[C1TreeView タスク]メニューを開き、[データソースの構成]をクリックします。
  [データソースの構成]ダイアログボックスが開きます。
2. Xpath 式のテキストフィールドにて、「root/TreeViewNode」を入力します。これは、ルートの子となっているすべてのを選択しますので、TreeViewNodes がウェブページの最上位ノードとなります。
3. プロパティウィンドウで、DataFile プロパティの隣にある〈...〉ボタンをクリックし、［XML ファイルの選択］ダイアログボックスを開きます。
4. App_Data プロジェクトフォルダを選択して、[フォルダの内容] ペインから TreeView_Hierarchy.xml を選択します。
5. 〈OK〉をクリックして［XML ファイルの選択］ダイアログボックスを閉じます。
6. 〈OK〉をクリックして[データソースの構成]ダイアログボックスを閉じます。
C1TreeViewNodes に XML タグを連結するには、次の手順を実行します。
1. C1TreeViewのスマートタグをクリックして[C1TreeView タスク]メニューを開き、［データバインディングの編集］を選択します。
  バインディングコレクションエディタが表示されます。
2. プロジェクトに空白の連結を追加するには[追加]をクリックします。
3. 連結プロパティを下記のように設定します。
  - DataMember プロパティを「TreeViewNode」に設定します。
  - TextField プロパティを「Text」に設定します。
4. 〈OK〉をクリックして［バインディングコレクションエディタ］ダイアログボックスを閉じます。
[F5]キーを押してプロジェクトを実行します。
TreeView_Hierarchy.xml ファイルのデータがC1TreeView コントロールに反映されていることを確認してくさい。