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

Wijmo_Grid.Flexgrid

FlexGrid クラス

FlexGrid コントロールは、データを表形式で表示・編集する強力かつ柔軟な手段を提供します。

FlexGrid コントロールは機能豊富なグリッドであり、複数の選択モード、ソート、列の順序変更、グループ化、 フィルタリング、編集、カスタムセル、XAMLスタイルのスターサイズ指定、行および列の仮想化といったグリッドによく見られる機能をすべて備えています。

FlexGrid コントロールは、次のキーボードコマンドをサポートしています。

キーの組み合わせアクション
Shift + Space行全体を選択する
Control + Space列全体を選択する
F2アクティブなセルを編集します
Space編集の開始またはチェックボックスの切り替え
Control + Aグリッドの内容全体を選択します
Left/Right現在の選択範囲の左/右にあるセルを選択するか、またはグループ行を折りたたむ/展開します
Shift + Left/Right選択の左/右にあるセルを選択範囲に追加するように選択範囲を拡大します
Up/Down選択範囲の１つ上または下にあるセルを選択します
Shift + Up/Down選択範囲の上または下にあるセルを選択範囲に追加するように選択範囲を拡大します
Alt + Up/Down現在のセルのリストボックスエディタをドロップダウン表示します
PageUp/Down選択範囲の1ページ上または下のセルを選択します
Shift + PageUp/Down選択範囲に1ページ上のセルまたは1ページ下のセルを含めるように選択範囲を拡張します
Alt + PageUp/Down選択範囲を最初または最後の行に移動します
Shift + Alt + PageUp/Down最初または最後の行を含むように選択範囲を拡張します
Home/End選択範囲を最初または最後の列に移動します
Shift + Home/End選択範囲を最初または最後の列に移動します
Ctrl + Home/End選択範囲を最初または最後の行と列に移動します
Shift + Ctrl + Home/End最初または最後の行と列を含むように選択範囲を拡張します
Escape現在のセルまたは行の編集操作をキャンセルします
Tab選択範囲をページ上の次のフォーカス可能な要素に移動します（デフォルトでは、 keyActionTab プロパティを使用してオーバーライドできます）
Enter編集モードを終了し、選択範囲を現在のセルの下のセルに移動します（デフォルトでは、 keyActionEnter プロパティを使用してオーバーライドできます）
Delete, BackspaceallowDelete プロパティがtrueに設定されている場合現在選択されている行を削除します。または、値が不要な場合選択したセルの内容を消去します。
Control + C or Control + Insert選択範囲をクリップボードにコピーします（ autoClipboard プロパティがtrueに設定されている場合）
Control + V or Shift + Insert選択した領域にクリップボードの内容を貼り付けます（ autoClipboard プロパティがtrueに設定されている場合）

Example

階層

  • any
    • FlexGrid

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new FlexGrid(element: any, options?: any): FlexGrid

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

    引数

    • element: any

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

    • オプション options: any

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

    戻り値 FlexGrid

プロパティ

activeEditor

activeEditor: HTMLInputElement

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

allowAddNew

allowAddNew: boolean

ユーザーがソースコレクションに項目を追加できるようにグリッドに新規行テンプレートを表示するかどうかを示す値を取得または設定します。

isReadOnly プロパティがtrueに設定されている場合、 新規行テンプレートは表示されません。

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

allowDelete

allowDelete: boolean

ユーザーが［Delete］キーを押したときにグリッドの選択されている行を削除するかどうかを示す値を取得または設定します。

isReadOnly プロパティがtrueに設定されている場合、選択されている行は削除されません。

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

allowDragging

allowDragging: AllowDragging

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

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

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

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

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

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

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

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

allowMerging

allowMerging: AllowMerging

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

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

allowResizing

allowResizing: AllowResizing

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

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

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

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

allowSorting

allowSorting: boolean

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

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

alternatingRowStep

alternatingRowStep: number

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

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

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に設定し、明示的に列を作成する必要があります。次に例を示します。

pre>var grid = new wijmo.grid.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 });/pre>

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

autoScroll

autoScroll: boolean

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

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

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

autoSearch

autoSearch: boolean

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

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

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

autoSizeMode

autoSizeMode: AutoSizeMode

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

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

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

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

bottomLeftCells

bottomLeftCells: GridPanel

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

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

cellFactory

cellFactory: CellFactory

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

cells

cells: GridPanel

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

childItemsPath

childItemsPath: any

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

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

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

Example

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を作成します
  var row = new wijmo.grid.GroupRow();

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

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

columnHeaders

columnHeaders: GridPanel

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

columnLayout

columnLayout: string

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

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

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

columns

columns: ColumnCollection

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

controlRect

controlRect: Rect

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

deferResizing

deferResizing: boolean

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

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

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

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"属性を使用して検証エラーを表示します。

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です。

