バージョン

リモート機能 (igTreeGrid)

igTreeGrid のデータ操作機能は、ローカル実行またはリモート実行のセットアップをサポートします。リモート実行のセットアップは、クライアントでのロードを減らす必要がある場合や、クライアントに戻す前にデータにカスタム ロジックを適用する場合に役立ちます。このトピックでは、ツリー グリッドに対するリモート操作の基本について説明します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。

  • 機能の概要 (igTreeGrid): このトピックでは、igTreeGrid コントロールで使用可能なモジュラー機能の基本について説明します。
  • フィルタリング (igTreeGrid): このトピックでは、igTreeGridFiltering による階層データの操作方法を説明します。

このトピックの内容

概要

リモート機能を使用してツリー グリッドをセットアップする場合、データ操作に AJAX 要求を使用します。ページングのようなリモート機能は、最初に igTreeGrid をデータ全体にバインドせずに非常に大きなセットを扱うことができるため、パフォーマンスが大きく向上します。また、データ セットがメモリで処理されます。また、処理中状態のサーバー側の制御があるため、操作の結果にカスタム ロジックを適用できます。

リモート操作を実行できる機能として、並べ替え、フィルタリング、ページングがサポートされています。

リモート機能を使用するには、並べ替え、フィルター、ページング機能を実行するコントローラー アクション メソッドが TreeGridDataSourceAction 属性を持つ必要があります。それだけを実装します。TreeGridDataSourceAction はその他の実装を処理します。その場合、要求は Ignite UI for MVC Grid によって処理されます。パラメーターを自動的に要求に追加し、適切な書式設定でデータを返します。 

    [TreeGridDataSourceAction]
    public ActionResult GetData()
    {
        List<MyEmployeeHierarchical> emp = GenerateEmployees();
        return View("Index", emp.AsQueryable());
    }

リモート機能のその他の利点は、展開状態がユーザー操作間で永続化されることです。たとえば、ユーザーが最初のページでノードを展開し、2 番目のページに移動し、最初のページに戻る場合、最初のページのノードの展開状態が永続化されます。フィルターまたは並べ替え機能と同じです。

要求フォーマット

すべての機能は、追加データの要求に対して同じ dataSourceUrl エンドポイント アドレス (ロード オン デマンド でも使用) を共有します。複数のリモート機能のカスタム バックエンド実装がある場合、提供されたパラメーターを読み込み、要求の複数のタイプを処理する必要があります。

要求をバックエンドで動的に処理する場合、操作の論理順序を保存する必要があります。たとえば、フィルターのデータ変換を最初に適用して、次に並べ替えを実行して、ページ サイズの変更を最後に実行できます。

Ignite UI for MVC でフラット データへのバインド

igTreeGrid が MVC ラッパーによってフラット自己参照データにバインドできます。親子関係は PrimaryKey および ForeignKey オプションによって定義されます。フラット データは、クライアント側に送信される前に、PrimaryKey および ForeignKey の関係に基づいて内部に階層データに解析されます。データの自己参照表にバインドし、階層構造に変換しない場合に便利です。

ただし、このデータ変換はパフォーマンスに影響します。特定の操作でデータ ソースへのリモート要求をトリガーするリモート機能と結合すると特にパフォーマンスに影響します。この場合にパフォーマンスを最適化するには、フラット データを階層データに一度変換できます。 TreeGridModel の公開用 TransformFlatToHierarchicalData メソッドを使用して、次の要求に使用するためにデータをキャッシュします。 

    public ActionResult GetData()
    {
        TreeGridModel model = GetTreeGridModel();
        IQueryable<Employee> empl = GetEmployeeData();
        IList data = model.TransformFlatToHierarchicalData(empl);
        ...
    }

注: このシナリオで、ChildDataKey オプションを現在のデータ モデルの ICollection 型の既存のオブジェクトに設定することが必要です。更に、ForeignKey 値に基づいてルート行として操作するデータ ソースの行を指定する ForeignKeyRootValue オプションを設定する必要があります。

機能固有の詳細

固有なパラメーターに加えて、データ全体への直接アクセスなしで機能が正しく動作するためには、返されるデータにも固有な要件があります。また、各機能はローカル操作用またはリモート操作用に個別に構成できますが、データの限定されたサブセット (ページ) に対するローカル機能の動作は、ユーザーの期待する動作と異なる場合があります。その理由から、リモート改ページが関係する多くの場合で、その他の操作も同じくリモートで処理されます。

