[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Grid_Transposed.Transposedgrid

TransposedGrid クラス

FlexGrid コントロールを拡張して、転置レイアウトによってデータを表示します。この場合、列はデータ項目、また、行は項目のプロパティを表します。

通常の（転置されていない）データソースに基づく機能は元のデータソースにのみ適用されるため、項目をTransposedGridに割り当てる前に、ソート、フィルタ、グループ化、またはページ分割を行うことができますが、後でこれらのパラメータを変更した場合、 グリッドは自動的に更新されません。

また、一部の通常のFlexGrid機能は、転置されたデータソースでは意味をなさないため、TransposedGridでは使用できません。

たとえば、転置グリッドの行を追加または削除すると、データアイテムのプロパティが追加または削除されます。 このため、allowAddNewプロパティとallowDeleteプロパティは無効になっています。

また、autoGenerateColumnsプロパティは、autoGenerateRowsプロパティを持つTransposedGridには影響しません。

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • TransposedGrid クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 TransposedGrid

プロパティ

activeEditor

activeEditor: HTMLInputElement

現在アクティブになっているセルエディタを表すHTMLInputElementを取得します。

allowDragging

allowDragging: AllowDragging

ユーザーがマウスを使用して行、列、またはその両方をドラッグできるかどうかを決定する値を取得または設定します。

autoScroll プロパティがtrueに設定されている場合、ユーザーが行または列を新しい位置に ドラッグするときにグリッドの内容が自動的にスクロールされます。

グリッドでは、列のドラッグがデフォルトで有効になっています。

グリッドが連結モードでは、行をドラッグするには特別な 考慮が必要になります。

グリッドが連結モードでは、行をドラッグするとデータソースとの同期が失われます （たとえば行4は6行として参照されることがあります）。 これを回避するには、draggedRow イベントを処理し、データを新しい行の位置と同期させる必要があります。

また、allowSorting プロパティをfalseに設定する必要があります。 そうしないと、行の順序がデータによって決定され、行をドラッグするのは無意味になります。

次のフィドルでは、連結グリッドでの行のドラッグを実行しています。 Bound Row Dragging.

@link FlexGrid}コントロールに対して、このプロパティのデフォルト値はAllowDragging.Columnsです。また、PivotGridコントロールに対して、このプロパティのデフォルト値はAllowDragging.Noneです。このプロパティはMultiRowコントロールには適用されません。

allowMerging

allowMerging: AllowMerging

グリッドのどの部分のセル結合を許可するかを取得または設定します。

このプロパティのデフォルト値は、FlexGridコントロールの場合はAllowMerging.None、またPivotGridコントロールの場合はAllowMerging.Allです。

このプロパティはMultiRowコントロールには適用しません。

allowPinning

allowPinning: AllowPinning | boolean

グリッドで、列ヘッダーに固定ボタンを追加するかどうか、および固定ボタンの動作を決定する値を取得または設定します。

ユーザーが固定ボタンを使用することで、グリッドを水平方向にスクロールしても列が表示されたままになるように 列を固定できます。

このプロパティのデフォルト値は AllowPinning.None です。

allowResizing

allowResizing: AllowResizing

ユーザーがマウスを使用して行、列、またはその両方をサイズ変更できるかどうかを決定する値を取得または設定します。

サイズ変更が可能な場合は、列ヘッダーセルの右端をドラッグして列を、 行ヘッダーセルの下端をドラッグして行をサイズ変更できます。

ヘッダーセルの端をダブルクリックして、 行および列をコンテンツに合わせて自動的にサイズ変更することもできます。 自動サイズ変更の動作は、autoSizeMode プロパティを使用してカスタマイズできます。

このプロパティのデフォルト値は AllowResizing.Columnsです。

allowSorting

allowSorting: AllowSorting

ユーザーが列ヘッダーセルをクリックして列をソートできるかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はSingleColumnです。

alternatingRowStep

alternatingRowStep: number

「交互行」の間の通常行の数を決定する値を取得または設定します。

FlexGridでは、このプロパティのデフォルト値は1です。 交互の行を無効にするにはゼロに設定します。または、交互の行の間に複数の通常行を挿入するには、1より大きい数に設定します。 FlexGridコントロールに対して、このプロパティのデフォルト値は1です。また、PivotGridに対して、このプロパティのデフォルト値は0です。

anchorCursor

anchorCursor: boolean

マウスまたはキーボードで選択範囲を広げる時、現在の選択範囲の開始位置（カーソル）と終了位置のどちらを変更するかを決定する値を取得または設定します。

このプロパティのデフォルト値は falseです。これにより、 グリッド上にカーソルが移動され、選択範囲が固定されたままになります。

このプロパティが true に設定されている場合、 グリッド上に選択範囲が移動され、カーソルが固定されたままになります。 本動作はExcelと同じです。

autoClipboard

autoClipboard: boolean

グリッドがクリップボードショートカットを処理するかどうかを決定する値を取得または設定します。

次のクリップボードショートカットがあります。

［Ctrl］+［C］、［Ctrl］+［Ins］
グリッドの選択範囲をクリップボードにコピーします
［Ctrl］+［V］、［Shift］+［Ins］
クリップボードのテキストをグリッドの選択範囲に貼り付けます。

クリップボード操作は、表示されている行および列だけが対象となります。

読み取り専用セルは貼り付け操作の影響を受けません。

このプロパティのデフォルト値はtrue です。

autoGenerateColumns

autoGenerateColumns: boolean

グリッドがitemsSource に基づいて列を自動的に 生成するかどうかを 決定する値を取得または設定します。

列の生成は、少なくとも1項目を含む itemsSource プロパティに依存します。 このデータ項目が検査され、列が作成されて、 プリミティブ値（数値、文字列、Boolean、またはDate）を含むプロパティに連結されます。

プロパティをnullに設定すると、適切なタイプを推測する方法がないため、 列は生成されません。このような場合は、 autoGenerateColumns プロパティをfalseに設定し、明示的に列を作成する必要があります。次に例を示します。

import { FlexGrid } from '@grapecity/wijmo.grid';
let grid = new FlexGrid('#theGrid', {
  autoGenerateColumns: false, // データ項目にnull値が含まれる場合があります
  columns: [                  // そのため、列を明示的に定義します
    { binding: 'name', header: 'Name', dataType: 'String' },
    { binding: 'amount', header: 'Amount', dataType: 'Number' },
    { binding: 'date', header: 'Date', dataType: 'Date' },
    { binding: 'active', header: 'Active', dataType: 'Boolean' }
  ],
  itemsSource: customers
});

FlexGridコントロールに対して、このプロパティのデフォルト値は trueです。また、 PivotGrid コントロールに対して、このプロパティのデフォルト値は false　です。

autoGenerateRows

autoGenerateRows: boolean

グリッドがitemsSource に基づいて行を自動的に 生成するかどうかを 決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

autoRowHeights

autoRowHeights: boolean

データまたはグリッドレイアウトが変更されたときにグリッドが自動的に行のサイズを変更するかどうかを決定する値を取得または設定します。

このプロパティは、グリッドに内容がワードラップされるように 構成された列が含まれている場合（ Column.wordWrap) を参照）や、グリッドの行数が比較的に少ない場合は特に役立ちます。

このプロパティのデフォルト値は false です。

autoScroll

autoScroll: boolean

ユーザーが行または列を新しい位置にドラッグするときにグリッドの内容が自動的にスクロールされるかどうかを決定する値を取得または設定します。

行と列のドラッグは、allowDragging プロパティによって制御されます。

このプロパティのデフォルト値は trueです。

autoSearch

autoSearch: boolean

ユーザーが読み取り専用セルに入力するに伴ってグリッドでセルを検索するかどうかを決定する値を取得または設定します。

検索が現在選択されている列(編集不可能な場合)で行われます。 検索は現在選択されている行から始まり、大文字と小文字を区別されません。

