multi-row コンポーネントには、 .multirow.MultiRowCellGroup} およびwijmo.react.grid.multirow.MultiRowCellTemplate.子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScripwijmo.grid.multirow.MultiRow クラスのすべてのプロパティとイベントがサポートされます。

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

multi-row-cell コンポーネントは、 wijmo.react.grid.multirow.MultiRowCellGroup コンポーネントに含まれている必要があります。 multi-row-cellコンポーネントには、 wijmo.react.grid.multirow.MultiRowCellTemplate 子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScripwijmo.grid.multirow.MultiRowCell クラスのすべてのプロパティとイベントがサポートされます。

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

multi-row-cell-group コンポーネントは、 wijmo.react.grid.multirow.MultiRow コンポーネントに含まれている必要があります。 multi-row-cell-group コンポーネントには、 wijmo.react.grid.multirow.MultiRowCell 子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScripwijmo.grid.multirow.MultiRowCellGroup クラスのすべてのプロパティとイベントがサポートされます。

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

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

テンプレートのセル型に応じて、 MultiRowCellTemplate要素は wijmo.react.grid.multirow.MultiRow および wijmo.react.grid.multirow.MultiRowCell コンポーネントのいずれかの子である必要があります。

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

セルのコンテンツは、template render propを使用して定義されます。これは、セルのコンテンツを表す仮想要素ツリーを返すレンダー関数を受け取ります。 この関数には、特定の各セルのデータ コンテキストが渡されるcontextパラメーターが含まれています。これは、col, rowおよびitem プロパティを持つオブジェクトです。 これらは、セルに関連する MultiRowCell、 Rowお<よびRow.dataItem オブジェクトを参照します。

GroupやCellEditのようなセル型の場合、書式設定されていないセル値を含む追加のvalueコンテキストプロパティが提供されます。 たとえば、以下には、国列の行ヘッダーセル、通常のヘッダーセルと列ヘッダーセルのテンプレートを含むMultiRowコントロールです。

<!-- component.html -->
<MultiRow itemsSource={this.state.data}>
  <MultiRowCellTemplate
  cellType="RowHeader"
  template={ (context) => context.row.index + 1 } />
  <MultiRowCellTemplate
  cellType="RowHeaderEdit"
  template={ (context) => '...' } />

  <MultiRowCellGroup header="Statistics">
 <MultiRowCell header="Country" binding="country">
<MultiRowCellTemplate
  cellType="ColumnHeader"
  template={ (context) => {
  return <React.Fragment>
  <img src="resources/globe.png" />
  {context.col.header}
  </React.Fragment>
  }
             }
        />
<MultiRowCellTemplate
  cellType="Cell"
  template={ (context) => {
  return <React.Fragment>
  <img src={`resources/${context.item.country}.png`} />
  {context.item.country}
  </React.Fragment>
  } }
      />
 </MultiRowCell>
 <MultiRowCell header="Sales" binding="sales"></MultiRowCell>
  </MultiRowCellGroup>
</MultiRow>

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

cellType

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

autoSizeRows

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

cellOverflow

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

forceFullEdit

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

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

Cell

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

<MultiRowCell header="Country" binding="country">
  <MultiRowCellTemplate
  cellType="Cell"
  template={ (context) => {
  return <React.Fragment>
 <img src={`resources/${context.item.country}.png`} />
 {context.item.country}
  </React.Fragment>
      }
   }
  />
</MultiRowCell>
<b>CellEdit</b>

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

 <MultiRowCell header="Sales" binding="sales">
  <MultiRowCellTemplate
  cellType="CellEdit"
  template={ (context) => {
   return <wjInput.InputNumber
   step={1}
   value={context.value}
   valueChanged={(inpNum: wjcInput.InputNumber) =>
   context.value = inpNum.value
   } />
           }
      }
  />
</MultiRowCell>

ColumnHeader

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

<MultiRowCell header="Country" binding="country">
  <MultiRowCellTemplate
cellType="ColumnHeader"
template={ (context) => {
return <React.Fragment>
<img src="resources/globe.png" />
{context.col.header}
</React.Fragment>
            }
        }
  />
<b>RowHeader</b>

行ヘッダセル用のテンプレートを定義します。 wijmo.react.grid.multirow.MultiRow ディレクティブの子にする必要があります。
たとえば、以下のテンプレートは行ヘッダに行インデックスを表示します。
``html
<MultiRow itemsSource={this.state.data}>
  <MultiRowCellTemplate
  cellType="RowHeader"
  template={ (context) => context.row.index / context.row.grid.rowsPerItem + 1 } />
</MultiRow>

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

RowHeaderEdit

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

<MultiRow itemsSource={this.state.data}>
  <MultiRowCellTemplate
  cellType="RowHeaderEdit"
  template={ (context) => '...' } />
</MultiRow>

TopLeft

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

<MultiRow itemsSource={this.state.data}>
  <MultiRowCellTemplate
  cellType="TopLeft"
  template={ (context) => {
  return <span class="wj-glyph-down-right"></span>
      } }
  />
<b>GroupHeader</b>

<a href="../classes/wijmo_grid.grouprow.html">GroupRow</a> のグループヘッダセル用のテンプレートを定義します。
wijmo.react.grid.multirow.MultiRowCell コンポーネントの子にする必要があります。

<b>context.row</b>プロパティには、<b>GroupRow</b>クラスのインスタンスが含まれています。
グループ化が<a href="../classes/wijmo.collectionview.html">CollectionView</a>から設定されている場合、<b>context.item</b>プロパティは<a href="../classes/wijmo.collectionviewgroup.html">CollectionViewGroup</a>オブジェクトを参照します。

たとえば、以下のテンプレートでは、チェックボックス要素を展開/折りたたみ状態を切り替えるためにチェックボックス要素を使用します。
```html
<MultiRowCell header="Country" binding="country">
  <MultiRowCellTemplate
  cellType="GroupHeader"
  template={ (context) => {
 return <React.Fragment>
   <input type="checkbox"
   checked={context.row.isCollapsed}
   onChange={e =>
   context.row.isCollapsed = e.target.checked as boolean
   } />
   {context.item.name} ({context.item.items.length} items)
 </React.Fragment>
         }
       }
  />
</MultiRowCell>

Group

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

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

<MultiRowCell header="Sales" binding="sales" aggregate="Avg">
  <MultiRowCellTemplate
  cellType="Group"
  template={ (context) => {
 return <React.Fragment>
   Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
 </React.Fragment>
         }
       }
  />
</MultiRowCell>

NewCellTemplate

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

<MultiRowCell header="Date" binding="date">
  <MultiRowCellTemplate
  cellType="NewCellTemplate"
  template={ (context) => 'ここに日付を入力してください' } />
</MultiRowCell>