wj-multi-rowコンポーネントには、子コンポーネントの wijmo.vue2.grid.multirow.WjMultiRowCellGroup および wijmo.vue2.grid.multirow.WjMultiRowCellTemplate が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.multirow.MultiRow コントロールのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

wj-multi-row-cell コンポーネントは、 wijmo.vue2.grid.multirow.WjMultiRowCellGroup コンポーネントに含まれる必要があります。

wj-multi-row-cell コンポーネントには、子コンポーネントの wijmo.vue2.grid.multirow.WjMultiRowCellTemplate が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.multirow.MultiRowCell クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

wj-multi-row-cell-group コンポーネントは、 wijmo.vue2.grid.multirow.WjMultiRow コンポーネントに含まれる必要があります。

wj-multi-row-cell-group コンポーネントには、子コンポーネントの wijmo.vue2.grid.multirow.WjMultiRowCell が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.multirow.MultiRowCellGroup クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

wj-multi-row-cell-template コンポーネントはMultiRow の特定のセル型用のテンプレートを定義します。 テンプレート要素には、 {@link wijmo.vue2.grid.CellTemplateType}を指定するcellType属性が含まれている必要があります。

テンプレートのセル型に応じて、 テンプレートのセルタイプに応じて、 wj-multi-row-cell-template要素はwijmo.vue2.grid.multirow.WjMultiRowまたはwijmo.vue2.grid.multirow.WjMultiRowCellコンポーネントのいずれかの子である必要があります。

列固有のセルテンプレートは wj-multi-row-cell コンポーネントに含める必要があり、 列固有でないセル（行ヘッダセルや左上セルなど）のテンプレートは wj-multi-row コンポーネントに含める必要があります。

wj-multi-row-cell-template要素には、Vue補間式およびその他のコンポーネントとディレクティブを含む任意のHTMLフラグメントを含めることができます。

HTMLフラグメントのバインディングでは、セル固有のデータを格納するスコープ付きslotプロパティを使用できます。 これらのプロパティは、セルに関連するMultiRowCell、Row、およびRow.dataItemオブジェクトを参照するcol、row、およびitemです。

GroupやCellEditのようなセル型の場合、書式設定されていないセル値を含む追加のvalueコンテキストプロパティが提供されます。

slotプロパティを参照するには、wj-multi-row-cell-template要素（Vue 2.6.0以降で使用可能）で新しいv-slotディレクティブを使用するか、 または、wj-multi-row-cell-templateにネストされた<template>要素で古いslot-scopeディレクティブを使用できます。 たとえば、以下には、国列の行ヘッダーセル、通常のヘッダーセルと列ヘッダーセルのテンプレートを含むMultiRowコントロールです。

<!-- component.html -->
<wj-multi-row :itemsSource="data">
  <wj-multi-row-cell-template cellType="RowHeader" v-slot="cell">
    {{cell.row.index}}
  </wj-multi-row-cell-template>
  <wj-multi-row-cell-template cellType="RowHeaderEdit">
    ...
  </wj-multi-row-cell-template>

  <wj-multi-row-cell-group header="Statistics">
    <wj-multi-row-cell header="Country" binding="country">
      <wj-multi-row-cell-template cellType="ColumnHeader" v-slot="cell">
        <img src="resources/globe.png" />
          {{cell.col.header}}
      </wj-multi-row-cell-template>
      <wj-multi-row-cell-template cellType="Cell" v-slot="cell">
        <img :src="'resources/' + cell.item.country + '.png'" />
        {{cell.item.country}}
      </wj-multi-row-cell-template>
    </wj-multi-row-cell>
    <wj-multi-row-cell header="Sales" binding="sales"></wj-multi-row-cell>
  </wj-multi-row-cell-group>
</wj-multi-row>

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

cellType

CellTemplateType テンプレートが適用されるセルのタイプを定義する値。

autoSizeRows

セルのコンテンツを収容されるように、セルテンプレートがグリッドのデフォルトの行の高さを増やすかどうかを示します。 デフォルトでtrueに設定されます。

