階層グリッドを作成する

最終更新日: 2011年6月16日

適用対象: SharePoint Foundation 2010

ここでは階層 JS グリッド コントロールを作成する方法について説明します。このトピックは、「[方法] 基本の JS グリッドを作成する」で完了したプロジェクトに基づいています。

注意

ユーザーのコンピューターでは、以下の説明の中の Visual Studio ユーザー インターフェイス要素とは異なる名前あるいは場所が表示されていることがあります。ユーザーの Visual Studio エディションと、使用する設定によって、これらの要素が決定されます。

前提条件

注意

ここでの説明手順は、Visual Studio 2010 を使用せずに行うことができますが、Visual Studio 2010 と Microsoft Visual Studio 2010 の SharePoint 開発者ツールを使用するほうが簡単です。

階層グリッドを作成する

EnableHierarchy(DataTable, String, String, Boolean) を呼び出して、階層グリッドを作成します。メソッドには親キー列とアウトライン テキスト列が必要です。この親キー列およびアウトライン テキスト列は、「[方法] 基本の JS グリッドを作成する」で作成された GridData.cs ファイルおよび GridUtilities.cs ファイルに既に含まれています。あとは、階層を有効にするだけです。

階層グリッドを作成するには

  1. Microsoft Visual Studio 2010 の SharePoint 開発者ツールで、「[方法] 基本の JS グリッドを作成する」の手順に従って作成された JSGrid プロジェクトを開きます。

  2. JsGridWebPartUserControl.ascx.cs を開きます。

  3. Page_Load メソッド内で、グリッド コントローラーを定義した直後に、EnableHierarchy(DataTable, String, String, Boolean) を使用して階層を有効にします。

    _grid.JSControllerClassName = "GanttManager";
    gds.EnableHierarchy(null, "HierarchyParentKey", "Title", false);
    

    最初の引数は、null ではない場合、フィルターされていないデータ テーブルを定義します。2 番目の引数は、GridData.cs で定義された階層親キー列 HierarchyParentKey です。3 番目のパラメーターは、どの列が階層インジケーターを表示するかを示しています (ここでは Title 列で、GridData.cs で定義されています)。最後のパラメーターは、true の場合、フィルターされていないデータ テーブルがクライアントに渡されることを示します。簡単にするために、この例では、フィルターされていないデータ テーブルは使用されていません。

  4. GridUtilities.cs の HierarchyParentKey および Title の定義を確認します。

    GridUtilities.cs を開きます。

    GridUtilities.cs では、HierarchyParentKey は表示されません。列は表示されますが、フィールドは表示されないことを忘れないでください。このような理由から、GridUtilities.cs で、HierarchyParentKey が表示されていないことを確認します。

    if (iterator.ColumnName != "Key"
                        && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                        && iterator.ColumnName != "HierarchyParentKey"
                        && iterator.ColumnName.Substring(0, 5) != "costq"
                        && iterator.ColumnName.Substring(0, 5) != "Quart")
    
  5. GridData.cs を開き、GridData.cs の HierarchyParentKey および Title の定義を確認します。

    DataTable メソッドで Title 列および HierarchyParentKey 列が追加されます。

    data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); // Hierarchial Grid
    data.Columns.Add(new DataColumn("Title", typeof(string)));
    

    DataTable メソッドで、コードによって、HierarchyParentKey 列と Title 列にデータが設定されることを確認します。

         // used for the hierarchy grid how-to.
                  dr["Key"] = curKey;
                    if (i % 10 == 0)
                    {
                        parent = curKey;
                        j++;
                    }
                    if (parent.HasValue)
                    {
                        dr["HierarchyParentKey"] = parent.Value;
                    }
                    if (parent == null)
                    {
                        parent = curKey;
                    }
                    dr["Tasks"] = "Task " + j + "." + i % 10;
    

    この例では、モジュール演算子を使用して、主タスクごとに 10 個の副タスクを作成しています。1.1、1.2、1.3 など、タスク番号は Title 列に格納されます。

GridData.cs および GridUtilities.cs の完全なリストについては、「[方法] 基本の JS グリッドを作成する」を参照してください。

Web パーツをテストするには

  1. Visual Studio で、F5 キーを押してプロジェクトを実行します。

    プロジェクトを実行すると、展開が行われ、SharePoint 2010 サイトが開きます。Web パーツは、SharePoint 2010 Web パーツ ギャラリーに自動的に追加されます。

  2. 任意の Web パーツ ページを開いて編集します。Web パーツは、任意の Web パーツ ページに追加することができます。

  3. [挿入]、[Web パーツ] の順にクリックし、カスタム カテゴリから [JSWebPart] を選択します。Web パーツがページ上に表示されます。

関連項目

参照

EnableHierarchy(DataTable, String, String, Boolean)