caseSensitiveSearchプロパティもご参考ください。 このプロパティのデフォルト値は falseです。

autoSizeMode

autoSizeMode: AutoSizeMode

行または列のサイズを自動設定するときにどのセルを考慮に入れるかを取得または設定します。

このプロパティは、ユーザーが列ヘッダの端をダブルクリックしたときの動作を制御します。

デフォルトでは、その列のヘッダセルとデータセルの内容に基づいて 列の幅が自動的に設定されます。 このプロパティを使用すると、 ヘッダのみまたはデータのみに基づいて列の幅を設定するように変更できます。

このプロパティのデフォルト値は AutoSizeMode.Bothです。

bigCheckboxes

bigCheckboxes: boolean

ブール列の編集に使用されるチェックボックスがセル幅全体をカバーするように拡張するかどうかを決定する値を取得または設定します。

大きなチェックボックスは、ユーザーがセルの任意の場所をクリックして切り替えることができるため、マウスで簡単に切り替えることができます。

このプロパティのデフォルト値はfalseです。

bottomLeftCells

bottomLeftCells: GridPanel

左下のセルを含むGridPanel を取得します。

bottomLeftCells パネルは、行ヘッダの下、columnFooters パネルの左に表示されます。

caseSensitiveSearch

caseSensitiveSearch: boolean

検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。

autoSearch プロパティも参照してください。

このプロパティのデフォルト値は falseです。

cellFactory

cellFactory: CellFactory

このグリッドのセルを作成および更新するCellFactory を取得または設定します。

cells

cells: GridPanel

データセルを含むGridPanel を取得します。

childItemsPath

childItemsPath: string | string[]

階層グリッドで子の行の生成に使用される１つ以上のプロパティの名前を取得または設定します。

このプロパティには、項目の子項目を含むプロパティの名前を指定する文字列を設定します （たとえば、 childItemsPath = 'items';）。

項目の異なるレベルに異なる名前を持つ子項目がある場合は、 このプロパティに、各レベルの子項目を含むプロパティの名前から成る配列を設定します。 （たとえば、. childItemsPath = ['checks','earnings'];）。

Example

このプロパティはMultiRowコントロールには適用しません。

clientSize

clientSize: Size

コントロールのクライアントサイズを取得します（コントロールのサイズからヘッダーとスクロールバーを引いた値）。

cloneFrozenCells

cloneFrozenCells: boolean

スクロール中のちらつきを減らすために、FlexGridがフリーズされたセルを複製し、 別の要素に表示するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値は null です。これにより、 グリッドでブラウザに応じて最適な設定が適用されます。

collectionView

collectionView: ICollectionView

グリッドデータを含むICollectionView を取得します。

itemsSource プロパティが ICollectionViewに設定されている場合、 このプロパティはその値を返します。

itemsSource プロパティがデータ項目の配列に設定されている場合、 このプロパティは編集およびソートをサポートするために グリッドによって作成された内部 CollectionView を返します。

columnFooters

columnFooters: GridPanel

列フッターセルを保持するGridPanel を取得します。

columnFooters パネルは、グリッドセルの下、 bottomLeftCells パネルの右に表示されます。 これを使用して、 グリッドデータの下にサマリー情報を表示できます。 以下の例では、columnFooters パネルに 1行を追加して、Column.aggregate プロパティが設定された列に サマリーデータを表示する方法を示します。

function addFooterRow(flex) {

  // 集計を表示するGroupRowを作成します
  let row = new wijmo.grid.GroupRow();

  // 列フッターパネルに行を追加します
  flex.columnFooters.rows.push(row);

  // ヘッダーにシグマを表示します
  flex.bottomLeftCells.setCellData(0, 0, '\u03A3');
}

columnGroups

columnGroups: any[]

階層列グループの定義に使用される配列を取得または設定します。

配列内のアイテムは、Column オブジェクトのプロパティと、 オプションである3つのメンバーを持つJSONオブジェクトである必要があります。

  • 子列の配列を含む'columns' メンバー、

  • グループが折りたたまれたときに表示されたままにする必要がある子列のバインディングを含む'collapseTo' メンバー、

  • グループを最初に縮小する必要があるかどうかを決定する'isCollapsed' ブール値。

たとえば、次のサンプルコードは、 折りたたまれた状態で2つの列グループを含むグリッドを生成します。

new FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columnGroups: [
        { header: 'Group 1', align: 'center', collapseTo: 'country', isCollapsed: true, columns: [
            { binding: 'id', header: 'ID' },
            { binding: 'date', header: 'Date', dataType: 'Date' },
            { binding: 'country', header: 'Country', dataType: 'String' },
            { binding: 'active', header: 'Active', dataType: 'Boolean' },
        ]},
        { header: 'Group 2', align: 'center', collapseTo: 'sales', isCollapsed: true, columns: [
            { binding: 'sales', header: 'Sales', dataType: 'Number' },
            { binding: 'expenses', header: 'Expenses', dataType: 'Number' },
        ]}
    ],
    itemsSource: getData(20)
});

columnHeaders

columnHeaders: GridPanel

列ヘッダセルを含むGridPanel を取得します。

columnLayout

columnLayout: string

現在の列レイアウトを定義するJSON文字列を取得または設定します。

列レイアウト文字列は、列とそのプロパティを含む配列を表します。 これを使用して、ユーザーが定義した列レイアウトをセッションを越えて保持できます。 また、ユーザーが列レイアウトを変更できるアプリケーションで元に戻す/やり直し機能を実装することもできます。

データマップはシリアル化できないため、列レイアウト文字列に dataMap プロパティは含まれていません。

columns

columns: ColumnCollection

グリッドの列コレクションを取得します。

controlRect

controlRect: Rect

コントロールの外接矩形（ページ座標単位）を取得します。

copyHeaders

copyHeaders: HeadersVisibility

グリッドでデータをクリップボードにコピーするときに、ヘッダーセルのコンテンツを含めるかどうかを決定する値を取得または設定します。

このプロパティは、グリッドにデータを貼り付けるときに通常ヘッダー情報を含める必要がないため、 読み取り専用グリッドで特に役立ちます。

FlexGridコントロールに対して、このプロパティのデフォルト値は HeadersVisibility.Noneです。また、 PivotGrid コントロールに対して、このプロパティのデフォルト値は HeadersVisibility.All　です。

deferResizing

deferResizing: boolean

ユーザーがマウスボタンを放すまで、行および列のサイズ変更を遅らせるかどうかを決定する値を取得または設定します。

フォルトでは、deferResizing はfalseに設定されており、 ユーザーがマウスをドラッグするに伴って行および列がサイズ変更されます。 このプロパティをtrueに設定すると、 グリッドにサイズ変更マーカーが表示され、 ユーザーがマウスボタンを放したときに初めて行または列のサイズが変更されます。

FlexGridコントロールに対して、このプロパティのデフォルト値は falseです。また、 PivotGrid コントロールに対して、このプロパティのデフォルト値は true　です。

editColumnIndex

editColumnIndex: number

項目が編集されているかどうかを示す行ヘッダパネル内の列のインデックスを取得または設定します。

このプロパティのデフォルト値は null です。これにより、 グリッドで rowHeaders パネルの最後の列に編集中のグリフが表示されます。

editRange

editRange: CellRange

現在編集中のセルを識別するCellRange を取得します。

editableCollectionView

editableCollectionView: IEditableCollectionView

グリッドデータを含むIEditableCollectionView を取得します。

errorTip

errorTip: Tooltip

showErrors プロパティがtrueに設定されているときにグリッドで検出された検証エラーを表示するために使用される Tooltip オブジェクトを取得または設定します。