cellOverflow

セルのstyle.overflowプロパティ値を定義します。

forceFullEdit

セル編集テンプレートの場合、編集の開始方法に関係なく、セル編集が完全編集モードで強制的に開始されるかどうかを示します。 完全編集モードでは、カーソルキーを押しても編集は終了しません。 デフォルトでtrueに設定されます。

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

Cell

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

<wj-multi-row-cell header="Country" binding="country">
  <wj-multi-row-cell-template cellType="Cell" v-slot="cell">
    <img :src="'resources/' + cell.item.country + '.png'" />
    {{cell.item.country}}
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

CellEdit

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

<wj-multi-row-cell header="Sales" binding="sales">
  <wj-multi-row-cell-template cellType="CellEdit">
    <wj-input-number v-model="cell.value" :step="1"></wj-input-number>
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

両方向のバインドは、バインディングのsync修飾子を使用して指定することもできることに注意してください。

<wj-multi-row-cell header="Sales" binding="sales">
  <wj-multi-row-cell-template cellType="CellEdit">
    <wj-input-number value.sync="cell.value" :step="1"></wj-input-number>
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

ColumnHeader

ColumnHeader

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

<wj-multi-row-cell header="Country" binding="country">
  <wj-multi-row-cell-template cellType="ColumnHeader" v-slot="cell">
    <img src="resources/globe.png" />
    {{cell.col.header}}
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

RowHeader

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

<wj-multi-row :itemsSource="data">
  <wj-multi-row-cell-template cellType="RowHeader" v-slot="cell">
    {{cell.row.index / cell.row.grid.rowsPerItem + 1}}
  </wj-multi-row-cell-template>
</wj-multi-row>

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

RowHeaderEdit

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

<wj-multi-row :itemsSource="data">
  <wj-multi-row-cell-template cellType="RowHeaderEdit">
    ...
  </wj-multi-row-cell-template>
</wj-multi-row>

TopLeft

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

<wj-multi-row :itemsSource="data">
  <wj-multi-row-cell-template cellType="TopLeft">
    <span class="wj-glyph-down-right"></span>
  </wj-multi-row-cell-template>
</wj-multi-row>

GroupHeader

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

rowスコープスロットプロパティには、GroupRowクラスのインスタンスが含まれています。 グループ化がCollectionViewGroupから設定されている場合、itemスコープ付きslotプロパティはCollectionViewGroupオブジェクトを参照します。

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

<wj-multi-row-cell header="Country" binding="country">
  <wj-multi-row-cell-template cellType="GroupHeader" v-slot="cell">
    <input type="checkbox" v-model="cell.row.isCollapsed"/>
    {{cell.item.name}} ({{cell.item.items.length}} items)
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

Group

GroupRow の通常のセル（グループヘッダ以外のセル）用のテンプレートを定義します。 wijmo.angular2.grid.multirow.WjMultiRowCell コンポーネントの子にする必要があります。 このセル型には、連結用に追加のvalueプロパティがあります。 列に aggregate プロパティが指定されている場合、集計値が格納されます。

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

<wj-multi-row-cell header="Sales" binding="sales" aggregate="Avg">
  <wj-multi-row-cell-template cellType="Group" v-slot="cell">
    Average: {{formatNumber(cell.value, 'N0')}}
  </wj-multi-row-cell-template>
</wj-multi-row-cell>

NewCellTemplate

新しい行テンプレートのセルを定義します。 wijmo.vue2.grid.multirow.WjMultiRowCell コンポーネントの子にする必要があります。 このセル型では、 cell.item プロパティはundefinedです。 たとえば、次のセルテンプレートは、「new row」項目の日付列のセルに対してプレースホルダーを示しています。

<wj-multi-row-cell header="'日付'」 binding="'date'">
  <wj-multi-row-cell-template cellType="NewCellTemplate">
   ここに日付を入力してください
  </wj-multi-row-cell-template>
</wj-multi-row-cell>