constructor(options?: any, parent?: ColumnGroup | null): ColumnGroup
ColumnGroupクラスの新しいインスタンスを初期化します。
JavaScript object containing initialization data for the instance.
Parent group, or null for top-level groups.
列のグループヘッダ行に表示するAggregate を取得または設定します。
このプロパティのデフォルト値は**Aggregate.None**です。これにより、グリッドにはこの列の集計値が表示されません。
列または行のセルの水平方向の配置を取得または設定します。
このプロパティのデフォルト値は**null**で、列のdataType に基づいて配置が自動的に選択されます（数値の場合は右揃え、ブール値の場合は中央揃え、その他の型の場合は左揃え）。
デフォルトの配置をオーバーライドする場合は、このプロパティを'left'、'right'、'center'、または'justify’のいずれかに設定します。
ユーザーがマウスで列または行を新しい位置に移動できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーがマウスで列または行をサイズ変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーがヘッダーをクリックして列をソートできるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
列がバインドされているプロパティの名前を取得または設定します。
このプロパティのデフォルト値はnullです。これにより、列がどのデータフィールドにも連結されません。
このプロパティは、自動生成された列に対して自動的に設定されます（autoGenerateColumnsを参照）。
この Column のデータセルのHTMLコンテンツを生成するために使用される ICellTemplateFunction またはテンプレートの文字列を取得または設定します。
セルテンプレート文字列は、テンプレートリテラル構文を使用します。 コンテンツの文字列は、タイプICellTemplateContextのスコープを使用して生成されます。
ICellTemplateFunction 関数は、ICellTemplateContext 型の引数を取り、 セルに表示されるHTMLコンテンツを返します。
例:
``` typescript // cellTemplate文字列を使用したデフォルトのレンダリング col.cellTemplate = '${value}:${col.format}';
// cellTemplate関数を使用したデフォルトのレンダリング col.cellTemplate = (ctx: ICellTemplateContext) => glbz`${ctx.value}:${ctx.col.format}`;
// cellTemplate文字列を使用した条件付き書式 col.cellTemplate = ' 40000 ? "big-val" : "small-val"}>${text}';
// cellTemplate関数を使用した条件付き書式 col.cellTemplate = (ctx: ICellTemplateContext) => ` ${ctx.text} `; ``` セルテンプレートは通常の文字列であり、実際のJavaScriptテンプレートではないことに注意してください。そのため、JavaScriptテンプレート文字列で使用される逆引用符とは異なり、通常の引用符（単一または二重）を使用して定義されます。
**関数ベースの計算フィールド** は、次の理由により、通常、文字列ベースの計算フィールドよりも優れています。
1) 設計時のエラーチェックとコマンド補完を提供します。 2) 実行速度が速い 3) コンテンツセキュリティポリシー（CSP）に関する問題はありません。
**文字列ベースの計算フィールド** には、関数ベースの計算フィールドよりも利点があり、場合によっては重要になることがあります。いくつかの利点は次のとおりです。
1) 少し簡潔です 2) データとして保存でき、実行時に簡単に変更できます。
cellTemplateプロパティは、 Wijmoの相互運用モジュールで使用できるformatItem イベントまたはセルテンプレートよりも単純で、強力ではない代替方法を提供します。
セルテンプレートを使用する場合、列の binding および format プロパティを設定する必要があります。これらは編集モードで使用され、コピー/貼り付け/エクスポート操作をサポートするために使用されます。
セルテンプレートはセルデータの描画にのみ使用され、セルの編集には影響しません。セルエディタをカスタマイズする場合は、editorプロパティを使用します。
また、セルテンプレートを使用して、行ヘッダーセルをレンダリングすることができます。 たとえば、次の示すように、行ヘッダーセルに数値を追加します。以下に例を示します。 ```typescript // 行ヘッダーの列を取得します。 let col = theGrid.rowHeaders.columns[0];
// 行インデックスをヘッダーに追加するテンプレートを割り当てます // ただし、編集や新しい行テンプレートなどのグリフは保持されます col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString(); ```
このプロパティのデフォルト値は**null**です。これは、列にテンプレートがないことを意味します。
列または行のヘッダ以外のデータセルをレンダリングするときに使用するCSSクラス名を取得または設定します。
このプロパティのデフォルト値は**null**です。
列または行内のすべてのセル（データとヘッダー）をレンダリングするときに使用するCSSクラス名を取得または設定します。
このプロパティのデフォルト値は**null**です。
列に現在適用されているソート順序を表す文字列を取得します。 有効な値は、昇順の場合は'+'、降順の場合は'-'、列がソートされていない場合はnullです。
生の値から列または行の表示値への変換に使用されるDataMap を取得または設定します。
デフォルトでは、データマップされたセルには、値をすばやく編集するためのドロップダウンリストがあります。列のdataMapEditorプロパティを設定して、エディターのタイプを変更できます。
このプロパティのデフォルト値は**null**です。
この列または行でデータマップされたセルを編集するときに使用するエディターのタイプを示す値を取得または設定します。
このプロパティのデフォルト値はDropDownListです。 これにより、dataMapがあり、読み取り専用ではない列のセルにドロップダウンボタンが追加されます。
ユーザーがドロップダウンボタンをクリックすると、 セルの値を選択するために使用できるドロップダウンリストがグリッドに表示されます。
RadioButtonsを設定すると、 グリッドは各オプションに対してラジオボタンを表示します。 ラジオボタンは、マウスまたはキーボードで クリックできます（各オプションの先頭文字またはスペースキーを押して、オプションを切り替えます）。
ドロップダウンリストは、**wijmo.input.ListBox**クラスがアプリケーションによってロード/インポートされた場合にのみ使用できることに注意してください。
列または行に格納される値の型を取得または設定します。
グリッドを編集するとき、値は適切な型に型変換されます。
このプロパティのデフォルト値はnullです。 これにより、グリッドはデータ型の変換を実行しません。
このプロパティは、自動生成された列に対して自動的に設定されます（autoGenerateColumnsを参照）。
列の説明を含む要素のIDを取得または設定します。
このIDは、列ヘッダ要素の **aria-describedby** 属性の値として使用されます。
このプロパティのデフォルト値は**null**です。
この列または行のドロップダウンに追加するCSSクラス名を取得または設定します。
これらのドロップダウンボタンは、列にdataMapが設定され、編集可能である場合にのみ表示されます。ユーザーがドロップダウンボタンをクリックすると、セルの値を選択するために使用できるリストがグリッドに表示されます。
ドロップダウンリストは、**wijmo.input.ListBox**クラスがアプリケーションによってロード/インポートされた場合にのみ使用できることに注意してください。
このプロパティのデフォルト値は**null**です。
カスタムセルエディタとして使用する入力コントロールへの参照を設定しColumnます。
入力コントロールは、通常、Wijmo入力コントロールの1つです。 列のデータ型と互換性がある必要があります。
たとえば、次のサンプルコードは、グリッド上のすべての日付型列に対する すべての組み込みエディタを単一のInputDateコントロールに置き換えます。
```typescript 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**コントロールに置き換えます。
```typescript 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入力コントロールでグリッドの項目を編集する方法を示しています。
{@sample Grid/Editing/CustomEditors デモ}
このプロパティのデフォルト値は**null**です。 これにより、グリッドはグリッド独自の組み込みエディタを使用します。
未加工の値を列または行の表示値に変換するために使用される書式文字列を取得または設定します （Globalize を参照）。
このプロパティのデフォルト値はnullです。これにより、 グリッドはデータ型にに応じてデフォルトの書式を使用します。
列ヘッダーに表示されるテキストを取得または設定します。
このプロパティのデフォルト値は**null**です。これにより、binding文字列がヘッダとして使されます。
この列または行の値の編集に使用されるHTML入力要素の"type"属性を取得または設定します。
このプロパティのデフォルト値はnullです。これにより、数値列に対しては "tel"に設定され、 他のすべてのブール型以外の列に対して "text"に設定されます。
"tel" 入力の型では、 モバイルデバイスはマイナス記号と小数点記号を含む数値キーパッドが表示されます。
デフォルトのままでは現在のカルチャ、デバイス、またはアプリケーションに関してうまく機能しない場合は、 このプロパティを使用してデフォルト設定を変更します。 その場合、値を"number"または"text"に変更してみてください。
この列または行にあるセルがプレーンテキストではなくHTMLコンテンツを含むかどうかを示す値を取得または設定します。
このプロパティは通常のセルにのみ適用されます。デフォルトでは、 行と列のヘッダーセルにプレーンテキストが含まれます。 HTMLを列ヘッダーまたは行ヘッダーに表示するには、 FlexGrid.formatItem イベントを使用してコードにセルのinnerHTMLコンテンツを設定する必要があります。
列の列のisReadOnlyプロパティがtrueに設定されていない限り、HTMLを表示するセルが編集できます。 デフォルトでは、エディタがHTMLマークアップを表示し、ユーザーがそれを変更できます。 列にdataMapがある場合、 ドロップダウンリストに書式設定された項目が表示され、 エディタにHTMLマークアップではなくプレーンテキストが表示されます。
このプロパティのデフォルト値は **false**です。
この列または行の値が必須かどうかを決定する値を取得または設定します。
このプロパティのデフォルト値はnullです。この場合、日付、ブール値、および数値が必要ですが、非マスク文字列の列に空の文字列を含めることができます。
trueに設定した場合、値は必須で、空の文字列は許可されません。
When set to false, null values and empty strings are allowed.
列または行が表示可能で、なおかつ折りたたまれていないかどうかを示す値を取得または設定します。
このプロパティは読み取り専用です。列または行の表示/非表示設定を変更するには、代わりにvisibleプロパティを使用してください。
この列または行のセルに入力できる最大の項目数を取得または設定します。
このプロパティのデフォルト値はnullです。これにより、任意の文字数の入力を許可します。
この列または行にあるセルの内容が改行文字(\n).で ラップするかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
このColumnGroupの親列グループを取得します。
このプロパティを使用して列のドラッグを制限し、ユーザーがグループ内でのみドラッグできるようにすることができます。 例えば：
```typescript let theDragColumn: ColumnGroup; new FlexGrid(host, { columnGroups: [ { binding: 'id', allowDragging: true }, { binding: 'name', allowDragging: true }, ... ], allowDragging: AllowDragging.Columns, draggingColumn: (s, e) => { // keep track of group being dragged theDragColumn = e.getColumn(true) as ColumnGroup; }, draggingColumnOver: (s, e) => { // allow dropping only within groups let col = e.getColumn(true) as ColumnGroup; e.cancel = col.parentGroup != theDragColumn.parentGroup; }, itemsSource: getData(), }); ```
この列のサイズを自動変更するときにグリッドが精度よりもパフォーマンスを最適化するかどうかを決定する値を取得または設定します。
このプロパティをfalseに設定すると、この列の自動リサイズ処理が無効になります。
これをtrueに設定すると、グリッドのquickAutoSize プロパティの値にしたがって、この機能が有効になります。
このプロパティのデフォルト値は**null**です。これにより、 プレーンテキストを表示するテンプレートを持たない列の機能が有効になります。
列または行のレンダリングサイズを取得または設定します。
表示/非表示設定、デフォルトサイズ、および最小/最大サイズを考慮したサイズが返されます。
列の幅を取得または設定します。
列の幅は、正の数値（列幅のピクセル数を設定）、nullまたは負の数値（コレクションのデフォルトの列幅を使用）、または'{number}*'形式の文字列（スターサイズ指定）にすることができます。
スターサイズ指定オプションを使用すると、星の前の数字に比例して 列の幅が決定されるXAMLスタイルの動的なサイズ設定が実行されます。たとえば、 グリッドに3つの列があり、それぞれの幅が"100"、"*"、"3*"に設定されている場合、最初の列の幅は100ピクセルになり、 2列目は残りスペースの1/4、3列目は残りスペースの3/4を占めます。
スターサイズ指定を使用すると、使用可能な幅いっぱいに自動的に広がる列を定義できます。たとえば、最後の列の幅を"*"に設定すると、最後の列がグリッドの幅いっぱいに 拡張されて空スペースがなくなります。また、列の minWidth プロパティを設定して列の幅が狭くなりすぎないようにすることもできます。
renderWidthプロパティを使用して、 可視性、星のサイズ、最小/最大制限、およびデフォルトの幅設定を考慮して、 列の実際の幅を取得できます。
このプロパティのデフォルト値はnullです。 これにより、グリッドのcolumnsコレクションで定義された デフォルトの列幅が使用されます。
getAlignment(row?: Row): string
Row that contains the cell being checked.
getIsRequired(row?: Row): boolean
列または行の値が必須かどうかを決定する値を取得します。
isRequired プロパティがnullでない場合は、その値が返されます。 そうでない場合は、列のdataType に基づいて必須状態が判定されます。
デフォルトでは、文字列の列は、dataMap または mask 値が設定されていない限り 必須ではありません。他のすべてのデータ型は必須です。
Row that contains the cell being checked.
onGridChanged(e?: EventArgs): void
gridChangedイベントを発生させます。
Column クラスを拡張して列グループを提供します。
このクラスは、columnsプロパティを追加して、任意のグループ列が任意の子列数を持つことができます。
また、グループの展開・折りたたみ動作を制御するisCollapsedプロパティとcollapseToプロパティを追加します。
Columnクラスを拡張するので、通常の列としてColumnGroup列を作成して使用できます。
たとえば、次のコードは、いくつかの子列を持つ2つの折りたたみ可能な列グループのグリッドを作成します。
```typescript let theGrid = new FlexGrid('#theGrid', { selectionMode: 'MultiRange', autoGenerateColumns: false, columns: [ { header: 'Transaction', collapseTo: 'id', align: 'left', columns: [ { binding: 'id', header: 'ID' }, { binding: 'date', header: 'Date' }, { binding: 'time', header: 'Time', format: 'HH:mm:ss' } ]}, { header: 'Details', collapseTo: 'sales', align: 'left', columns: [ { binding: 'country', header: 'Country' }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' } ]} ], itemsSource: getData() }); ```