セルテンプレート文字列は、テンプレートリテラル構文を使用します。 コンテンツの文字列は、タイプICellTemplateContextのスコープを使用して生成されます。

ICellTemplateFunction 関数は、ICellTemplateContext 型の引数を取り、セルに表示されるHTMLコンテンツを返します。

次に例を示します。

// テンプレート文字列を使用したデフォルトのレンダリング
col.cellTemplate = '${value}:${col.format}';

// テンプレート文字列を使用した条件付き書式
col.cellTemplate = '<span class=${value > 40000 ? "big-val" : "small-val"}>${text}</span>';

// ICellTemplateFunctionを使用した条件付き書式
col.cellTemplate = (ctx: ICellTemplateContext) => {
     return '<span class="{cls}">{val}</span>'
         .replace('{cls}', ctx.value > 40000 ? 'big-val' : 'small-val')
         .replace('{val}', ctx.text);
};

セルテンプレートは通常の文字列であり、実際のJavaScriptテンプレートではないことに注意してください。 そのため、JavaScriptテンプレート文字列で使用される逆引用符とは異なり、通常の引用符（単一または二重）を使用して定義されます。 cellTemplate プロパティは、Wijmoの相互運用モジュールで使用できるformatItem イベントまたはセルテンプレートよりも単純で、強力ではない代替方法を提供します。

テンプレートの文字列にはテンプレートリテラルが必要であるため、IEではサポートされていません。

セルテンプレートを使用する場合、列の binding および format プロパティを設定する必要があります。 これらは編集モードで使用され、コピー/貼り付け/エクスポート操作をサポートするために使用されます。

セルテンプレートはセルデータの描画にのみ使用され、セルの編集には影響しません。 セルエディタをカスタマイズする場合は、editorプロパティを使用します。

このIDは、列ヘッダ要素の aria-describedby 属性の値として使用されます。

入力コントロールは、通常、Wijmo入力コントロールの1つです。 列のデータ型と互換性がある必要があります。

たとえば、次のサンプルコードは、グリッド上のすべての日付型列に対する すべての組み込みエディタを単一のInputDateコントロールに置き換えます。

import { InputDate } from '@grapecity/wijmo.input';
let inputDate = new InputDate(document.createElement('div'));
theGrid.columns.forEach(col => {
    if (col.DataType == DateType.Date) {
        col.editor = inputDate;
    }
})

また、次のサンプルコードは、グリッド上のすべてのデータマップされている列に対する すべての組み込みエディタをAutoCompleteコントロールに置き換えます。

import { AutoComplete } from '@grapecity/wijmo.input';
theGrid.columns.forEach(col => {
    let map = col.dataMap;
    if (map) {
        col.editor = new AutoComplete(document.createElement('div'), {
            itemsSource: map.collectionView,
            displayMemberPath: map.displayMemberPath,
            selectedValuePath: map.selectedValuePath
        });
    }
});

上記の例では、列のdataMapプロパティを使用してAutoCompleteを初期化しています。 多くの場合、formatやisRequiredなどの列プロパティを使用して、カスタムエディタを初期化することもできます。

次の例では、editorプロパティを使用して、さまざまなWijmo入力コントロールでグリッドの項目を編集する方法を示しています。

デモ

デフォルトでは、このプロパティはnullに設定されます。これは、最大幅が設定されていないことを示します。

デフォルトでは、このプロパティはnullに設定されます。これは、最小幅は0に設定されていることを示します。

列名を使用して、FlexGrid.getColumn メソッドで列を取得できます。

このプロパティをfalseに設定すると、この列の自動リサイズ処理が無効になります。 このプロパティをtrueに設定すると、 グリッドのwijmo.grid.Column.quickAutoSize　プロパティの値に従って、この機能が有効になります。 null（デフォルト値）に設定すると、 プレーンテキストを表示するテンプレートを持たない列の機能が有効になります。

列の表示/非表示設定、デフォルトサイズ、および最小/最大サイズを考慮した幅が返されます。

列の幅は、正の数値（列幅のピクセル数を設定）、nullまたは負の数値（コレクションのデフォルトの列幅を使用）、 または'{number}*'形式の文字列（スターサイズ指定）にすることができます。

スターサイズ指定オプションを使用すると、星の前の数字に比例して 列の幅が決定されるXAMLスタイルの動的なサイズ設定が実行されます。たとえば、 グリッドに3つの列があり、それぞれの幅が"100"、"*"、"3*"に設定されている場合、最初の列の幅は100ピクセルになり、 2列目は残りスペースの1/4、3列目は残りスペースの3/4を占めます。 スターサイズ指定を使用すると、使用可能な幅いっぱいに自動的に広がる列を定義できます。

たとえば、最後の列の幅を"*"に設定すると、最後の列がグリッドの幅いっぱいに 拡張されて空スペースがなくなります。また、列の minWidth プロパティを設定して列の幅が狭くなりすぎないようにすることもできます。