imeEnabled

imeEnabled: boolean

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

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

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

isReadOnly

isReadOnly: boolean

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

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

itemFormatter

itemFormatter: Function

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

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

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

例:

flex.itemFormatter = function(panel, r, c, cell) {
  if (panel.cellType == CellType.Cell) {
    // セルにスパークラインを描画します
    var col = panel.columns[c];
    if (col.name == 'sparklines') {
      cell.innerHTML = getSparklike(panel, r, c);
    }
  }
}

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

flex.itemFormatter = function(panel, r, c, cell) {
  // カスタマイズする属性をリセットします
  var s = cell.style;
  s.color = '';
  s.backgroundColor = '';
  // このセルのcolorおよびbackgroundColor属性をカスタマイズします
  ...
}

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

itemValidator

itemValidator: Function

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

指定された場合、バリデータ関数はセルの行インデックスと列インデックスを含む2つのパラメータをとり、 エラーの説明を含む文字列を返す必要があります。

このプロパティは、バインドされていないグリッドを処理する場合に特に便利です。 バインドされたグリッドは、代わりにCollectionView.getError　プロパティを使用して検証できます。

この例では、セルのすぐ上のセルと同じデータがセルに含まれないようにする方法を示します。

// 上のセルは、現在のセルと同じ値が含まれていないことを確認します
theGrid.itemValidator = function (row, col) {
  if (row > 0) {
    var valThis = theGrid.getCellData(row, col, false),
        valPrev = theGrid.getCellData(row - 1, col, false);
    if (valThis != null && valThis == valPrev) {
      return 'これは重複した値です...''
    }
  }
  return null; // エラーなし
}

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　）してから、 最後または最初のセルが選択されたときにページの次/前のコントロールに移動します。

mergeManager

mergeManager: MergeManager

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

newRowAtTop

newRowAtTop: boolean

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

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

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

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

preserveOutlineState

preserveOutlineState: boolean

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

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

preserveSelectedState

preserveSelectedState: boolean

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

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

quickAutoSize

quickAutoSize: boolean

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

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

rowHeaderPath

rowHeaderPath: string

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

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

rowHeaders

rowHeaders: GridPanel

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

rows

rows: RowCollection

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

scrollPosition

scrollPosition: Point

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

scrollSize

scrollSize: Size

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

selectedItems

selectedItems: any[]

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

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

selectedRows

selectedRows: any[]

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

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

selection

selection: CellRange

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

selectionMode

selectionMode: SelectionMode

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

showDropDown

showDropDown: boolean

グリッドで、Column.showDropDown　プロパティがtrueに 設定されている列のセルにドロップダウンボタンを追加するかどうかを示す値を 取得または設定します。

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

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

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

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

validateEdits

validateEdits: boolean

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

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

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

viewRange

viewRange: CellRange

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

virtualizationThreshold

virtualizationThreshold: any

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

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

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

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

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

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

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

静的 controlTemplate

controlTemplate: string

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

メソッド

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

canEditCell

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

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

    引数

    • r: number

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

    • c: number

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

    戻り値 boolean

collapseGroupsToLevel

  • collapseGroupsToLevel(level: number): void

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

    引数

    • level: number

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

    戻り値 void

dispose

  • dispose(): void

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

    戻り値 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, formatted: boolean): any

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

    引数

    • r: number

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

    • c: number

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

    • formatted: boolean

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

    戻り値 any

getClipString

  • getClipString(rng?: CellRange, csv?: boolean, colHdrs?: boolean, rowHdrs?: boolean): string

  • CellRange の内容を、クリップボードへのコピーに適した文字列として取得します。

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

    引数

    • オプション rng: CellRange

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

    • オプション csv: boolean

      CSV 形式（カンマ区切りセル）を使用するかどうか。

    • オプション colHdrs: boolean

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

    • オプション rowHdrs: boolean

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

    戻り値 string

getColumn

  • getColumn(name: string): Column

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

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

    引数

    • name: string

      検索する名前または連結。

    戻り値 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

  • セルの選択状態を示すSelectedState 値を取得します。

    引数

    • r: number

      検査するセルの行インデックス。

    • c: number

      検査するセルの列インデックス。

    戻り値 SelectedState

hitTest

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

    次に例を示します。

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

    引数

    • pt: any

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

    • オプション y: any

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

    戻り値 HitTestInfo

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

isRangeValid

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

    引数

    戻り値 boolean

onAutoSizedColumn

onAutoSizedRow

onAutoSizingColumn

onAutoSizingRow

onBeginningEdit

onCellEditEnded

onCellEditEnding

onCopied

onCopying

onDeletedRow

onDeletingRow

onDraggedColumn

onDraggedRow

onDraggingColumn

onDraggingColumnOver

onDraggingRow

onDraggingRowOver

