5.20201.663
WjFlexGridCellTemplate Wijmo API クラス

WjFlexGridCellTemplate クラス

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

wjFlexGridCellTemplate ディレクティブは、FlexGrid 内の特定のセルタイプに 使用されるテンプレートを定義します。 これは、 <ng-template> 要素に定義され、{@link wijmo.angular2.grid.CellTemplateType} を指定する cellType 属性が含まれる必要があります。テンプレートのセルタイプに応じて、 wjFlexGridCellTemplate ディレクティブを含む<ng-template>要素は、 wijmo.angular2.grid.WjFlexGridまたは wijmo.angular2.grid.WjFlexGridColumn ディレクティブのいずれかの子である必要があります。 列固有のセルテンプレートは wj-flex-grid-column コンポーネントに含まれる必要があり、 列固有でないセル(行ヘッダーや左上のセルなど)は wj-flex-grid コンポーネントに含まれる必要があります。

wjFlexGridCellTemplateディレクティブを含む <ng-template> 要素には、 Angular 2内挿式および他のコンポーネント/ディレクティブを含む 任意のHTMLフラグメントを含めることができます。

HTMLフラグメント内の連結では、セルコンテキストオブジェクトを含む cell ローカルテンプレート変数を、 そのセルに関連する ColumnRow、および Row.dataItem オブジェクトを参照する colrow、およびitemプロパティと共に使用できます。 GroupCellEdit などのセルタイプには、 書式設定されていないセル値を含む value プロパティが別途用意されています。 たとえば、次の FlexGrid コントロールでは、 行ヘッダー用、Country列の通常のセル用、 およびその列ヘッダーセル用にテンプレートが使用されています。

// component.ts
import * as wjGrid from 'wijmo/wijmo.angular2.grid';

@Component({
    templateUrl: './component.html',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}
<!-- component.html -->
<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index}}
  </ng-template>
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </ng-template>

  <wj-flex-grid-column [header]="'Country'" [binding]="'country'">
    <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
      <img src="resources/globe.png" />
        {{cell.col.header}}
    </ng-template>
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
      <img src="resources/{{cell.item.country}}.png" />
      {{cell.item.country}}
    </ng-template>
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column>
</wj-flex-grid>

特定のセルタイプテンプレートの詳細については、 {@link wijmo.angular2.grid.CellTemplateType} 列挙のドキュメントを参照してください。

wjFlexGridCellTemplate ディレクティブは、次の属性をサポートします。

Cell

通常の(データ)セルテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のセルテンプレートはCountry列のセルのフラグを示します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <img src="resources/{{cell.item.country}}.png" />
    {{cell.item.country}}
  </ng-template>
</wj-flex-grid-column>

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

CellEdit

編集モードのセルのテンプレートを定義します。wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 また、 編集前の元のセル値と編集後の更新値を持ちます。 たとえば、Wijmo InputNumber コントロールを"Sales"列のエディタとして使用するテンプレートを次に示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'">
  <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'">
    <wj-input-number [(value)]="cell.value" [step]="1"></wj-input-number>
  </ng-template>
</wj-flex-grid-column>
            <b>ColumnHeader</b>

列ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のテンプレートは"Country"列のヘッダーに画像を追加します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
    <img src="resources/globe.png" />
      {{cell.col.header}}
  </ng-template>
</wj-flex-grid-column>

RowHeader

行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは行ヘッダーに行インデックスを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index + 1}}
  </ng-template>
</wj-flex-grid>

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

RowHeaderEdit

編集モードの行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは編集中の行のヘッダーにドットを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    {{&amp;#x270e;}}
  </ng-template>
</wj-flex-grid>

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

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    {{&amp;#x270e;}}
  </ng-template>
</wj-flex-grid>

TopLeft

左上のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートはグリッドの左上のセルに右下三角グリフを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'TopLeft'">
    <span class="wj-glyph-down-right"></span>
  </ng-template>
</wj-flex-grid>

GroupHeader

GroupRow 内にあるグループヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。

cell.row プロパティには、 GroupRow クラスのインスタンスが含まれます。グループ化が CollectionView で行われる場合、cell.item プロパティは CollectionViewGroup オブジェクトを参照します。

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

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <ng-template wjFlexGridCellTemplate [cellType]="'GroupHeader'" let-cell="cell">
    <input type="checkbox" [(ngModel)]="cell.row.isCollapsed"/>
    {{cell.item.name}} ({{cell.item.items.length}} items)
  </ng-template>
</wj-flex-grid-column>

Group

GroupRow 内にある通常のセル(グループヘッダーでない)のテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 列に aggregate プロパティが指定されている場合、 その列には書式設定されていない集計値が含まれます。 たとえば、次のテンプレートは"Sales"列に集計値とグループ行セルの種類を表示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <ng-template wjFlexGridCellTemplate [cellType]="'Group'" let-cell="cell">
    Average: {{cell.value | number:'1.0-0'}}
  </ng-template>
</wj-flex-grid-column>

ColumnFooter

columnFooters パネル内にある通常のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる、セル値を含む cell.value プロパティを別途持ちます。

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

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
    Average: {{cell.value | number:'1.0-0'}}
  </ng-template>
</wj-flex-grid-column>

BottomLeft

左下のセル(行ヘッダーと列フッターが交差する位置にあるセル)のテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートはグリッドの左下のセルにシグマグリフを表示します。

<wj-flex-grid [itemsSource]="data">
  <ng-template wjFlexGridCellTemplate [cellType]="'BottomLeft'">
    &amp;#931;
  </ng-template>
</wj-flex-grid>

<b>NewCellTemplate</b>

新しい行テンプレートのセルを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 
このタイプのセルに <b>cell.item</b> プロパティは定義されません。
たとえば、次のセルテンプレートは「新しい行」項目のDate列セルにプレースホルダを表示します。

```html
<wj-flex-grid-column [header]="'Date'" [binding]="'date'">
  <ng-template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'">
    Enter a date here
  </ng-template>
</wj-flex-grid-column>

階層

  • WjFlexGridCellTemplate

プロパティ

autoSizeRows

autoSizeRows: boolean

セルテンプレートがセルの内容に合わせてグリッドのデフォルトの行の高さを増加させるかどうかを示す値を取得または設定します。デフォルトはtrueです。

cellOverflow

cellOverflow: string

セルのstyle.overflow値を定義します。

cellType

テンプレートが適用されているセル型を定義します。 プロパティ値を指定するには、文字列の列挙メンバー名を使用できます。

forceFullEdit

forceFullEdit: boolean

セル編集テンプレートでは、編集がどのように開始されたかにかかわらず、 セル編集が完全編集モードで強制的に開始するかどうかを示します。 完全編集モードでは、カーソルキーを押しても編集が終了しません。 デフォルトはtrueです。