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コンテキストプロパティが提供されます。

たとえば、以下は、Country列の行ヘッダーセル、通常および列ヘッダーセルのテンプレートを含む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>

CellEdit

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

<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>
            }
        }
  />
</MultiRowCell>

RowHeader

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

<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>

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

<MultiRow itemsSource={this.state.data}>
  <MultiRowCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '\u270e\ufe0e' } />
</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>
      } }
  />
</MultiRow>

GroupHeader

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

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

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

<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="日付" binding="date">
  <MultiRowCellTemplate
      cellType="NewCellTemplate"
      template={ (context) => 'ここに日付を入力してください' } />
</MultiRowCell>