デフォルトでは、このプロパティにツールチップが表示されるまでの遅延が0で （無効なセル上にマウスをホバーするとツールチップがすぐに表示される）、 HTML要素が含まれない、およびツールチップの外観を カスタマイズするための "wj-error-tip"クラスが含まれています。

このプロパティをnullに設定されている場合、 コントロールはセルの "title"属性を使用して検証エラーを表示します。

expandSelectionOnCopyPaste

expandSelectionOnCopyPaste: boolean

グリッドでクリップボードへ、またはクリップボードから、コンテンツをコピーまたは貼り付けるときに、選択範囲を自動的に拡張して結合範囲のセルを含めるかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

frozenColumns

frozenColumns: number

固定列の数を取得または設定します。

固定された列は水平方向にスクロールできませんが、セルは選択および編集できます。

このプロパティのデフォルト値は 0です。

frozenRows

frozenRows: number

固定行の数を取得または設定します。

固定された行は垂直方向にスクロールできませんが、セルは選択および編集できます。

このプロパティのデフォルト値は 0です。

groupHeaderFormat

groupHeaderFormat: string

グループヘッダーコンテンツを作成するために使用される書式文字列を取得または設定します。

この文字列は、任意のテキストと次の置換文字列を含むことができます。

  • {name}: グループ化されるプロパティの名前。
  • {value}: グループ化されるプロパティの値。
  • {level}: グループレベル。
  • {count}: このグループ内にある項目の合計数。

列がグループ化プロパティに連結されている場合は、列ヘッダーを使用して {name} パラメータを置換し、列の書式とデータマップを使用して {value} パラメータを計算します。 列がない場合は、代わりにグループ情報が使用されます。

グループプロパティに連結された非表示の列を追加して、グループヘッダーセルの書式設定をカスタマイズすることもできます。

このプロパティのデフォルト値は
'{name}: <b>{value}</b>({count:n0} items)'です。 これは、
'Country: UK (12 items)' や
'Country: Japan (8 items)'のようなグループヘッダーを作成します。

headersVisibility

headersVisibility: HeadersVisibility

行ヘッダおよび列ヘッダが表示されるかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はHeadersVisibility.Allです。

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

imeEnabled

imeEnabled: boolean

編集モードでないときに、グリッドがIME（Input Method Editor）をサポートするかどうかを決定する値を取得または設定します。

このプロパティは、日本語、中国語、韓国語など、IMEサポートを必要とする言語のサイト/アプリケーションにのみ関係します。

このプロパティのデフォルト値はfalseです。

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isReadOnly

isReadOnly: boolean

ユーザーがマウスとキーボードを使用してセル値を変更できるかどうかを判定する値を取得または設定します。

このプロパティのデフォルト値は、FlexGridコントロールの場合はfalse、またPivotGridコントロールの場合はtrueです。

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

itemFormatter

itemFormatter: IItemFormatter

このグリッドのセルのカスタマイズに使用されるフォーマッター関数を取得または設定します。

このフォーマッター関数は、任意のセルに任意の内容を追加できます。 そのため、グリッドセルの外観と動作を非常に柔軟に制御することが可能です。

指定される場合この関数は、セルを含む GridPanel 、セルの行インデックスと列インデックス、セルを表すHTML要素の4つのパラメーターをとります。 通常は、関数内でセル要素の innerHTML プロパティを変更するようにします。

例:

flex.itemFormatter = (panel, r, c, cell) => {
  if (panel.cellType == CellType.Cell) {

    // セルにスパークラインを描画します
    let col = panel.columns[c];
    if (col.name == 'sparklines') {
      cell.innerHTML = getSparkline(panel, r, c);
    }
  }
}

FlexGridはセルをリサイクルするため、 itemFormatter によってセルのスタイル属性を変更する場合は、 セルの適切でないスタイル属性を事前にリセットする必要があります。 例:

flex.itemFormatter = (panel, r, c, cell) => {

  // カスタマイズする属性をリセットします
  let s = cell.style;
  s.color = '';
  s.backgroundColor = '';
  // このセルのcolorおよびbackgroundColor属性をカスタマイズします
  ...
}

複数のクライアントがグリッドのレンダリングをカスタマイズできるようにする場合は（たとえば、ディレクティブや再利用可能なライブラリを作成するときなど）、 代わりに formatItem イベントを使用することを検討してください。 このイベントを使用すると、複数のクライアントがそれぞれ独自のハンドラをアタッチできます。

itemValidator

itemValidator: IItemValidator

セルに有効なデータが含まれているかどうかを決定するバリデータ関数を取得または設定します。

指定される場合、バリデータ関数はセルの行と列のインデックスを含むパラメータ、およびデータが既に解析されてデータ項目に適用されているかどうか（解析== false）、またはユーザーが値を編集しようとして予期されたデータ型に解析できない値を入力したかどうかを記述する解析パラメータ（解析== true）を受け取ります。

このメソッドは、エラーメッセージを含む文字列を返します。エラーが検出されなかった場合はnullを返します。

次に例を示します。

grid.itemValidator = (row: number, col: number, parsing: boolean) => {
    let item = grid.rows[row].dataItem,
        prop = grid.columns[col].binding;

    // 「解析に失敗しました」メッセージを表示します
    if (parsing) {
        if (prop == 'date') {
            return 'Please enter a valid date in the format "MM/dd/yyyy"';
        } else if (prop == 'id') {
            return 'Please enter a positive number';
        }
    }

    // 保存（解析）されたデータが有効であることを確認します
    if (prop == 'date' && item.date < minDate) {
        return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd');
    } else if (prop == 'id' && item.id < 0) {
        return '正の数を入力してください。';
    }
});

CollectionView.getError メソッドも参照してください。

itemsSource

itemsSource: any

グリッドに表示される項目を含む配列またはICollectionView を取得または設定します。

keyActionEnter

keyActionEnter: KeyAction

［ENTER］キーが押されたときに実行されるアクションを取得または設定します。

このプロパティの既定の設定はKeyAction.MoveDown　となり、 コントロールがカーソルを次の行に移動します。 この動作は標準的なExcel式の動作です。

keyActionTab

keyActionTab: KeyAction

［Tab］キーが押されたときに実行されるアクションを取得または設定します。

このプロパティの既定の設定は、KeyAction.None　となります。 これにより、Tabキーが押されたときにブラウザ上で次または前のコントロールを選択できます。これは、

ページのアクセシビリティを向上させるために推奨される設定になります。

以前のバージョンでは、デフォルトはKeyAction.Cycle　に設定されていました。 これにより、コントロールがカーソルを、グリッドを横切って下部に移動しました。 これは標準的なExcelの動作ですが、アクセシビリティには適していません。

また、KeyAction.CycleOut の設定が存在します。これにより、 カーソルがセルを通じて移動（KeyAction.CycleOut　）してから、 最後または最初のセルが選択されたときにページの次/前のコントロールに移動します。

lazyRender

lazyRender: boolean

グリッドでは、最後の描画サイクルで更新されたセルの描画をスキップするかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

mergeManager

mergeManager: MergeManager

セルの結合方法を決定するMergeManager オブジェクトを取得または設定します。

newRowAtTop

newRowAtTop: boolean

新しい行テンプレートをグリッドの上部に配置するか、下部に配置するかを示す値を取得または設定します。

newRowAtTop プロパティをtrueに設定した場合、新しい行テンプレートを常に表示したままにする場合は、 frozenRowsプロパティを 1に設定します。 これにより、新しい行テンプレートは上部に固定され、ビューからスクロールオフされなくなります。

allowAddNew プロパティがtrueに設定されている場合、および itemsSource オブジェクトが新しい項目の追加をサポートしている場合にのみ、新しい行テンプレートが表示されます。

このプロパティのデフォルト値は false です。

preserveOutlineState

preserveOutlineState: boolean

データがリフレッシュされたときに、 グリッドがノードの展開/折りたたみ状態を保持するかどうかを決定する値を取得または設定します。

