Interops
Angular
Grid
5.20241.9
wijmo.angular.grid Class WjFlexGridCellTemplate Wijmo API クラス

WjFlexGridCellTemplate クラス

FlexGrid セルテンプレートに対応するAngularJS ディレクティブ。

wj-flex-grid-cell-template はFlexGrid の特定のセルタイプ用のテンプレートを定義するディレクティブであり、 CellTemplateType を指定するcell-type> 属性 を含める必要があります。 テンプレートのセルタイプに応じて、 wj-flex-grid-cell-template ディレクティブは wijmo.angular.grid.WjFlexGrid または wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。

列固有のセルテンプレートは wj-flex-grid-column ディレクティブに含める必要があり、 列固有でないセル（行ヘッダセルや左上セルなど）のテンプレートは wj-flex-grid directive ディレクティブに含める必要があります。

wj-flex-grid-cell-template ディレクティブには、HTMLフラグメントに加えて、 セルの条件付き書式を提供する ng-style または ng-class 属性を含めることができます。

ng-style/ng-class 属性とHTMLフラグメントのどちらにおいても $col、 $row 、$item の各テンプレート変数を使用できます。 これらはそれぞれ、そのセルに関係するRow オブジェクト、 Row.dataItem オブジェクトを参照します。

Group や CellEditなどのセルタイプでは、書式設定されていないセル値を含む $value変数も提供されます。 たとえば、以下のFlexGridコントロールには行ヘッダ用のテンプレートと Country列の通常セルおよび列ヘッダセル用のテンプレートが設定されています。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeader">
    {​{$row.index}}
  </wj-flex-grid-cell-template>
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>
 
  <wj-flex-grid-column header="Country" binding="country">
    <wj-flex-grid-cell-template cell-type="ColumnHeader">
      <img ng-src="resources/globe.png" />
        {​{$col.header}}
      </wj-flex-grid-cell-template>
      <wj-flex-grid-cell-template cell-type="Cell">
        <img ng-src="resources/{​{$item.country}}.png" />
        {​{$item.country}}
      </wj-flex-grid-cell-template>
    </wj-flex-grid-column>
  <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
</wj-flex-grid>

特定のセルタイプ用のテンプレートの詳細については、 CellTemplateType 列挙体のドキュメントを参照してください。

wj-flex-grid-column ディレクティブには、通常のデータセル (cell-type="Cell")用の テンプレートして扱われる任意のコンテンツを含めることもできます。 ただし、 wj-flex-grid-column ディレクティブ内に、 cell-type="Cell" に設定された wj-flex-grid-cell-template ディレクティブが存在する場合は、 このテンプレートの方が優先され、任意のコンテンツはオーバーライドされます。

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

cell-type
@ テンプレートを適用するセルのタイプを定義する CellTemplateType 値。
auto-size-rows
@ セルテンプレートがセルのコンテンツに合わせてグリッドのデフォルトの行の高さを増やすかどうかを示します。 デフォルトはtrueです。
cell-overflow
@ セルの style.overflow プロパティの値を定義します。
force-full-edit
@ セル編集テンプレートでは、編集がどのように開始されたかにかかわらず、 セル編集が完全編集モードで強制的に開始するかどうかを示します。 完全編集モードでは、 カーソルキーを押しても編集が終了しません。 デフォルトはtrueです。

cell-type 属性には以下のいずれかの列挙値を指定します。

Cell

通常の（データ）セル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 たとえば、以下のセルテンプレートはCountry列のセルに国旗を表示します。

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cell-type="Cell">
    <img ng-src="resources/{​{$item.country}}.png" />
    {​{$item.country}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

階層的な FlexGrid （すなわち、childItemsPath プロパティ が指定されているグリッド）では、 Group テンプレートが提供されていない場合、 この Column のグループ行に含まれるヘッダ以外のセルにもこのテンプレートが適用されます。

CellEdit

編集モードのセル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 このセルタイプでは、追加の $value プロパティを使用できます。 このプロパティには編集前のセル値が格納され、編集後は値が更新されます。 たとえば、 以下のテンプレートは"Sales"列のエディタとしてWijmo InputNumber コントロールを使用します。

<wj-flex-grid-column header="Sales" binding="sales">
  <wj-flex-grid-cell-template cell-type="CellEdit">
    <wj-input-number value="$value" step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnHeader

列ヘッダセル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 たとえば、以下のテンプレートは"Country"列のヘッダに画像を追加します。

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cell-type="ColumnHeader">
    <img ng-src="resources/globe.png" />
    {​{$col.header}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

RowHeader

行ヘッダセル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGrid ディレクティブの子にする必要があります。 たとえば、以下のテンプレートは行ヘッダに行インデックスを表示します。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeader">
    {​{$row.index}}
  </wj-flex-grid-cell-template>
</wj-flex-grid>

このテンプレートは、編集モードにある行の行ヘッダセルにも適用されます。 編集モードの行ヘッダセルに別のコンテンツを提供するには、 RowHeaderEdit テンプレートを定義します。

RowHeaderEdit

編集モードの行ヘッダセル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGrid ディレクティブの子にする必要があります。 たとえば、 以下のテンプレートは編集中の行のヘッダに点を表示します。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
      ...
  </wj-flex-grid-cell-template>
</wj-flex-grid>

RowHeader テンプレートを適用するセルに標準の編集モードインジケーターを追加するには、 以下の RowHeaderEdit テンプレートを使用します。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    {​{&#x270e;}}
  </wj-flex-grid-cell-template>
</wj-flex-grid>

TopLeft

左上セル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGrid ディレクティブの子にする必要があります。 たとえば、 以下のテンプレートはグリッドの左上セルに右下向きの矢印を表示します。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="TopLeft">
    <span class="wj-glyph-down-right"></span>
  </wj-flex-grid-cell-template>
</wj-flex-grid>

GroupHeader

GroupRow のグループヘッダセル用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。

$row 変数には、 GroupRow クラスのインスタンスが格納されます。 グループ化が CollectionView に由来する場合、 $item 変数は CollectionViewGroup オブジェクトを参照します。

たとえば、以下のテンプレートは展開/折りたたみ状態を切り替えるためにチェックボックス要素を使用します。

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cell-type="GroupHeader">
    <input type="checkbox" ng-model="$row.isCollapsed"/>
    {​{$item.name}} ({​{$item.items.length}} items)
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

Group

GroupRow の通常のセル（グループヘッダ以外のセル）用のテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。このセルタイプでは、追加の $value 変数を使用できます。 列に aggregate プロパティが指定されている場合、 $value 変数には書式設定されていない集計値が格納されます。

たとえば、以下のテンプレートは"Sales"列のグループ行のセルに集計値と集計の種類を表示します。

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cell-type="Group">
    Average: {​{$value | number:2}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnFooter

columnFooters パネル内の通常のセルのテンプレートを定義します。 wijmo.angular.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 このセルタイプでは、セル値を含むバインディン用に追加の $value プロパティを使用できます。

たとえば、以下のテンプレートは"Sales"列のフッターのセルに集計値と集計の種類を表示します。

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cell-type="ColumnFooter">
    Average: {​{$value | number:2}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

BottomLeft

左下のセルのテンプレートを定義します（行ヘッダーと列フッターが交差する位置にあるセル）。 wijmo.angular.grid.WjFlexGrid directive. ディレクティブの子にする必要があります。 たとえば、このテンプレートは、グリッドの左下のセルにシグマの矢印を表示します。

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="BottomLeft">
   &#931;
  </wj-flex-grid-cell-template>
</wj-flex-grid>

階層

  • WjDirective
    • WjFlexGridCellTemplate