詳細行

以下のグリッドの各行は、製品カテゴリを表します。各カテゴリの製品を確認するには、プラス記号をクリックして行を展開します。展開された行の下には、任意のコンテンツ(この例では、製品情報を含むグリッド内グリッド)を含む「詳細」行が表示されます。

詳細行は、FlexGridDetailProviderクラスを使用して実装されます。FlexGridDetailProviderクラスにはcreateDetailCell関数があり、ここで、詳細行を表示するためのHTML要素を作成します。詳細セルのコンテンツは、完全にカスタマイズできます。

createDetailCell関数のほかに、FlexGridDetailProviderクラスには、詳細行を表示するタイミング、詳細行のサイズなどをカスタマイズするためのプロパティがあります。

FlexGridDetailProviderクラスの使用

このグリッドでは、FlexGridDetailProviderクラスを直接使用します。ここでは、子グリッドを作成し、メイングリッドの行に表されているカテゴリの製品をその子グリッドに表示するように、createDetailCell関数を記述します。

コードは次のようになります。

// "flex"コントロールのためのFlexGridDetailProviderを作成します
var dp = new wijmo.grid.detail.FlexGridDetailProvider(s, {

    // use animation when showing details
    isAnimated: true,

    // limit height of detail rows
    maxHeight: 250,

    // create detail cells for a given row
    createDetailCell: function (row) {
        var cell = document.createElement('div');
        s.hostElement.appendChild(cell);
        var detailGrid = new wijmo.grid.FlexGrid(cell, {
            headersVisibility: wijmo.grid.HeadersVisibility.Column,
            autoGenerateColumns: false,
            itemsSource: $scope.getProducts(row.dataItem.CategoryID),
            columns: [
                { header: 'ID', binding: 'ProductID' },
                { header: 'Name', binding: 'ProductName' },
                { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                { header: 'Unit Price', binding: 'UnitPrice' },
                { header: 'Discontinued', binding: 'Discontinued' }
            ]
        });
        cell.parentElement.removeChild(cell);
        return cell;
    },

    // 奇数のCategoryIDを持つ項目から詳細を削除します
    rowHasDetail: function (row) {
        return row.dataItem.CategoryID % 2 == 0;
    }
});

wj-flex-grid-detailディレクティブの使用

このグリッドでは、wj-flex-grid-detailディレクティブを使用します。このディレクティブは、子FlexGridを含むテンプレートを提供します。このグリッドに、メイングリッドの行に表示されているカテゴリの製品を表示します。

マークアップは次のようになります。

<wj-flex-grid 
  items-source="categories">
  <wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
  <wj-flex-grid-detail max-height="250"  detail-visibility-mode="detailMode">
    <wj-flex-grid 
      items-source="getProducts($item.CategoryID)"
      headers-visibility="Column">
    </wj-flex-grid>
  </wj-flex-grid-detail>
</wj-flex-grid>

isAnimatedプロパティの値を選択して、行の詳細を表示するときにアニメーションを使用するかどうかを決定します。

True False

detailVisibilityModeプロパティの値を選択して、詳細行が表示されるタイミングを決定します。

Code Selection ExpandSingle ExpandMulti

wj-flex-grid-detailディレクティブともう1つのテンプレートの使用

このグリッドでは、wj-flex-grid-detailディレクティブを使用し、HTMLコンテンツとして定義されたテンプレートを指定します。このコンテンツに、ng-repeatディレクティブを使用して作成されたリストを入れます。

マークアップは次のようになります。

<wj-flex-grid 
  items-source="categories">
  <wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
  <wj-flex-grid-detail detail-visibility-mode="ExpandSingle" is-animated="true">
    ID: <b>{​{$item.CategoryID}}</b><br />
    Name: <b>{​{$item.CategoryName}}</b><br />
    Description: <b>{​{$item.Description}}</b><br />
    <ol>
      <li ng-repeat="p in getProducts($item.CategoryID).items">{​{p.ProductName}}</li>
    </ol>
  </wj-flex-grid-detail>
</wj-flex-grid>
ID:{{$item.CategoryID}}
名前:{{$item.CategoryName}}
説明:{{$item.Description}}
  1. {{p.ProductName}}

カスタム要素を使用して詳細を表示/非表示にする

wj-flex-grid-detailディレクティブには、FlexGridDetailProviderクラスのメソッドへのアクセスに使用できる"control"属性が含まれます。この例では、これらのメソッドをマークアップで使用して、詳細行の展開や折りたたみに使用するカスタムアイコンを提供します。

この方法のメリットは、詳細行の表示/非表示に使用される要素の外観や動作など、ユーザーエクスペリエンス全体を制御できることです。

マークアップは次のようになります。

<wj-flex-grid 
  items-source="categories"
  headers-visibility="Column"
  selection-mode="Row">
  <wj-flex-grid-column header="Name" binding="CategoryName" is-read-only="true" width="200">
    <img ng-show="dp.isDetailVisible($row)" ng-click="dp.hideDetail($row)" src="resources/hide.png" />
    <img ng-hide="dp.isDetailVisible($row)" ng-click="dp.showDetail($row, true)" src="resources/show.png" />
    {​{$item.CategoryName}}
  </wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="2*"></wj-flex-grid-column>
  <wj-flex-grid-detail control="dp" detail-visibility-mode="Code" is-animated="true">
    <div style="padding:12px;background-color:#cee6f7">
      ID: <b>{​{$item.CategoryID}}</b><br />
      Name: <b>{​{$item.CategoryName}}</b><br />
      Description: <b>{​{$item.Description}}</b><br />
      <button class="btn btn-default" ng-click="dp.hideDetail($row)">Hide Detail</button>
    </div>
  </wj-flex-grid-detail>
</wj-flex-grid>
{{$item.CategoryName}}
ID:{{$item.CategoryID}}
名前:{{$item.CategoryName}}
説明:{{$item.Description}}