preserveOutlineState プロパティの実装は、 JavaScriptのMap オブジェクトに基づいています。 このオブジェクトはIE 9およびIE 10で利用できません。 このプロパティのデフォルト値は true です。

preserveSelectedState

preserveSelectedState: boolean

データがリフレッシュされたときに、 グリッドが行の選択状態を保持するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

preserveWhiteSpace

preserveWhiteSpace: boolean

グリッドがセル内の空白をデータに表示されるとおりに保持する(white-space: pre)か、または空白を単一の空白文字に折りたたむ(white-space: normal)かどうかを決定する値を取得または設定します。

このプロパティを使用すると、CSSルールを変更せずにグリッドが空白を処理する方法を指定できます。CSSルールはスコープをより適切に制御できるため、CSSルールを使用することを選択します。

たとえば、アプリケーションのすべてのグリッド、特定のグリッド、または特定の列に適用するCSSルールを作成できます。

このプロパティをtrueに設定すると、相互運用セルテンプレート（特にVueテンプレート）を使用するアプリケーションに望ましくない影響を与える可能性があることに注意してください。

このプロパティのデフォルト値は false です。

quickAutoSize

quickAutoSize: boolean

グリッドが列のサイズを自動調整するときに精度よりもパフォーマンスを最適化するかどうかを決定する値を取得または設定します。

このプロパティをfalseに設定すると、この列の自動リサイズ処理が無効になります。 このプロパティをtrueに設定すると、 各列の wijmo.grid.Column.quickAutoSize プロパティの値に従って、その機能が有効になります。 null（デフォルト値）に設定した場合、 カスタムの itemFormatter を持たないグリッドの機能、 または formatItem イベントにアタッチされたハンドラの機能が有効になります。

クイック自動リサイズでは、行または列を自動サイズ設定するときに さまざまな方法が使用されます。

列の自動サイズ変更では、一時的なcanvas 要素を使用することで、 可能な最大幅の列を収めることができる行が検索されます。 行が検索される場合、その内容が正確に測定されます。 この方法の制限は、キャンバスがプレーンテキストのみをレンダリングすることです。 そのため、セルにHTMLテキストが含まれている場合、 自動リサイズのときに最も幅の広い列が失われる可能性があります。

行の自動リサイズでは、セルの内容に基づいて行の高さを格納するようにキャッシュが使用され、数値セルの測定がスキップされます。 この方法の制限は、多くのセルが同じ内容である場合、または多くの列が数値である場合にのみパフォーマンスが向上することです。

自動リサイズによって、アプリケーションの動作が遅くなっている場合 quickAutoSize をtrueに設定し、アプリのパフォーマンスが向上することができます。

refreshOnEdit

refreshOnEdit: boolean

１つのセルが編集された後にグリッドのすべてのセルを更新するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

rowHeaderPath

rowHeaderPath: string

行ヘッダーセルを作成するために使用されるプロパティの名前を取得または設定します。

行ヘッダーセルは表示されないし、選択することもできません。 アクセシビリティツールと組み合わせて使用することを意図しています。

rowHeaders

rowHeaders: GridPanel

行ヘッダセルを含むGridPanel を取得します。

rows

rows: RowCollection

グリッドの行コレクションを取得します。

scrollPosition

scrollPosition: Point

リッドのスクロールバーの値を表すPoint を取得または設定します。

scrollSize

scrollSize: Size

グリッド内容のサイズ（ピクセル単位）を取得します。

selectedItems

selectedItems: any[]

現在選択されているデータ項目を含む配列を取得または設定します。

メモ: このプロパティはすべての選択モードで取得できますが、設定できるのはselectionMode がSelectionMode.ListBox　に設定されているときだけです。

selectedRanges

selectedRanges: CellRange[]

現在の選択範囲を表す CellRange オブジェクトを含む配列を取得または設定します。

配列内の最初の要素は現在の selectionです。 グリッドの selectionMode プロパティが SelectionMode.MultiRange に設定されている場合、 配列には拡張された選択範囲を表す追加の選択範囲が含まれる可能性があります。

selectedRanges 配列内の選択範囲には重なる領域が含まれることに注意してください。 これは、拡張した選択範囲に対する集約などのような操作を実行するときに必要になります。

selectedRows

selectedRows: Row[]

現在選択されている行を含む配列を取得または設定します。

メモ: このプロパティはすべての選択モードで取得できますが、設定できるのはselectionMode がSelectionMode.ListBox　に設定されているときだけです。

selection

selection: CellRange

現在の選択を取得または設定します。

selectionMode

selectionMode: SelectionMode

現在の選択モードを取得または設定します。

showDropDown

showDropDown: boolean

グリッドがデータマップされたセルにドロップダウンボタンを追加するかどうかを示す値を取得または設定します。

これらのドロップダウンボタンは、 列にColumn.dataMap が設定され、編集可能である場合にのみ表示されます。 ユーザーがドロップダウンボタンをクリックすると、 セルの値を選択するために使用できるドロップダウンリストがグリッドに表示されます。 この設定は、列のColumn.dataMapEditorプロパティを使用して特定の列でオーバーライドされる場合があります。

セルのドロップダウンを使用するには、wijmo.input moduleモジュールをロードしておく必要があります。

showErrors

showErrors: boolean

グリッドで、検証エラーがあるセルとエラーの説明を含むツールチップに'wj-state-invalid' クラスを追加するかどうかを指定する値を取得または設定します。

グリッドは、グリッドのitemsSourceのitemValidator プロパティおよびCollectionView.getError プロパティを使用して、検証エラーを検出します。

このプロパティのデフォルト値は true です。

showGroups

showGroups: boolean

データグループを区切るために FlexGrid にグループ行を挿入するかどうかを決定する値を 取得または設定します。

データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのICollectionView.groupDescriptions プロパティを変更します。

このプロパティのデフォルト値はtrueです。

showMarquee

showMarquee: boolean

現在の選択範囲の周囲にマーキー要素を表示するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

showSelectedHeaders

showSelectedHeaders: HeadersVisibility

選択されているヘッダセルを示すためにクラス名を追加するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はHeadersVisibility.Noneです。

showSort

showSort: boolean

グリッドで、列ヘッダーにソートインジケータを 表示するかどうかを決定する値を取得または設定します。

ソートは、グリッドのitemsSource として使用されるICollectionView オブジェクトの ICollectionView.sortDescriptions プロパティによって制御されます。

このプロパティのデフォルト値はtrueです。

sortRowIndex

sortRowIndex: number

ソートインジケーターを表示する列ヘッダパネルの行のインデックスを取得または設定します。

デフォルトでは、このプロパティは nullに設定されており、 columnHeaders パネルの最後の行がソート行になります。

stickyHeaders

stickyHeaders: boolean

ユーザーがドキュメントをスクロールしたときに、 列ヘッダーを表示したままにするかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はfalse です。

topLeftCells

topLeftCells: GridPanel

左上のセル（列ヘッダーの左）を含むGridPanel を取得します。

treeIndent

treeIndent: number

異なるレベルの行グループをオフセットするインデントを取得または設定します。

このプロパティのデフォルト値は、{@ link FlexGrid}コントロールの場合は14ピクセル単位、またPivotGridの場合は32ピクセル単位です。

validateEdits

validateEdits: boolean

検証に失敗した編集をユーザーがコミットしようとしたときに、グリッドを編集モードのままにするかどうかを指定する値を取得または設定します。

グリッドは、グリッドのitemsSource のCollectionView.getError メソッドを呼び出して、検証エラーを検出します。

このプロパティのデフォルト値は true です。

viewRange

viewRange: CellRange

現在表示されているセルの範囲を取得します。

virtualizationThreshold

virtualizationThreshold: number | number[]

仮想化を有効にするために必要な最小行数、最小列数、 またはその両方を取得または設定します。

