wj-flex-grid-detail ディレクティブは、 wj-flex-grid ディレクティブ内に記述する必要があります。

wj-flex-grid-detail ディレクティブは、詳細行の表示/非表示設定を保持する FlexGridDetailProvider オブジェクトと、ディレクティブタグ内で任意のHTMLフラグメントとして定義された詳細行の内容を表します。 このフラグメントにはAngularJSバインディングおよびディレクティブを含めることができます。 コントローラーで使用可能なプロパティに加えて、ローカルの $row および $item テンプレート変数をAngularJSバインディングで使用して詳細行の親 Row と Row.dataItem オブジェクトを参照できます。次に例を示します。

<p>FlexGridが入れ子になった詳細行:</p>
 
<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>

wj-flex-grid-detailディレクティブによって表されるFlexGridDetailProviderオブジェクトへの参照は、 通常どおりディレクティブのcontrolプロパティにバインドすることによって取得できます。これにより、 FlexGridDetailProviderによって提供されるすべてのAPIをテンプレートで使用できるため、ユーザーエクスペリエンスを 完全にコントロールできます。以下の例では、Name列のセルにカスタムの表示/非表示トグルを追加し、 詳細行に［Hide Detail］ボタンを追加します。これらの要素がクリックされたときにng-clickバインディングで 指定したFlexGridDetailProviderのhideDetailおよびshowDetailメソッドを呼び出すことで、カスタム の表示/非表示ロジックを実装しています。

<p>詳細行を表示/非表示にするカスタム要素を持つFlexGrid:</p>
 
<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">
    <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>

wj-flex-grid-detail ディレクティブは以下の属性をサポートしています。

control

= wj-flex-grid-detailディレクティブは以下の属性をサポートしています。

detail-visibility-mode

@行の詳細をいつ表示するかを決定するDetailVisibilityMode 値。

max-height

@詳細行の最大の高さ（ピクセル単位）。

row-has-detail

=行が詳細を持つかどうかを決定するコールバック関数。