Wijmo
Interops
- Vue2
- React
  - Barcode
  - Base
  - Chart
  - Gauge
  - Grid
  - Input
  - Nav
  - Olap
  - Viewer
- Knockout
- Angular
- Angular2

Wijmo_React_Grid.Flexgridcelltemplate

FlexGridCellTemplate クラス

FlexGrid セルテンプレートに対応するReactコンポーネント。

FlexGridCellTemplate ディレクティブは、FlexGrid 内の特定のセル型に使用されるテンプレートを定義します。 <template> 要素に定義され、{@link wijmo.react.grid.CellTemplateType}を指定する cellType 属性が含まれる必要があります。テンプレートのセル型に応じて、 FlexGridCellTemplate ディレクティブを含むtemplate要素は、 wijmo.react.grid.FlexGridまたは wijmo.react.grid.FlexGridColumn ディレクティブのいずれかの子である必要があります。列固有のセルテンプレートは FlexGridColumn コンポーネントに含まれる必要があり、列固有でないセル（行ヘッダーや左上のセルなど）は FlexGrid コンポーネントに含まれる必要があります。

セルのコンテンツは、template render propを使用して定義されます。これは、セルのコンテンツを表す仮想要素ツリーを返すレンダリング関数を受け取ります。

この関数には、特定の各セルのデータコンテキストが渡されるcontextパラメータがあります。これは、col、row、およびitemプロパティを持つオブジェクトであり、セルに関連するColumn、Row、およびRow.dataItemオブジェクトを参照します。 Group やCellEdit などのセル型には、書式設定されていないセル値を含む value プロパティが別途用意されています。たとえば、次の FlexGrid コントロールでは、行ヘッダー用、Country列の通常のセル用、およびその列ヘッダーセル用にテンプレートが使用されています。

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

  <wjGrid.FlexGridColumn header="Country" binding="country">
    <wjGrid.FlexGridCellTemplate
          cellType="ColumnHeader"
          template={ (context) => {
              return <React.Fragment>
                  <img src="resources/globe.png" />
                  {context.col.header}
              </React.Fragment>
              }
          }
     />
    <wjGrid.FlexGridCellTemplate
          cellType="Cell"
          template={ (context) => {
              return <React.Fragment>
                 <img src={`resources/${context.item.country}.png`} />
                 {context.item.country}
              </React.Fragment>
          } }
      />
  </wjGrid.FlexGridColumn>
  <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn>
</wjGrid.FlexGrid>

FlexGridCellTemplate ディレクティブは、次のプロパティをサポートしています。

cellType: テンプレートが適用されるセル型を定義する CellTemplateType 値。
autoSizeRows: セルのコンテンツを収容されるように、セルテンプレートがグリッドのデフォルトの行の高さを増やすかどうかを示します。デフォルトでtrueに設定されます。
cellOverflow: セルの style.overflow プロパティ値を定義します。
forceFullEdit: セル編集テンプレートの場合、編集の開始方法に関係なく、セル編集が完全編集モードで強制的に開始されるかどうかを示します。完全編集モードでは、カーソルキーを押しても編集は終了しません。デフォルトでtrueに設定されます。

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

Cell

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

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

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

CellEdit

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

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

            <b>ColumnHeader</b>

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

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
        cellType="ColumnHeader"
        template={ (context) => {
            return <React.Fragment>
                <img src="resources/globe.png" />
                {context.col.header}
            </React.Fragment>
            }
        }
  />
</wjGrid.FlexGridColumn>

RowHeader

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

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeader"
      template={ (context) => context.row.index + 1 } />
</wjGrid.FlexGrid>

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

RowHeaderEdit

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

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '...' } />
</wjGrid.FlexGrid>

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

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="RowHeaderEdit"
      template={ (context) => '\u270e\ufe0e' } />
</wjGrid.FlexGrid>

TopLeft

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

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="TopLeft"
      template={ (context) => {
          return <span class="wj-glyph-down-right"></span>
      } }
  />
</wjGrid.FlexGrid>

GroupHeader

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

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

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

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
      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>
         }
       }
  />
</wjGrid.FlexGridColumn>

Group

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

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

ColumnFooter

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

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

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

BottomLeft

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

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
      cellType="BottomLeft"
      template={(context) => <span>&#931;</span>} />
</wjGrid.FlexGrid>

NewCellTemplate

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

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

階層

any
- FlexGridCellTemplate
  - MultiRowCellTemplate