このプロパティはデフォルトでゼロに設定されます。つまり、仮想化は常に有効ということです。 これにより、バインディングパフォーマンスとメモリー必要量が向上しますが、 スクロール時のパフォーマンス低下は犠牲になります。

グリッドの行数が少ない場合（約50〜100）、このプロパティを150などのやや高い値に設定することで、 スクロールのパフォーマンスを向上させることができます。これにより、 仮想化が無効になり連結処理が遅くなりますが、認識されるスクロールのパフォーマンスが向上する可能性があります。 たとえば、以下のコードは、データソースに150を超える項目がある場合、 グリッドがセルを仮想化します。

// 150を超える項目がある場合はグリッドを仮想化します
theGrid.virtualizationThreshold = 150;

このプロパティを200より大きい値に設定することは推奨されません。 ロード処理の時間が長くなり、グリッドはすべての行のセルを作成しているときに数秒間フリーズするため、 ページ上の要素数が多いためブラウザが遅くなります。 行と列に別々の仮想化しきい値を設定する場合は、 virtualizationThreshold プロパティを2つの数値を含む配列に設定できます。この場合、 最初の数値は行のしきい値として使用され、2番目の数値は列のしきい値として使用されます。 たとえば、次のコードでは、グリッドは行を仮想化しますが、列を仮想化しません。

// 行（しきい値0）は仮想化しますが、列は仮想化しません（しきい値10,000）
theGrid.virtualizationThreshold = [0, 10000];

このプロパティのデフォルト値は 0 で、すべての行と列を仮想化します。

静的 controlTemplate

controlTemplate: string

FlexGrid コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

静的 defaultTypeWidth

defaultTypeWidth: object

列タイプに基づいて自動生成されたグリッド列のデフォルトの幅を定義する静的なオブジェクトへの参照を取得します。

オブジェクトキーは DataType 値です。 オブジェクトの値は、 数値（ピクセル単位での幅）またはスターサイズの文字列 （列のdefaultSizeプロパティで定義されているデフォルトの幅の倍数）です。

次に例を示します。

import { FlexGrid } from '@grapecity/wijmo.grid';
import { DataType } from '@grapecity/wijmo';

// デフォルトですべてのグリッドのブール列を「100px」幅にします
FlexGrid.defaultTypeWidth[DataType.Boolean] = 100;

// すべてのグリッドの数値列を列のdefaultSizeと同じ幅「75％」にします
FlexGrid.defaultTypeWidth[DataType.Number] = '0.75*';

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。 以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    引数

    • classNames: string

      コントロールのホスト要素に追加するクラスの名前。

    • template: string

      コントロールのテンプレートを定義するHTML文字列。

    • parts: Object

      パーツ変数とその名前のディクショナリー。

    • オプション namePart: string

      ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    戻り値 HTMLElement

autoSizeColumn

  • autoSizeColumn(c: number, header?: boolean, extra?: number): void

  • 列をその内容がちょうど収まるようにサイズ変更します。

    ホスト要素がDOMに追加されていない場合、 またはグリッドの祖先要素が非表示の場合、 グリッドはセルを測定することができませんので、 列のサイズを自動的に変更することはできません。

    引数

    • c: number

      サイズ変更する列のインデックス。

    • オプション header: boolean

      列インデックスの参照先が通常の列であるか、ヘッダ列であるか。

    • オプション extra: number

      追加の間隔（ピクセル単位）。

    戻り値 void

autoSizeColumns

  • autoSizeColumns(firstColumn?: number, lastColumn?: number, header?: boolean, extra?: number): void

  • 列の範囲をその内容がちょうど収まるようにサイズ変更します。

    測定される行の範囲は常に、現在表示されているすべての行 + 現在表示されていない最大2,000行です。 If the grid contains a large amount グリッドに大量のデータが含まれている場合には（たとえば、50,000行など）、 すべての行を測定すると非常に時間がかかる可能性があるため、すべての行は測定されません。

    ホスト要素がDOMに追加されていない場合、 またはグリッドの祖先要素が非表示の場合、 グリッドはセルを測定することができませんので、 列のサイズを自動的に変更することはできません。

    引数

    • オプション firstColumn: number

      サイズ変更する最初の列のインデックス（デフォルトは最初の列）。

    • オプション lastColumn: number

      サイズ変更する最後の列のインデックス（デフォルトは最後の列）。

    • オプション header: boolean

      列インデックスの参照先が通常の列であるか、ヘッダ列であるか。

    • オプション extra: number

      追加の間隔（ピクセル単位）。

    戻り値 void

autoSizeRow

  • autoSizeRow(r: number, header?: boolean, extra?: number): void

  • 行をその内容がちょうど収まるようにサイズ変更します。

    ホスト要素がDOMに追加されていない場合、 またはグリッドの祖先要素が非表示の場合、 グリッドはセルを測定することができませんので、 列のサイズを自動的に変更することはできません。

    引数

    • r: number

      サイズ変更する行のインデックス。

    • オプション header: boolean

      行インデックスの参照先が通常の列であるか、ヘッダ行であるか。

    • オプション extra: number

      追加の間隔（ピクセル単位）。

    戻り値 void

autoSizeRows

  • autoSizeRows(firstRow?: number, lastRow?: number, header?: boolean, extra?: number): void

  • 行の範囲をその内容がちょうど収まるようにサイズ変更します。

    ホスト要素がDOMに追加されていない場合、 またはグリッドの祖先要素が非表示の場合、 グリッドはセルを測定することができませんので、 列のサイズを自動的に変更することはできません。

    引数

    • オプション firstRow: number

      サイズ変更する最初の行のインデックス。

    • オプション lastRow: number

      サイズ変更する最初の行のインデックスす。

    • オプション header: boolean

      行インデックスの参照先が通常の行であるか、ヘッダ行であるか。

    • オプション extra: number

      追加の間隔（ピクセル単位）。

    戻り値 void

beginUpdate

  • beginUpdate(): void

canEditCell

  • canEditCell(r: number, c: number): boolean

  • 指定されたセルが編集可能かどうかを示す値を取得します。

    引数

    • r: number

      セルを含む行のインデックス。

    • c: number

      セルを含む列のインデックス。

    戻り値 boolean

collapseGroupsToLevel

  • collapseGroupsToLevel(level: number): void

  • すべてのグループ行を指定したレベルに折りたたみます。

    引数

    • level: number

      表示する最大のグループレベル。

    戻り値 void

containsFocus

  • containsFocus(): boolean

  • このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

    戻り値 boolean

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

  • ホスト要素との関連付けを解除することによってコントロールを破棄します。

    戻り値 void

endUpdate

  • endUpdate(): void

finishEditing

  • finishEditing(cancel?: boolean): boolean

  • 保留中の編集をすべてコミットし、編集モードを終了します。

    引数

    • オプション cancel: boolean

      保留中の編集をキャンセルするかコミットするか。

    戻り値 boolean

    True if the edit operation finished successfully.

focus

  • focus(): void

  • グリッド全体をスクロールしてビューに入れることなくグリッドにフォーカスを設定するようにオーバーライドされます。

    戻り値 void

getCellBoundingRect

  • getCellBoundingRect(r: number, c: number, raw?: boolean): Rect

  • セル要素の範囲（ビューポート座標単位）を取得します。

    このメソッドは、 cellsパネル内のセル（スクロール可能なデータセル）の範囲を返します。 その他のパネルにあるセルの範囲を取得するには、該当する GridPanel オブジェクトの getCellBoundingRect メソッドを使用してください。

    戻り値は、セルの位置とサイズ（ビューポート座標単位）を 含むRect オブジェクトです。 このビューポート座標は、 getBoundingClientRectメソッドで使用されている座標と同じです。

    引数

    • r: number

      セルを含む行のインデックス。

    • c: number

      セルを含む列のインデックス。

    • オプション raw: boolean

      返される矩形の単位をビューポート座標ではなく生のパネル座標にするかどうか。

    戻り値 Rect