リモート フィルタリング

type 機能オプションを 'remote' に設定することにより、リモート操作を有効にします。フィルタリングのためのデータ要求では、少なくとも 1 つの filter(<property>) スタイル パラメーターを指定します。Advanced mode が有効な場合、filterLogic 条件付き演算子は、基準がすべて一致する必要がある ("AND")、またはいずれか 1 つで充分である ("OR") の指定も送信します。要求の fromLevel および toLevel パラメーターは、igTreeGrid のフィルタリングの開始レベルおよび終了レベルを指定します。以下のようになります。

http://<SERVER>/TreeGrid/GetData?filter(EmployeeID)=equals(3)&filterLogic=AND&filtering.fromLevel=0&filtering.toLevel=-1&__matchFiltering=__matchFiltering&filtering.displayMode=showWithAncestors&pk=EmployeeID&propertyDataLevel=__ig_options.dataLevel&propertyExpanded=__ig_options.expanded&childDataKey=Employees&initialExpandDepth=-1&_=1437122016866

可能な条件の完全なリストは、API の使用 (igGrid Filtering) のトピックを参照してください。簡易モードでは、基準ロジックをユーザーが制御することはなく、静的であるため (通常、デフォルトは条件付き AND)、filterLogic パラメーターは省略されます。通常、サーバー側は初期ツリー グリッド モデルを確認するために、それに対してアクセスします。

応答のためのデータを準備する場合、データのどの部分が実際に一致するかフィルタリングする際の処理を matchFiltering プロパティで設定しておく必要があります。また、初期モデルの定義済み表示モードとレベル制限にも従う必要があります。

フィルター応答は以下のようになります。

Metadata: {timezoneOffset: 10800000, filtering.countRecords: 1}
filtering.countRecords: 1
timezoneOffset: 10800000
Records: [{EmployeeID: 2, FirstName: "Name 1", LastName: "Last Name 1", Level: "Level:0",…}]
0: {EmployeeID: 2, FirstName: "Name 1", LastName: "Last Name 1", Level: "Level:0",…}
TotalRecordsCount: 0

関連トピック: リモート フィルタリング (igGrid)

リモート並べ替え

type 機能オプションを 'remote' に設定することにより、リモート操作を有効にします。AJAX 要求は少なくとも 1 つの sort(<propertyName>) スタイル パラメーターを持ち (mode に応じて)、各オブジェクト プロパティの並べ替え方向を昇順または降順のいずれかに定義します。並べ替えを実行する開始レベル (fromLevel) および終了レベル (toLevel) を定義する 2 つのパラメーターがあります。

http://<SERVER>/TreeGrid/GetData?sort(EmployeeID)=asc&sorting.fromLevel=0&sorting.toLevel=-1&pk=EmployeeID&propertyDataLevel=__ig_options.dataLevel&propertyExpanded=__ig_options.expanded&childDataKey=Employees&initialExpandDepth=-1&_=1437123084738

関連トピック: リモート並べ替え (igGrid)

リモート ページング

type 機能オプションを 'remote' に設定することにより、リモート操作を有効にします。リモート操作を有効にするには、type 機能オプションを 'remote' に設定します。リモート ページング操作は次のパラメーターを使用します。page はユーザーが要求されるページ インデックスです。pageSize はページの行数です。listExpanisonStates[2] は展開状態についての情報を保存します。ノードが展開/縮小される度にこのプロパティを更新し、ユーザー操作間で状態を永続化するための要求が送信されます。

http://<SERVER>/TreeGrid/GetData?page=1&pageSize=5&paging.mode=allLevels&paging.contextRowMode=none&pk=EmployeeID&listExpansionStates%5B2%5D=false&propertyDataLevel=__ig_options.dataLevel&propertyExpanded=__ig_options.expanded&childDataKey=Employees&initialExpandDepth=-1&_=1437129614152

パフォーマンスについての考慮

アプリケーションで SQL エンドポイントがある場合、SQL への呼び出しの数を減らしてパフォーマンスを向上するには、データをキャッシュできます。

関連トピック: リモート ページング (igGrid)

関連コンテンツ

トピック

  • 機能の概要 (igTreeGrid): このトピックでは、igTreeGrid コントロールで使用可能なモジュラー機能の基本について説明します。

サンプル

オンラインで表示: GitHub