onFormatItem

onGroupCollapsedChanged

onGroupCollapsedChanging

onItemsSourceChanged

onItemsSourceChanging

onLoadedRows

  • loadedRows イベントを発生させます。

    引数

    戻り値 void

onLoadingRows

onPasted

onPastedCell

onPasting

onPastingCell

onPrepareCellForEdit

onResizedColumn

onResizedRow

onResizingColumn

onResizingRow

onRowAdded

onRowEditEnded

onRowEditEnding

onRowEditStarted

onRowEditStarting

onScrollPositionChanged

  • onScrollPositionChanged(e?: EventArgs): void

onSelectionChanged

onSelectionChanging

onSortedColumn

onSortingColumn

onUpdatedLayout

onUpdatedView

  • updatedView イベントを発生させます。

    引数

    戻り値 void

onUpdatingLayout

onUpdatingView

refresh

  • refresh(fullUpdate?: boolean): void

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

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

refreshCells

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

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

    引数

    • fullUpdate: boolean

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

    • オプション recycle: boolean

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

    • オプション state: boolean

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

    戻り値 void

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: any, show?: any): void

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

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

    // セル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: any

      選択する範囲。

    • オプション show: any

      新しい選択範囲が画面に入るようにスクロールするかどうか。

    戻り値 void

setCellData

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

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

    引数

    • r: number

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

    • c: any

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

    • 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): boolean

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

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

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

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

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

    引数

    • オプション fullEdit: boolean

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

    • オプション r: number

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

    • オプション c: number

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

    • オプション focus: boolean

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

    戻り値 boolean

    True if the edit operation started successfully.

toggleDropDownList

  • toggleDropDownList(): void

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

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

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

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

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

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

    戻り値 void

イベント

autoSizedColumn

autoSizedColumn: Event

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

autoSizedRow

autoSizedRow: Event

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

autoSizingColumn

autoSizingColumn: Event

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

autoSizingRow

autoSizingRow: Event

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

beginningEdit

beginningEdit: Event

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

cellEditEnded

cellEditEnded: Event

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

cellEditEnding

cellEditEnding: Event

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

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

function cellEditEnding (sender, e) {
  // 編集前と編集後の値を取得します
  var flex = sender,
      oldVal = flex.getCellData(e.row, e.col),
      newVal = flex.activeEditor.value;
  // newValに「a」が含まれていない場合は、編集をキャンセルします
  e.cancel = newVal.indexOf('a') < 0;
}

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

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

copied

copied: Event

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

copying

copying: Event

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

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

deletedRow

deletedRow: Event

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

deletingRow

deletingRow: Event

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

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

draggedColumn

draggedColumn: Event

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

draggedRow

draggedRow: Event

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

draggingColumn

draggingColumn: Event

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

draggingColumnOver

draggingColumnOver: Event

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

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

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

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

draggingRow

draggingRow: Event

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

draggingRowOver

draggingRowOver: Event

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

formatItem

formatItem: Event

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

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

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

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

groupCollapsedChanged

groupCollapsedChanged: Event

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

groupCollapsedChanging

groupCollapsedChanging: Event

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

itemsSourceChanged

itemsSourceChanged: Event

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

itemsSourceChanging

itemsSourceChanging: Event

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

loadedRows

loadedRows: Event

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

loadingRows

loadingRows: Event

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

pasted

pasted: Event

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

pastedCell

pastedCell: Event

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

pasting

pasting: Event

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

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

pastingCell

pastingCell: Event

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

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

prepareCellForEdit

prepareCellForEdit: Event

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

resizedColumn

resizedColumn: Event

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

resizedRow

resizedRow: Event

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

resizingColumn

resizingColumn: Event

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

resizingRow

resizingRow: Event

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

rowAdded

rowAdded: Event

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

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

rowEditEnded

rowEditEnded: Event

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

rowEditEnding

rowEditEnding: Event

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

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

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

// 編集がキャンセルされたときにディープ連結値を復元します
s.rowEditEnded.addHandler(function (s, e) {
  if (e.cancel) { // edits were canceled by the user
    var item = s.collectionView.currentEditItem;
    for (var k in itemData) {
      var binding = new wijmo.Binding(k);
      binding.setValue(item, itemData[k]);
    }
  }
  itemData = {};
});

rowEditStarted

rowEditStarted: Event

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

rowEditStarting

rowEditStarting: Event

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

scrollPositionChanged

scrollPositionChanged: Event

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

selectionChanged

selectionChanged: Event

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

selectionChanging

selectionChanging: Event

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

sortedColumn

sortedColumn: Event

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

sortingColumn

sortingColumn: Event

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

updatedLayout

updatedLayout: Event

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

updatedView

updatedView: Event

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

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

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

updatingLayout

updatingLayout: Event

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

updatingView

updatingView: Event

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