getCellData

  • getCellData(r: number, c: number | string, formatted: boolean): any

  • グリッドのスクロール可能領域内のセルに格納された値を取得します。

    引数

    • r: number

      セルを含む行のインデックス。

    • c: number | string

      セルを含む列のインデックス、名前、またはバインディング。

    • formatted: boolean

      値を表示用に書式設定するかどうか。

    戻り値 any

getClipString

  • CellRange の内容を、クリップボードへのコピーまたはCSV（カンマ区切り値）ファイルへのエクスポートに適した文字列として取得します。

    非表示の行および列はクリップボード文字列に含まれません。

    引数

    • オプション rng: CellRange

      コピーするCellRange 。 省略した場合、現在の選択範囲が使用されます。

    • オプション options: boolean | ClipStringOptions

      クリップ文字列を指定するブール値は、CSV文字列またはクリップ文字列に対する オプションを指定する ClipStringOptions 値である必要があります。

    • オプション colHeaders: boolean

      列ヘッダーを含めるかどうか。

    • オプション rowHeaders: boolean

      行のヘッダーを含むかどうか。

      現在の選択範囲をエクスポートするには、 rng パラメータをnullに設定します。 これにより、主な選択範囲だけでなく、選択された行（ SelectionMode.ListBox モードの場合) や複数の選択範囲（ SelectionMode.MultiRange モードの場合）などの拡張した選択範囲も含まれます。

      選択したすべての範囲が同じ列範囲または行範囲を参照している場合のみに、複数の選択範囲が含まれます。

    戻り値 string

getColumn

  • getColumn(name: string | number): Column

  • 名前または連結に基づいて列を取得します。

    このメソッドは、名前で列を検索します。指定された名前を持つ列が見つからない場合は、 バインディングによって検索します。検索では大文字と小文字が区別されます。

    引数

    • name: string | number

      列の名前、バインディング、またはインデックス。

    戻り値 Column

    The column with the specified name or binding, or null if not found.

getMergedRange

  • GridPanel 内のセルの結合範囲を指定するCellRange を取得します。

    引数

    • p: GridPanel

      範囲を含むGridPanel。

    • r: number

      セルを含む行のインデックス。

    • c: number

      セルを含む列のインデックス。

    • オプション clip: boolean

      結合範囲をグリッドの現在のビュー範囲にクリップするかどうか。

    戻り値 CellRange

    A CellRange that specifies the merged range, or null if the cell is not merged.

getSelectedState

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

hitTest

  • hitTest(pt: number | Point | MouseEvent | HTMLElement, y?: number | boolean): HitTestInfo

  • 指定されたポイントに関する情報を含むwijmo.grid.HitTestInfo オブジェクトを取得します。

    次に例を示します。

    // ユーザーがグリッドをクリックしたときに、ポイントをヒットテストします
flex.hostElement.addEventListener('click', (e) => {
  let ht = flex.hitTest(e.pageX, e.pageY);
  console.log('you clicked a cell of type "' +
    wijmo.grid.CellType[ht.cellType] + '".');
});

    引数

    • pt: number | Point | MouseEvent | HTMLElement

      調べるPoint （ページ座標単位）、MouseEventオブジェクト、またはポイントのX座標。

    • オプション y: number | boolean

      ポイントのY座標（ページ座標単位、最初のパラメーターが数値の場合）。

    戻り値 HitTestInfo

    A wijmo.grid.HitTestInfo object with information about the point.

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});
// これは以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうか。

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

isRangeValid

  • 指定したCellRangeがこのグリッドの行および列コレクションに対して有効かどうかをチェックします。

    引数

    戻り値 boolean

onAutoSizedColumn

onAutoSizedRow

onAutoSizingColumn

onAutoSizingRow

onBeginningEdit

onCellEditEnded

onCellEditEnding

onColumnGroupCollapsedChanged

onColumnGroupCollapsedChanging

onCopied

onCopying

onDeletedRow

onDeletingRow

onDraggedColumn

onDraggedRow

onDraggingColumn

onDraggingColumnOver

onDraggingRow

onDraggingRowOver

onFormatItem

onGotFocus

onGroupCollapsedChanged

onGroupCollapsedChanging

onItemsSourceChanged

onItemsSourceChanging

onLoadingRows

onLostFocus

onPasted

onPastedCell

onPasting

onPastingCell

onPinnedColumn

onPinningColumn

onPrepareCellForEdit

onRefreshed

onRefreshing

onResizedColumn

onResizedRow

onResizingColumn

onResizingRow

onRowAdded

onRowEditEnding

onRowEditStarted

onRowEditStarting

onScrollPositionChanged

  • onScrollPositionChanged(e?: EventArgs): void

onSelectionChanged

onSelectionChanging

onSortedColumn

onSortingColumn

onStarSizedColumns

onUpdatedLayout

onUpdatedView

onUpdatingLayout

onUpdatingView

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

refreshCells

  • refreshCells(fullUpdate: boolean, recycle?: boolean, state?: boolean): void

  • グリッドの表示を更新します。

    引数

    • fullUpdate: boolean

      グリッドのレイアウトと内容を更新するか、内容だけを更新するか。

    • オプション recycle: boolean

      既存の要素を再利用するかどうか。

    • オプション state: boolean

      既存の要素を保持してその状態を更新するかどうか。

    戻り値 void

refreshRange

  • 選択範囲内のセルを更新し、その内容とスタイルを更新します。

    すべてのセルを更新する refreshCells メソッドとは異なり、 refreshRange ではどのセルを更新するかを指定できます。 これにより、 パフォーマンスを向上させることができます。

    引数

    戻り値 void

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    The number of listeners removed.

scrollIntoView

  • scrollIntoView(r: number, c: number, refresh?: boolean): boolean

  • 指定したセルが画面に入るようにグリッドをスクロールします。

    負の行と列のインデックスは無視されるので、以下を呼び出すと、

    grid.scrollIntoView(200, -1);

    グリッドは200行目を表示するように垂直にスクロールしますが、水平にスクロールしません。

    引数

    • r: number

      画面に入るようにスクロールする行のインデックス

    • c: number

      画面に入るようにスクロールする列のインデックス。

    • オプション refresh: boolean

      スクロールした新しい位置をすぐ表示するためにグリッドを更新する必要があるかどうかを決定するオプションのパラメータ。

    戻り値 boolean

    True if the grid scrolled.

select

  • select(rng: number | CellRange, show?: number | false | true): boolean

  • セル範囲を選択し、オプションでそのセル範囲が画面に入るようにスクロールします。

    select メソッドは、 CellRange 、と新しい選択範囲を画面に入るようにスクロールするかどうかを示すオプションの ブール型パラメータを渡すことで呼び出すことができます。 以下に例を示しています。

    // セル1,1を選択して画面に入るようにスクロールします
grid.select(new CellRange(1, 1), true);

// 選択範囲（1,1）~（2,4）を指定し、画面に入るようにスクロールしません
grid.select(new CellRange(1, 1, 2, 4), false);

    select メソッドを呼び出してインデックスまたは選択する行と列を渡すこともできます。 この場合、選択範囲が画面に入るようにスクロールします。 以下に例を示しています。

    // セル1,1を選択して画面に入るようにスクロールします
grid.select(1, 1);

    引数

    • rng: number | CellRange

      選択する範囲（または選択する行のインデックス）。

    • オプション show: number | false | true

      新しい選択範囲が画面に入るようにスクロール（または選択する列のインデックス）するかどうか。

    戻り値 boolean

    True if the new selection was applied.

selectAll

  • selectAll(): boolean

  • グリッド内のすべてのセルを選択します。

    戻り値 boolean

setCellData

  • setCellData(r: number, c: string | number, value: any, coerce?: boolean, invalidate?: boolean): boolean

  • グリッドのスクロール可能領域内のセルの値を設定します。

    引数

    • r: number

      セルを含む行のインデックス。

    • c: string | number

      セルを含む列のインデックス、名前、またはバインディング。

    • value: any

      セルに格納する値。

    • オプション coerce: boolean

      列のデータ型に合わせて値を自動的に変更するかどうか。

    • オプション invalidate: boolean

      グリッドを無効にして変更を表示するかどうか。

    戻り値 boolean

    True if the value was stored successfully, false otherwise.

setClipString

  • setClipString(text: string, rng?: CellRange): void

  • 文字列を行および列に解析し、その内容を特定の範囲に適用します。

    非表示の行および列はスキップされます。

    引数

    • text: string

      グリッドに解析する、タブと改行で区切られたテキスト。

    • オプション rng: CellRange

      コピーするCellRange 。 省略した場合、現在の選択範囲が使用されます。

    戻り値 void

startEditing

  • startEditing(fullEdit?: boolean, r?: number, c?: number, focus?: boolean, evt?: any): boolean

  • 指定されたセルの編集を開始します。

    FlexGrid の編集は、Excelの編集によく似ています。 ［F2］キーを押すか、セルをダブルクリックすると、 グリッドが 完全編集 モードになります。 このモードでは、ユーザーがEnter、Tab、Esc、またはいずれかの矢印キーを押すまで、 セルエディタはアクティブなままになります。 完全編集モードでは、 カーソルキーを押しても、グリッドの編集モードは終了しません。

    テキストをセルに直接入力すると、グリッドは クイック編集 モードになります。 このモードでは、ユーザーがEnter、Tab、Esc、またはいずれかの矢印キーを押すまで、 セルエディタはアクティブなままになります。

    通常、完全編集モードは既存の値を変更する際に使用します。 クイック編集モードは新しいデータをすばやく入力する際に使用します。

    編集中に［F2］キーを押すことで、完全編集モードとクイック編集モードを切り替えることができます。

    引数

    • オプション fullEdit: boolean

      ユーザーがカーソルキーを押したときも編集モードのままにするかどうか。デフォルトはtrueです。

    • オプション r: number

      編集する行のインデックス。 デフォルトは現在選択されている行です。

    • オプション c: number

      編集する列のインデックス。 デフォルトは現在選択されている列です。

    • オプション focus: boolean

      編集開始時に、エディタにフォーカスを与えるかどうか。デフォルトはtrueです。

    • オプション evt: any

      このアクションをトリガーしたイベント（通常はキープレスまたはキーダウン）。

    戻り値 boolean

    True if the edit operation started successfully.

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

toggleDropDownList

  • toggleDropDownList(): boolean

  • 現在選択されているセルに関連付けられたドロップダウンリストボックスを切り替えます。

    このメソッドでは、セルが編集モードに入ったとき、またはユーザが特定のキーを押したときに、 ドロップダウンリストを自動的に表示することができます。

    たとえば、このコードでは、グリッドが編集モードに入るたびに、グリッドにドロップダウンリストが表示されます。

    // グリッドが編集モードに入ると、ドロップダウンリストを表示する
theGrid.beginningEdit = () => {
  theGrid.toggleDropDownList();
}

    このコードでは、ユーザーがスペースバーを押した場合、グリッドが編集モードに入った後で、ドロップダウンリストが表示されます。

    // ユーザーがスペースバーを押したときにドロップダウンリストを表示する
theGrid.hostElement.addEventListener('keydown', (e) => {
  if (e.keyCode == 32) {
    e.preventDefault();
    theGrid.toggleDropDownList();
  }
}, true);

    戻り値 boolean

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

autoSizedColumn

autoSizedColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列ヘッダセルの右端をダブルクリックして列のサイズを自動設定した後に発生します。

autoSizedRow

autoSizedRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行ヘッダセルの下端をダブルクリックして行のサイズを自動設定した後に発生します。

autoSizingColumn

autoSizingColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列ヘッダセルの右端をダブルクリックして列のサイズを自動設定する前に発生します。

autoSizingRow

autoSizingRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行ヘッダセルの下端をダブルクリックして行のサイズを自動設定する前に発生します。

beginningEdit

beginningEdit: Event<FlexGrid, CellRangeEventArgs>

セルが編集モードに入る前に発生します。

ハンドラーのパラメーターの 'data'プロパティには、グリッドを編集モードにさせたDOMイベントへの参照が含まれています。

このイベントハンドラでは、編集操作をキャンセルできます。

cellEditEnded

cellEditEnded: Event<FlexGrid, CellRangeEventArgs>

セル編集が確定またはキャンセルされたときに発生します。

cellEditEnding

cellEditEnding: Event<FlexGrid, CellEditEndingEventArgs>

セル編集が終了するときに発生します。

このイベントを使用して検証を実行し、無効な編集を防ぐことができます。 たとえば、次のコードは、ユーザーが文字「a」を含まない値を入力できないようにします。 このコードは、編集が適用される前に、編集前と編集後の値を取得する方法を示しています。

function cellEditEnding(flex, e) {

  // 編集前と編集後の値を取得します
  let oldVal = flex.getCellData(e.row, e.col),
      newVal = flex.activeEditor.value;

  // newValに「a」が含まれていない場合は、編集をキャンセルします
  e.cancel = newVal.indexOf('a') &lt; 0;
}

CellEditEndingEventArgs.cancel パラメータをtrueに設定すると、編集された値が無視されて、 グリッドでセルの元の値が維持されます。

また、CellEditEndingEventArgs.stayInEditMode パラメータをtrueに設定すると、 グリッドの編集モードが維持され、編集をコミットする前にユーザーが無効な値を修正できます。

columnGroupCollapsedChanged

columnGroupCollapsedChanged: Event<FlexGrid, CellRangeEventArgs>

列グループが展開または折りたたまれた後に発生します。

ハンドラーのパラメーターの 'data'プロパティには、変更されるColumnGroupへの参照が含まれています。

columnGroupCollapsedChanging

columnGroupCollapsedChanging: Event<FlexGrid, CellRangeEventArgs>

列グループが展開または折りたたまれる直前に発生します。

ハンドラーのパラメーターの 'data'プロパティには、変更されるColumnGroupへの参照が含まれています。

copied

copied: Event<FlexGrid, CellRangeEventArgs>

ユーザーがいずれかのクリップボードショートカットキーを押して選択されている内容をクリップボードにコピーした後に発生します（autoClipboard プロパティを参照）。

copying

copying: Event<FlexGrid, CellRangeEventArgs>

ユーザーがいずれかのクリップボードショートカットキーを押して選択されている内容をクリップボードにコピーするときに発生します（autoClipboard プロパティを参照）。

イベントハンドラでコピー操作をキャンセルできます。

deletedRow

deletedRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが［Del］キーを押して行を削除した後に発生します （allowDelete プロパティを参照）。

deletingRow

deletingRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが［Delete］キーを押して選択されている行を削除するときに発生します（allowDelete プロパティを参照）。

イベントハンドラで行の削除をキャンセルできます。

draggedColumn

draggedColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列のドラッグを完了したときに発生します。

draggedRow

draggedRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行のドラッグを完了したときに発生します。

draggingColumn

draggingColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列のドラッグを開始するときに発生します。

draggingColumnOver

draggingColumnOver: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列を別の位置にドラッグするときに発生します。

ハンドラは、このイベントをキャンセルして、ユーザーが特定の位置に列をドロップしないようにすることができます。 次に例を示します。

// ドラッグされている列を記憶します
flex.draggingColumn.addHandler((s, e) => {
    theColumn = s.columns[e.col].binding;
});

// 'sales'列がインデックス0にドラッグされないようにします
s.draggingColumnOver.addHandler((s, e) => {
    if (theColumn == 'sales' && e.col == 0) {
        e.cancel = true;
    }
});

draggingRow

draggingRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行のドラッグを開始するときに発生します。

draggingRowOver

draggingRowOver: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行を別の位置にドラッグするときに発生します。

formatItem

formatItem: Event<FlexGrid, FormatItemEventArgs>

セルを表す要素が作成されたときに発生します。

このイベントを使用してセルを表示用に書式設定できます。このイベントは、目的はitemFormatter プロパティと同じですが、複数の独立したハンドラを使用できる利点があります。

以下のサンプルコードは、グループ行のセルから'wj-wrap'クラスを削除します。

flex.formatItem.addHandler((flex, e) => {
  if (flex.rows[e.row] instanceof wijmo.grid.GroupRow) {
    wijmo.removeClass(e.cell, 'wj-wrap');
  }
});

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

groupCollapsedChanged

groupCollapsedChanged: Event<FlexGrid, CellRangeEventArgs>

グループが展開または折りたたまれた後に発生します。

groupCollapsedChanging

groupCollapsedChanging: Event<FlexGrid, CellRangeEventArgs>

グループが展開または折りたたまれる直前に発生します。

itemsSourceChanged

itemsSourceChanged: Event<FlexGrid, EventArgs>

グリッドが新しい項目ソースにバインドされた後に発生します。

itemsSourceChanging

itemsSourceChanging: Event<FlexGrid, CancelEventArgs>

グリッドが新しい項目ソースにバインドされれ前に発生します。

loadedRows

loadedRows: Event<FlexGrid, EventArgs>

グリッド行がデータソースの項目に連結された後に発生します。

loadingRows

loadingRows: Event<FlexGrid, CancelEventArgs>

グリッド行がデータソースの項目に連結される前に発生します。

lostFocus

lostFocus: Event<Control, EventArgs>

コントロールがフォーカスを失ったときに発生します。

pasted

pasted: Event<FlexGrid, CellRangeEventArgs>

ユーザーがいずれかのクリップボードショートカットキーを押してクリップボードの内容を貼り付けた後に発生します（autoClipboard プロパティを参照）。

pastedCell

pastedCell: Event<FlexGrid, CellRangeEventArgs>

ユーザーがクリップボードの内容をセルに貼り付けた後に発生します（autoClipboard プロパティを参照）。

pasting

pasting: Event<FlexGrid, CellRangeEventArgs>

ユーザーがいずれかのクリップボードショートカットキーを押してクリップボードの内容を貼り付けた時に発生します（autoClipboard プロパティを参照）。

ハンドラーのパラメーターの 'data'プロパティには、グリッドに貼り付けられるテキストのコピーが含まれています。

このイベントハンドラーは、貼り付け操作をキャンセルできます。

pastingCell

pastingCell: Event<FlexGrid, CellRangeEventArgs>

ユーザーがクリップボードの内容をセルに貼り付けるときに発生します（autoClipboard プロパティを参照）。

ハンドラーのパラメーターの 'data'プロパティには、セルに貼り付けられるテキストのコピーが含まれています。

このイベントハンドラーは、貼り付け操作をキャンセルできます。

pinnedColumn

pinnedColumn: Event<FlexGrid, CellRangeEventArgs>

1つ以上の列が固定された後に発生します。

pinningColumn

pinningColumn: Event<FlexGrid, CellRangeEventArgs>

1つ以上の列が固定される前に発生します。

prepareCellForEdit

prepareCellForEdit: Event<FlexGrid, CellRangeEventArgs>

エディタセルが作成されたとき、それがアクティブになる前に発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

resizedColumn

resizedColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列のサイズ変更を完了したときに発生します。

resizedRow

resizedRow: Event<FlexGrid, CellRangeEventArgs>

ユーザーが行のサイズ変更を完了したときに発生します。

resizingColumn

resizingColumn: Event<FlexGrid, CellRangeEventArgs>

列がサイズ変更されるときに発生します。

resizingRow

resizingRow: Event<FlexGrid, CellRangeEventArgs>

行がサイズ変更されるときに発生します。

rowAdded

rowAdded: Event<FlexGrid, CellRangeEventArgs>

ユーザーが新規行テンプレートを編集して新しい項目を作成したときに発生します（allowAddNew プロパティを参照）。

イベントハンドラで新しい項目の内容をカスタマイズしたり、 新しい項目の作成をキャンセルしたりできます。

rowEditEnded

rowEditEnded: Event<FlexGrid, CellRangeEventArgs>

行編集が確定またはキャンセルされたときに発生します。

rowEditEnding

rowEditEnding: Event<FlexGrid, CellRangeEventArgs>

行編集が終了するとき、変更が確定またはキャンセルされる前に発生します。

このイベントをrowEditStarted イベントと組み合わせて使用して、 ディープ連結編集を元に戻す操作を実装できます。 次に例を示します。

// 編集の開始時にディープ連結値を保存します
let itemData = {};
s.rowEditStarted.addHandler((s, e) => {
  let item = s.collectionView.currentEditItem;
  itemData = {};
  s.columns.forEach(function (col) {
    if (col.binding.indexOf('.') &gt; -1) { // deep binding
      let binding = new wijmo.Binding(col.binding);
      itemData[col.binding] = binding.getValue(item);
    }
  })
});

// 編集がキャンセルされたときにディープ連結値を復元します
s.rowEditEnded.addHandler((s, e) => {
  if (e.cancel) { // 編集はユーザーによってキャンセルされました
    let item = s.collectionView.currentEditItem;
    for (let k in itemData) {
      let binding = new wijmo.Binding(k);
      binding.setValue(item, itemData[k]);
    }
  }
  itemData = {};
});

rowEditStarted

rowEditStarted: Event<FlexGrid, CellRangeEventArgs>

行が編集モードに入った後に発生します。

rowEditStarting

rowEditStarting: Event<FlexGrid, CellRangeEventArgs>

行が編集モードに入る前に発生します。

scrollPositionChanged

scrollPositionChanged: Event<FlexGrid, EventArgs>

コントロールがスクロールされた後に発生します。

selectionChanged

selectionChanged: Event<FlexGrid, CellRangeEventArgs>

選択が変更された後に発生します。

selectionChanging

selectionChanging: Event<FlexGrid, CellRangeEventArgs>

選択が変更される前に発生します。

sortedColumn

sortedColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列ヘッダをクリックしてソートを適用した後に発生します。

sortingColumn

sortingColumn: Event<FlexGrid, CellRangeEventArgs>

ユーザーが列ヘッダをクリックしてソートを適用する前に発生します。

ハンドラーのパラメーターの 'data'プロパティには、ソートを実行させたDOMイベントへの参照が含まれています。

このイベントハンドラーは、ソートアクションをキャンセルできます。

starSizedColumns

starSizedColumns: Event<FlexGrid, EventArgs>

スター サイズにより1つ以上の列のサイズが変更されたとき。

updatedLayout

updatedLayout: Event<FlexGrid, EventArgs>

グリッドで内部レイアウトが更新された後に発生します。

updatedView

updatedView: Event<FlexGrid, EventArgs>

グリッドが現在のビューを構成する要素の作成/更新を完了したときに発生します。

グリッドのビューは以下のような操作に応じて更新されます。

  • グリッドまたはそのデータソースの更新
  • 行または列の追加、削除、変更
  • グリッドのサイズ変更またはスクロール
  • 選択の変更。

updatingLayout

updatingLayout: Event<FlexGrid, CancelEventArgs>

グリッドで内部レイアウトが更新される前に発生します。

updatingView

updatingView: Event<FlexGrid, CancelEventArgs>

現在のビューを構成する要素の作成/更新をグリッドが開始したときに発生します。