constructor(element: any, options?: any): MultiRow
Initializes a new instance of the MultiRow class.
In most cases, the **options** parameter will include the value for the layoutDefinition property.
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
JavaScript object containing initialization data for the control.
Gets the **HTMLElement** that represents the currently active cell element.
If no cell is currently selected, or if the selected cell is not currently within view, this property returns null.
Gets the **HTMLInputElement** that represents the currently active cell editor.
If no cell is currently being edited, this property returns null.
ユーザーがソースコレクションに項目を追加できるようにグリッドに新規行テンプレートを表示するかどうかを示す値を取得または設定します。
isReadOnly プロパティがtrueに設定されている場合、新規行テンプレートは表示されません。
このプロパティのデフォルト値は **false**です。
ユーザーが［Delete］キーを押したときにグリッドの選択されている行を削除するかどうかを示す値を取得または設定します。
isReadOnly プロパティがtrueに設定されている場合、選択されている行は削除されません。
このプロパティのデフォルト値は **false**です。
ユーザーがマウスを使用して行、列、またはその両方をドラッグできるかどうかを決定する値を取得または設定します。
autoScroll プロパティがtrueに設定されている場合、ユーザーが行または列を新しい位置にドラッグするときにグリッドの内容が自動的にスクロールされます。
グリッドでは、列のドラッグがデフォルトで有効になっています。
グリッドが連結モードでは、行をドラッグするには特別な 考慮が必要になります。
When you drag rows on bound grids, the rows will get out of sync with the data source (row 4 may refer to item 6 for example). To avoid this, you should handle the draggedRow event and synchronize the data with the new row positions.
また、allowSorting プロパティをfalseに設定する必要があります。そうしないと、行の順序がデータによって決定され、行をドラッグするのは無意味になります。
次のフィドルでは、連結グリッドでの行のドラッグを実行していますBound Row Dragging。
The default value for this property is **AllowDragging.Columns** for the FlexGrid control and **AllowDragging.None** for the **PivotGrid** control.
This property does not apply to the **MultiRow** control.
グリッドのどの部分のセル結合を許可するかを取得または設定します。
The default value for this property is **AllowMerging.None** for the FlexGrid control and **AllowMerging.All** for the **PivotGrid** control.
This property does not apply to the **MultiRow** control.
Gets or sets a value that determines whether the grid should add pin buttons to the column headers and how the pin buttons behave.
The pin buttons allow users to pin (freeze) columns so they remain in view as the user scrolls the grid horizontally.
The default value for this property is **AllowPinning.None**.
ユーザーがマウスを使用して行、列、またはその両方をサイズ変更できるかどうかを決定する値を取得または設定します。
サイズ変更が可能な場合は、列ヘッダーセルの右端をドラッグして列を、行ヘッダーセルの下端をドラッグして行をサイズ変更できます。
Users may also double-click the edge of the header cells to automatically resize rows and columns to fit their content. The auto-size behavior can be customized using the autoSizeMode property.
このプロパティのデフォルト値は**AllowResizing.Columns**です。
ユーザーが列ヘッダーセルをクリックして列をソートできるかどうかを決定する値を取得または設定します。
The default value for this property is **AllowSorting.SingleColumn**.
Gets or sets a value that determines the number of regular rows between 'alternating' rows.
The default value for this property is **1** for the FlexGrid. Set it to zero to disable alternating rows, or to a number greater than one to insert multiple regular rows between alternating rows.
The default value for this property is **1** for the FlexGrid control and **0** for the **PivotGrid** control.
Gets or sets a value that determines whether extending selections with the mouse or keyboard should change the start (cursor) or the end of the current selection.
The default value for this property is **false**, which causes the grid to move the cursor and keep the selection end anchored.
Setting this property to **true** causes the grid to move the selection end and keep the cursor anchored. This is Excel's behavior.
グリッドがクリップボードショートカットを処理するかどうかを決定する値を取得または設定します。
次のクリップボードショートカットがあります。
Only visible rows and columns are included in clipboard operations.
Read-only cells are not affected by paste operations.
このプロパティのデフォルト値は**true**です。
グリッドがitemsSource に基づいて行を自動的に生成するかどうかを 決定する値を取得または設定します。
The column generation depends on the itemsSource property containing at least one item. This data item is inspected and a column is created and bound to each property that contains a primitive value (number, string, Boolean, or Date).
Properties set to null do not generate columns, because the grid would have no way of guessing the appropriate type. In this type of scenario, you should set the autoGenerateColumns property to false and create the columns explicitly. For example:
```typescript 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 }); ```
The default value for this property is **true** for the FlexGrid control and **false** for the **PivotGrid** control.
Gets or sets a value that determines whether the grid should automatically resize the rows when the data or grid layout change.
This property is especially useful when the grid has columns configured to word-wrap their content (see wordWrap), and when the grid has a relatively small number of rows (auto-sizing is an expensive operation).
このプロパティのデフォルト値は **false**です。
ユーザーが行または列を新しい位置にドラッグするときにグリッドの内容が自動的にスクロールされるかどうかを決定する値を取得または設定します。
行と列のドラッグは、allowDragging プロパティによって制御されます。
このプロパティのデフォルト値は**true**です。
ユーザーが読み取り専用セルに入力するに伴ってグリッドでセルを検索するかどうかを決定する値を取得または設定します。
検索が現在選択されている列(編集不可能な場合)で行われます。検索は現在選択されている行から始まり、大文字と小文字を区別されません。
See also the caseSensitiveSearch property.
このプロパティのデフォルト値は **false**です。
行または列のサイズを自動設定するときにどのセルを考慮に入れるかを取得または設定します。
このプロパティは、ユーザーが列ヘッダの端をダブルクリックしたときの動作を制御します。
By default, the grid will automatically set the column width based on the content of the header and data cells in the column. This property allows you to change that to include only the headers or only the data.
このプロパティのデフォルト値は**AutoSizeMode.Both**です。
Gets or sets a value that determines whether the checkboxes used to edit boolean columns should extend to cover the whole cell width.
Big checkboxes are easier to toggle with the mouse, since the user may click anywhere in the cell to toggle them.
このプロパティのデフォルト値は **false**です。
左下のセルを含むGridPanel を取得します。
bottomLeftCells パネルは、行ヘッダの下、columnFooters パネルの左に表示されます。
検索するときに大文字と小文字を区別するかどうかを決定する値を取得または設定します。
The searches include searching for regular text (see the autoSearch property) as well as searching for items while editing data-mapped cells (see the Column.dataMap property).
The default value for this property is **false** (searches are not case-sensitive by default).
複数の行にまたがるセルのコンテンツを垂直方向に中央揃えにするかどうかを判定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
階層グリッドで子の行の生成に使用される１つ以上のプロパティの名前を取得または設定します。
このプロパティには、項目の子項目を含むプロパティの名前を指定する文字列を設定します（たとえば、childItemsPath = 'items';)。
項目の異なるレベルに異なる名前を持つ子項目がある場合は、このプロパティに、各レベルの子項目を含むプロパティの名前から成る配列を設定します。（たとえば、childItemsPath = ['checks','earnings'];）。
{@sample Grid/TreeGrid/ChildItems/purejs デモ}
このプロパティのデフォルト値は**null**です。
This property does not apply to the **MultiRow** control.
Gets or sets a value that determines whether the FlexGrid should clone frozen cells and show then in a separate element to reduce flicker while scrolling.
このプロパティのデフォルト値はnullであり、ブラウザーによって一番適当な設定が選択されます。
列ヘッダーを折りたたみ、単一の行としてグループヘッダーを表示するかどうかを判定する値を取得または設定します。
If you set the collapsedHeaders property to **true**, remember to set the **header** property of every group in order to avoid empty header cells.
Setting the collapsedHeaders property to **null** causes the grid to show all header information (groups and columns). In this case, the first row will show the group headers and the remaining rows will show the individual column headers.
このプロパティのデフォルト値は **false**です。
グリッドのデータを含むICollectionView を取得します。
If the itemsSource property was set to an ICollectionView, this property returns that value.
If the itemsSource property was set to an array of data items, this property returns the internal CollectionView created by the grid to support currency, editing, and sorting.
Gets or sets an array used to define hierarchical column groups.
The items in the array should be JSON objects with properties of Column objects, plus three optional members:
* 'columns' array containing an array of child columns, * 'collapseTo' string containing the binding of the child column that should remain visible when the group is collapsed. * 'isCollapsed' boolean that determines if the group should be initially collapsed.
For example, the code below generates a grid with two column groups, both initially collapsed:
```typescript 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) }); ```
現在の列レイアウトを定義するJSON文字列を取得または設定します。
The column layout string represents an array with the columns and their properties. It can be used to persist column layouts defined by users so they are preserved across sessions, and can also be used to implement undo/redo functionality in applications that allow users to modify the column layout.
The column layout string does not include properties that cannot be converted to JSON, such as dataMap and editor.
If you want to save and restore column layouts and don't require the layouts to be serializable, you can clone the content of the columns property and restore it later using array methods. This is not as convenient as using the columnLayout property, but it does allow you to save and restore data maps and editors.
Gets or sets the template used to instantiate FlexGrid controls.
Gets or sets a value that determines whether the grid should include the content of header cells when copying data to the clipboard.
This property is especially useful in read-only grids, because the header information typically should not be included when pasting data into the grid.
The default value for this property is **HeadersVisibility.None** for the FlexGrid control and **HeadersVisibility.All** for the **PivotGrid** control.
Gets a reference to a static object that defines the default width for auto-generated grid columns based on their types.
The object keys are DataType values. The object values are either numbers (widths in pixels) or star-size strings (multiples of the default width defined by the columns defaultSize property).
For example:
```typescript import { FlexGrid } from '@grapecity/wijmo.grid'; import { DataType } from '@grapecity/wijmo';
// make boolean columns on all grids 100px wide by default FlexGrid.defaultTypeWidth[DataType.Boolean] = 100;
// make numeric columns on all grids 75% as wide as the columns defaultSize FlexGrid.defaultTypeWidth[DataType.Number] = '0.75*'; ```
ユーザーがマウスボタンを放すまで、行および列のサイズ変更を遅らせるかどうかを決定する値を取得または設定します。
By default, deferResizing is set to false, causing rows and columns to be resized as the user drags the mouse. Setting this property to true causes the grid to show a resizing marker and to resize the row or column only when the user releases the mouse button.
The default value for this property is **false** for the FlexGrid control and **true** for the **PivotGrid** control.
Gets the IEditableCollectionView that contains the grid data.
Gets or sets the index of column in the row header panel that shows whether items are being edited.
The default value for this property is **null**, which causes the grid to show the edit glyph on the last column of the rowHeaders panel.
Gets a CellRange that identifies the cell currently being edited.
Gets or sets the Tooltip object used to show validation errors detected by the grid when the showErrors property is set to true.
By default, this property is set to a tooltip with zero show delay (so it appears immediately when hovering over invalid cells), no HTML content, and a "wj-error-tip" class which can be used to customize the tooltip's appearance.
Setting this property to **null** causes the control to use the cell's "title" attribute to show validation errors.
Gets or sets a value that determines whether the grid should automatically expand the selection to include cells in merged ranges when copying or pasting content to/from the clipboard.
このプロパティのデフォルト値は**true**です。
固定列の数を取得または設定します。
固定された列は水平方向にスクロールできませんが、セルは選択および編集できます。
このプロパティのデフォルト値は**0**です。
固定行の数を取得または設定します。
固定された行は垂直方向にスクロールできませんが、セルは選択および編集できます。
このプロパティのデフォルト値は**0**です。
Gets or sets the format string used to create the group header content.
この文字列は、任意のテキストと次の置換文字列を含むことができます。
If a column is bound to the grouping property, the column header is used to replace the {name} parameter, and the column's format and data maps are used to calculate the {value} parameter. If no column is available, the group information is used instead.
グループプロパティに連結された非表示の列を追加して、グループヘッダーセルの書式設定をカスタマイズすることもできます。
The default value for this property is **null**, which causes the grid to use a culture-specific version of the string ```typescript '{name}: <b>{value}</b>({count:n0} items)' ```
This default format string creates group headers similar to
```typescript 'Country: <b>UK</b> (12 items)' 'Country: <b>Japan</b> (8 items)' ```
Gets or sets an array that defines the layout of the rows used to display the grid's column headers.
The array contains a list of cell group objects similar to those used with the layoutDefinition property.
The default value for this property is **null**, which causes the grid to use the layoutDefinition property to create the column headers.
行ヘッダおよび列ヘッダが表示されるかどうかを決定する値を取得または設定します。
The default value for this property is **HeadersVisibility.All**.
編集モードでないときに、グリッドがIME（Input Method Editor）をサポートするかどうかを決定する値を取得または設定します。
このプロパティは、日本語、中国語、韓国語など、IMEサポートを必要とする言語のサイト/アプリケーションにのみ関係します。
このプロパティのデフォルト値は **false**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ユーザーがマウスとキーボードを使用してセル値を変更できるかどうかを判定する値を取得または設定します。
The default value for this property is **false** for the FlexGrid control and **true** for the **PivotGrid** control.
このグリッドのセルのカスタマイズに使用されるフォーマッター関数を取得または設定します。
The formatter function can add any content to any cell. It provides complete flexibility over the appearance and behavior of grid cells.
If specified, the function should take four parameters: the GridPanel that contains the cell, the row and column indices of the cell, and the HTML element that represents the cell. The function will typically change the **innerHTML** property of the cell element.
For example: ```typescript flex.itemFormatter = (panel, r, c, cell) => { if (panel.cellType == CellType.Cell) {
// draw sparklines in the cell let col = panel.columns[c]; if (col.name == 'sparklines') { cell.innerHTML = getSparkline(panel, r, c); } } } ```
Note that the FlexGrid recycles cells, so if your itemFormatter modifies the cell's style attributes, you must make sure that it resets these attributes for cells that should not have them. For example: ```typescript flex.itemFormatter = (panel, r, c, cell) => {
// reset attributes we are about to customize let s = cell.style; s.color = ''; s.backgroundColor = ''; // customize color and backgroundColor attributes for this cell ... } ```
If you have a scenario where multiple clients may want to customize the grid rendering (for example when creating directives or re-usable libraries), consider using the formatItem event instead. The event allows multiple clients to attach their own handlers.
Gets or sets the array or ICollectionView that contains items shown on the grid.
セルに有効なデータが含まれているかどうかを決定するバリデータ関数を取得または設定します。
If specified, the validator function should take parameters containing the cell's row and column indices and a parsing parameter that describes whether the data has already been parsed and applied to the data item (parsing == false), or whether the user was trying to edit the value and entered a value that could not be parsed into the data type expected (parsing == true).
このメソッドは、エラーメッセージを含む文字列を返します。エラーが検出されなかった場合はnullを返します。
次に例を示します。
```typescript grid.itemValidator = (row: number, col: number, parsing: boolean) => { let item = grid.rows[row].dataItem, prop = grid.columns[col].binding;
// parsing failed, show message 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'; } }
// check that stored (parsed) data is valid if (prop == 'date' && item.date < minDate) { return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd'); } else if (prop == 'id' && item.id < 0) { return 'Please enter a positive number'; } }); ```</>>
See also the getError method.
［ENTER］キーが押されたときに実行されるアクションを取得または設定します。
The default setting for this property is MoveDown, which causes the control to move the selection to the next row. This is the standard Excel behavior.
［Tab］キーが押されたときに実行されるアクションを取得または設定します。
The default setting for this property is None, which causes the browser to select the next or previous controls on the page when the TAB key is pressed. This is the recommended setting to improve page accessibility.
In previous versions, the default was set to Cycle, which caused the control to move the selection across and down the grid. This is the standard Excel behavior, but is not good for accessibility.
There is also a CycleOut setting that causes the selection to move through the cells (as Cycle), and then on to the next/previous control on the page when the last or first cells are selected.
各データ項目の表示に使用される行のレイアウトを定義する配列を取得または設定します。
この配列には、次のプロパティを持つセルグループオブジェクトのリストが含まれます。
When the layoutDefinition property is set, the grid scans the cells in each group as follows:
When all groups are ready, the grid calculates the number of rows per record to the maximum **rowspan** of all groups, and adds rows to each group to pad their height as needed.
This scheme is simple and flexible. For example: ``` { header: 'Group 1', cells: [{ binding: 'c1' }, { binding: 'c2'}, { binding: 'c3' }]} ```
The group has **colspan** 1, so there will be one cell per column. The result is: ``` | C1 | | C2 | | C3 | ```
To create a group with two columns, set the **colspan** property of the group: ``` { header: 'Group 1', colspan: 2, cells:[{ binding: 'c1' }, { binding: 'c2'}, { binding: 'c3' }]} ```
The cells will wrap as follows: ``` | C1 | C2 | | C3 | ```
Note that the last cell spans two columns (to fill the group).
You can also specify the **colspan** on individual cells rather than on the group: ``` { header: 'Group 1', cells: [{binding: 'c1', colspan: 2 }, { binding: 'c2'}, { binding: 'c3' }]} ```
Now the first cell has **colspan** 2, so the result is: ``` | C1 | | C2 | C3 | ```
You can also make cells extend vertically using the cell's **rowspan** property: ``` { header: 'Group 1', cells: [{binding: 'c1', rowspan: 2 }, { binding: 'c2'}, { binding: 'c3' }]} ```
Now the first cell has **rowspan** 2, so the result is: ``` | C1 | C2 | | | C3 | ```
Because cells extend the Column class, you can add all the usual Column properties to any cells: ``` { header: 'Group 1', cells: [ { binding: 'c1', colspan: 2 }, { binding: 'c2'}, { binding: 'c3', format: 'n0', required: false, etc... } ]} ```
The **isRowHeader** property of the cell groups allows you to create groups to be displayed as row header cells. This is done using frozen columns, so even though the row headers are regular cells, they look and behave like header cells.
Setting the **isRowHeader** property to true automatically sets the cell's **isReadOnly** property to true (headers cannot be edited), adds a 'wj-header' style to the cell's **cssClass** property (so the cells are styled as headers), and sets the cell's **cellTemplate** property to its **header** value (so the cell shows the header as an unbound string). You may choose to set the cell's **binding** property instead of **header** if you want to show bound values in the row header cells.
Gets or sets a value that determines whether the grid should skip rendering cells that were updated in the last render cycle.
このプロパティのデフォルト値は**true**です。
Gets or sets the MergeManager object responsible for determining how cells should be merged.
Gets or sets a value that determines whether group headers should have multiple rows instead of a single header row.
This property is useful when you want to display aggregate values in the group headers (see the aggregate property).
このプロパティのデフォルト値は **false**です。
新しい行テンプレートをグリッドの上部に配置するか、下部に配置するかを示す値を取得または設定します。
If you set the newRowAtTop property to true, and you want the new row template to remain visible at all times, set the frozenRows property to one. This will freeze the new row template at the top so it won't scroll off the view.
The new row template will be displayed only if the allowAddNew property is set to true and if the itemsSource object supports adding new items.
このプロパティのデフォルト値は **false**です。
データがリフレッシュされたときに、グリッドがノードの展開/折りたたみ状態を保持するかどうかを決定する値を取得または設定します。
The preserveOutlineState property implementation is based on JavaScript's Map object, which is not available in IE 9 or 10.
このプロパティのデフォルト値は**true**です。
データがリフレッシュされたときに、グリッドが行の選択状態を保持するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Gets or sets a value that determines whether the grid should keep whitespace in cells as they appear in the data (white-space: pre) or whether it should collapse the whitespace into a single space character (white-space: normal).
This property allows you to specify how the grid should handle white space without changing any CSS rules. You choose to use CSS rules instead, however, since they provide better control over scope.
For example, you could create CSS rules that apply to all grids in the application, to specific grids, or to specific columns.
Be aware that setting this property to **true** may have undesired effects in applications that use interop cell templates (Vue templates especially).
このプロパティのデフォルト値は **false**です。
グリッドが列のサイズを自動調整するときに精度よりもパフォーマンスを最適化するかどうかを決定する値を取得または設定します。
Setting this property to **false** disables quick auto-sizing. Setting it to **true** enables the feature, subject to the value of each column's quickAutoSize property.
The default value for this property is **null**, which enables quick auto-sizing for grids that don't have a custom itemFormatter or handlers attached to the formatItem event.
Quick auto-sizing uses different strategies when auto-sizing rows or columns.
When auto-sizing columns, it uses a temporary canvas element to locate the row with the widest entry for a column. When the row is located, its contents are measured precisely. The limitation with this approach is that the canvas only renders plain text, so if cells contain HTML the auto-sizing may miss the widest column.
When auto-sizing rows, it uses a cache to store the row heights based on the cell content, and skips measuring numeric cells. The limitation with this approach is that it only improves performance if many cells have the same content, or if many columns are numeric.
If you find that auto-sizing is slowing down your application, it is probably worth setting quickAutoSize to true and checking the results to see if it works correctly and improves performance for your app.
Gets or sets a value that determines whether the grid should refresh all cells after a cell is edited.
このプロパティのデフォルト値は**true**です。
行ヘッダーセルを作成するために使用されるプロパティの名前を取得または設定します。
Row header cells are not visible or selectable. They are meant for use with accessibility tools.
各項目の表示に使用される行数を取得します。
This value is calculated automatically based on the value of the **layoutDefinition** property.
Gets or sets a Point that represents the value of the grid's scrollbars.
現在選択されているデータ項目を含む配列を取得または設定します。
Note: this property can be read in all selection modes, but it can be set only when selectionMode is set to **SelectionMode.ListBox**.
Gets or sets an array with CellRange objects that represent the current selection.
The first element in the array is the current selection. If the grid's selectionMode property is set to MultiRange, the array may contain additional ranges that represent the extended selection.
Note that ranges in the selectedRanges array may contain overlapping areas, which may be important when performing actions like aggregating over the extended selection.
現在選択されている行を含む配列を取得または設定します。
Note: this property can be read in all selection modes, but it can be set only when selectionMode is set to **SelectionMode.ListBox**.
Gets or sets a value that indicates whether the grid should add drop-down buttons to data-mapped cells.
The drop-down buttons are shown on columns that have a Column.dataMap and are editable.
Clicking on the drop-down buttons causes the grid to show a drop-down list from which users can select the cell value.
This setting may be overridden on specific columns using the column's dataMapEditor property.
Cell drop-downs require the **wijmo.input module** to be loaded.
Gets or sets a value that determines whether the grid should add the 'wj-state-invalid' class to cells that contain validation errors and tooltips with error descriptions.
The grid detects validation errors using the itemValidator property and the getError property on the grid's itemsSource.
このプロパティのデフォルト値は**true**です。
Gets or sets a value that determines whether the FlexGrid should insert group rows to delimit data groups.
データグループを作成するには、itemsSource として使用されるICollectionView オブジェクトのgroupDescriptions プロパティを変更します。
このプロパティのデフォルト値は**true**です。
グリッドで、行フィールドの列ヘッダーにソートインジケータをグリッドの列ヘッダーパネルに表示するかどうかを判定する値を取得または設定します。
If the button is visible, clicking on it will cause the grid to toggle the value of the **collapsedHeaders** property.
このプロパティのデフォルト値は **false**です。
Gets or sets a value that indicates whether the grid should display an Excel-style marquee around the current selection.
このプロパティのデフォルト値は **false**です。
If you choose to show the marquee, you may want to improve accessibility by using some simple CSS to make the marquee fully opaque only when the grid has the focus:
```css .wj-flexgrid:not(.wj-state-focused) .wj-marquee { opacity: 0.2; } ```
Gets or sets a value that determines whether the grid should use the column headers as placeholders when editing cells.
このプロパティのデフォルト値は **false**です。
This property is especially useful in grids that have multiple rows per data item (like the MultiRow grid) and in grids that allow adding new items (see the allowAddNew property).
This property only works with the grid's built-in editor. If you are using custom editors (see the Column.editor property), then you are responsible for setting the placeholder property on those.
The Internet Explorer browser does not show input placeholders on focused input elements, so this property is not useful in IE.
選択されているヘッダセルを示すためにクラス名を追加するかどうかを示す値を取得または設定します。
The default value for this property is **HeadersVisibility.None**.
グリッドで、列ヘッダーにソートインジケータを 表示するかどうかを決定する値を取得または設定します。
Sorting is controlled by the sortDescriptions property of the ICollectionView object used as a the grid's itemsSource.
このプロパティのデフォルト値は**true**です。
ソートインジケーターを表示する列ヘッダパネルの行のインデックスを取得または設定します。
The default value for this property is **null**, which causes the bottom row in the columnHeaders panel to act as the sort row.
ユーザーがドキュメントをスクロールしたときに、列ヘッダーを表示したままにするかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は **false**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
Gets the GridPanel that contains the top left cells (to the left of the column headers).
異なるレベルの行グループをオフセットするインデントを取得または設定します。
The default value for this property is **14** pixels for the FlexGrid control, and **32** pixels for the **PivotGrid**.
検証に失敗した編集をユーザーがコミットしようとしたときに、グリッドを編集モードのままにするかどうかを指定する値を取得または設定します。
The grid detects validation errors by calling the getError method on the grid's itemsSource.
このプロパティのデフォルト値は**true**です。
仮想化を有効にするために必要な最小行数、最小列数、またはその両方を取得または設定します。
This property is set to zero by default, meaning virtualization is always enabled. This improves binding performance and memory requirements, at the expense of a small performance decrease while scrolling.
If your grid has a small number of rows (about 50 to 100), you may be able to improve scrolling performance by setting this property to a slightly higher value (like 150). This will disable virtualization and will slow down binding, but may improve perceived scroll performance. For example, the code below sets causes the grid to virtualize cells when the data source has more than 150 items:
```typescript // virtualize grid when there are more than 150 items theGrid.virtualizationThreshold = 150; ```
Setting this property to values higher than 200 is not recommended. Loading times will become too long; the grid will freeze for a few seconds while creating cells for all rows, and the browser will become slow because of the large number of elements on the page.
If you want to set separate virtualization thresholds for rows and columns, you may set the virtualizationThreshold property to an array with two numbers. In this case, the first number will be used as the row threshold and the second as the column threshold. For example, the code below sets causes the grid to virtualize rows but not columns:
```typescript // virtualize rows (threshold 0) but not columns (threshold 10,000) theGrid.virtualizationThreshold = [0, 10000]; ```
The default value for this property is **0**, which causes the grid to virtualize all rows and columns.
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
autoSizeColumn(c: number, header?: boolean, extra?: number): void
列をその内容がちょうど収まるようにサイズ変更します。
This method only works if the grid is visible. If its host element has not been added to the DOM, or if any of the grid's ancestor elements is hidden, the grid will not be able to measure the cells and therefore will not be able to auto-size the columns.
Index of the column to resize.
Whether the column index refers to a regular or a header row.
Extra spacing, in pixels.
autoSizeColumns(firstColumn?: number, lastColumn?: number, header?: boolean, extra?: number): void
列の範囲をその内容がちょうど収まるようにサイズ変更します。
The grid will always measure all rows in the current view range, plus up to 2,000 rows not currently in view. If the grid contains a large amount of data (say 50,000 rows), then not all rows will be measured since that could take a long time.
This method only works if the grid is visible. If its host element has not been added to the DOM, or if any of the grid's ancestor elements is hidden, the grid will not be able to measure the cells and therefore will not be able to auto-size the columns.
Index of the first column to resize (defaults to the first column).
Index of the last column to resize (defaults to the last column).
Whether the column indices refer to regular or header columns.
Extra spacing, in pixels.
autoSizeRow(r: number, header?: boolean, extra?: number): void
行をその内容がちょうど収まるようにサイズ変更します。
This method only works if the grid is visible. If its host element has not been added to the DOM, or if any of the grid's ancestor elements are hidden, the grid will not be able to measure the cells and therefore will not be able to auto-size the rows.
Index of the row to resize.
True to indicate the row index refers to a header row, false to indicate it refers to a regular data row, or null to indicate it refers to a footer row.
Extra spacing, in pixels.
autoSizeRows(firstRow?: number, lastRow?: number, header?: boolean, extra?: number): void
行の範囲をその内容がちょうど収まるようにサイズ変更します。
This method only works if the grid is visible. If its host element has not been added to the DOM, or if any of the grid's ancestor elements is hidden, the grid will not be able to measure the cells and therefore will not be able to auto-size the rows.
Index of the first row to resize.
Index of the last row to resize.
Whether the row indices refer to regular or header rows.
Extra spacing, in pixels.
canEditCell(r: number, c: number): boolean
指定されたセルが編集可能かどうかを示す値を取得します。
collapseGroupsToLevel(level: number): void
すべてのグループ行を指定したレベルに折りたたみます。
Maximum group level to show.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
finishEditing(cancel?: boolean): boolean
保留中の編集をすべてコミットし、編集モードを終了します。
Whether pending edits should be canceled or committed.
focus(force?: boolean): void
Overridden to set the focus to the grid without scrolling the whole grid into view.
Whether to perform the focus operation even if the grid already contains the focus.
getBindingColumn(p: GridPanel, r: number, c: number): Column
Gets the Column object used to bind a data item to a grid cell.
GridPanel that contains the cell.
Index of the row that contains the cell.
Index of the column that contains the cell.
getCellBoundingRect(r: number, c: number | string, raw?: boolean): Rect
セル要素の範囲（ビューポート座標単位）を取得します。
This method returns the bounds of cells in the cells panel (scrollable data cells). To get the bounds of cells in other panels, use the getCellBoundingRect method in the appropriate GridPanel object.
The returned value is a Rect object which contains the position and dimensions of the cell in viewport coordinates. The viewport coordinates are the same used by the getBoundingClientRect method.
getCellData(r: number, c: number | string, formatted: boolean): any
グリッドのスクロール可能領域内のセルに格納された値を取得します。
Index of the row that contains the cell.
Index, name, or binding of the column that contains the cell.
Whether to format the value for display.
getClipString(rng?: CellRange | null, options?: boolean | ClipStringOptions, colHeaders?: boolean, rowHeaders?: boolean): string
Gets the content of a CellRange as a string suitable for copying to the clipboard or exporting to CSV (comma-separated values) files.
非表示の行および列はクリップボード文字列に含まれません。
Invalid (with negative indexes) row or column ranges can be specified in CellRange, which indicates that data rows or columns are not included in the result. In conjunction with **colHeaders** or **rowHeaders** parameters set to true, this makes it possible to export colum or row headers only, without the corresponding data cells.
CellRange to copy. If omitted, the current selection is used.
A boolean value that specifies the clip string should be a CSV string or a ClipStringOptions value that specifies options for the clip string.
Whether to include the column headers.
Whether to include the row headers.
To export the current selection, set the **rng** parameter to null. This will include not only the primary selection but also extended selections such as selected rows (in ListBox mode) and multiple selected ranges (in MultiRange mode).
Note that multiple selected ranges are included only if all selected ranges refer to the same column range or row range.
getColumn(name: string, header?: boolean): Column
Gets a column by name or by binding.
このメソッドは、名前で列を検索します。指定された名前を持つ列が見つからない場合は、 バインディングによって検索します。検索では大文字と小文字が区別されます。
The name or binding to find.
Whether to search column defined for header.
getColumnGroups(): ColumnGroupCollection
Get the collection of column groups.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getMergedRange(p: GridPanel, r: number, c: number, clip?: boolean): CellRange
getSelectedState(r: number, c: number): SelectedState
セルの選択状態を示すSelectedState 値を取得します。
getTemplate(): string
hitTest(pt: number | wijmo.Point | MouseEvent | HTMLElement, y?: number | boolean): HitTestInfo
Gets a HitTestInfo object with information about a given point.
For example:
```typescript // hit test a point when the user clicks on the grid 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] + '".'); }); ```
Point to investigate, in page coordinates, or a MouseEvent object, or x coordinate of the point.
Y coordinate of the point in page coordinates (if the first parameter is a number).
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript 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; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
isRangeValid(rng: CellRange): boolean
指定したCellRangeがこのグリッドの行および列コレクションに対して有効かどうかをチェックします。
Range to check.
onAutoSizedColumn(e: CellRangeEventArgs): void
Raises the autoSizedColumn event.
CellRangeEventArgs that contains the event data.
onAutoSizedRow(e: CellRangeEventArgs): void
Raises the autoSizedRow event.
CellRangeEventArgs that contains the event data.
onAutoSizingColumn(e: CellRangeEventArgs): boolean
Raises the autoSizingColumn event.
CellRangeEventArgs that contains the event data.
onAutoSizingRow(e: CellRangeEventArgs): boolean
Raises the autoSizingRow event.
CellRangeEventArgs that contains the event data.
onBeginningEdit(e: CellRangeEventArgs): boolean
Raises the beginningEdit event.
CellRangeEventArgs that contains the event data.
onCellEditEnded(e: CellRangeEventArgs): void
Raises the cellEditEnded event.
CellRangeEventArgs that contains the event data.
onCellEditEnding(e: CellEditEndingEventArgs): boolean
Raises the cellEditEnding event.
CellEditEndingEventArgs that contains the event data.
onCollapsedHeadersChanged(e?: EventArgs): void
Raises the collapsedHeadersChanged event.
onCollapsedHeadersChanging(e: CancelEventArgs): boolean
Raises the collapsedHeadersChanging event.
CancelEventArgs that contains the event data.
onColumnGroupCollapsedChanged(e: CellRangeEventArgs): void
Raises the columnGroupCollapsedChanged event.
CellRangeEventArgs that contains the event data.
onColumnGroupCollapsedChanging(e: CellRangeEventArgs): boolean
Raises the columnGroupCollapsedChanging event.
CellRangeEventArgs that contains the event data.
onCopied(e: CellRangeEventArgs): void
Raises the copied event.
CellRangeEventArgs that contains the event data.
onCopying(e: CellRangeEventArgs): boolean
Raises the copying event.
CellRangeEventArgs that contains the event data.
onDeletedRow(e: CellRangeEventArgs): void
Raises the deletedRow event.
CellRangeEventArgs that contains the event data.
onDeletingRow(e: CellRangeEventArgs): boolean
Raises the deletingRow event.
CellRangeEventArgs that contains the event data.
onDraggedColumn(e: CellRangeEventArgs): void
Raises the draggedColumn event.
CellRangeEventArgs that contains the event data.
onDraggedRow(e: CellRangeEventArgs): void
Raises the draggedRow event.
CellRangeEventArgs that contains the event data.
onDraggingColumn(e: CellRangeEventArgs): boolean
Raises the draggingColumn event.
CellRangeEventArgs that contains the event data.
onDraggingColumnOver(e: CellRangeEventArgs): boolean
Raises the draggingColumnOver event.
CellRangeEventArgs that contains the event data.
onDraggingRow(e: CellRangeEventArgs): boolean
Raises the draggingRow event.
CellRangeEventArgs that contains the event data.
onDraggingRowOver(e: CellRangeEventArgs): boolean
Raises the draggingRowOver event.
CellRangeEventArgs that contains the event data.
onFormatItem(e: FormatItemEventArgs): void
formatItem イベントを発生させます。
FormatItemEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onGroupCollapsedChanged(e: CellRangeEventArgs): void
Raises the groupCollapsedChanged event.
CellRangeEventArgs that contains the event data.
onGroupCollapsedChanging(e: CellRangeEventArgs): boolean
Raises the groupCollapsedChanging event.
CellRangeEventArgs that contains the event data.
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onItemsSourceChanged(e?: EventArgs): void
itemsSourceChanged イベントを発生させます。
onItemsSourceChanging(e: CancelEventArgs): boolean
itemsSourceChanging イベントを発生させます。
CancelEventArgs that contains the event data.
onLoadedRows(e?: EventArgs): void
Raises the loadedRows event.
onLoadingRows(e: CancelEventArgs): boolean
Raises the loadingRows event.
CancelEventArgs that contains the event data.
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onPasted(e: CellRangeEventArgs): void
Raises the pasted event.
CellRangeEventArgs that contains the event data.
onPastedCell(e: CellRangeEventArgs): void
Raises the pastedCell event.
CellRangeEventArgs that contains the event data.
onPasting(e: CellRangeEventArgs): boolean
Raises the pasting event.
CellRangeEventArgs that contains the event data.
onPastingCell(e: CellRangeEventArgs): boolean
Raises the pastingCell event.
CellRangeEventArgs that contains the event data.
onPinnedColumn(e: CellRangeEventArgs): void
Raises the pinnedColumn event.
CellRangeEventArgs that contains the event data.
onPinningColumn(e: CellRangeEventArgs): boolean
Raises the pinningColumn event.
CellRangeEventArgs that contains the event data.
onPrepareCellForEdit(e: CellRangeEventArgs): void
Raises the prepareCellForEdit event.
CellRangeEventArgs that contains the event data.
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onResizedColumn(e: CellRangeEventArgs): void
Raises the resizedColumn event.
CellRangeEventArgs that contains the event data.
onResizedRow(e: CellRangeEventArgs): void
Raises the resizedRow event.
CellRangeEventArgs that contains the event data.
onResizingColumn(e: CellRangeEventArgs): boolean
Raises the resizingColumn event.
CellRangeEventArgs that contains the event data.
onResizingRow(e: CellRangeEventArgs): boolean
Raises the resizingRow event.
CellRangeEventArgs that contains the event data.
onRowAdded(e: CellRangeEventArgs): boolean
Raises the rowAdded event.
CellRangeEventArgs that contains the event data.
onRowEditEnded(e: CellRangeEventArgs): void
Raises the rowEditEnded event.
CellRangeEventArgs that contains the event data.
onRowEditEnding(e: CellRangeEventArgs): void
Raises the rowEditEnding event.
CellRangeEventArgs that contains the event data.
onRowEditStarted(e: CellRangeEventArgs): void
Raises the rowEditStarted event.
CellRangeEventArgs that contains the event data.
onRowEditStarting(e: CellRangeEventArgs): void
Raises the rowEditStarting event.
CellRangeEventArgs that contains the event data.
onScrollPositionChanged(e?: EventArgs): void
Raises the scrollPositionChanged event.
onSelectionChanged(e: CellRangeEventArgs): void
selectionChanged イベントを発生させます。
CellRangeEventArgs that contains the event data.
onSelectionChanging(e: CellRangeEventArgs): boolean
Raises the selectionChanging event.
CellRangeEventArgs that contains the event data.
onSortedColumn(e: CellRangeEventArgs): void
Raises the sortedColumn event.
CellRangeEventArgs that contains the event data.
onSortingColumn(e: CellRangeEventArgs): boolean
Raises the sortingColumn event.
CellRangeEventArgs that contains the event data.
onStarSizedColumns(e?: EventArgs): void
Raises the starSizedColumns event.
onUpdatedLayout(e?: EventArgs): void
Raises the updatedLayout event.
onUpdatedView(e?: EventArgs): void
updatedView イベントを発生させます。
onUpdatingLayout(e: CancelEventArgs): boolean
Raises the updatingLayout event.
CancelEventArgs that contains the event data.
onUpdatingView(e: CancelEventArgs): boolean
updatingView イベントを発生させます。
CancelEventArgs that contains the event data.
refresh(fullUpdate?: boolean): void
グリッドの表示を更新します。
Whether to update the grid layout and content, or just the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
refreshCells(fullUpdate: boolean, recycle?: boolean, state?: boolean): void
グリッドの表示を更新します。
Whether to update the grid layout and content, or just the content.
Whether to recycle existing elements.
Whether to keep existing elements and update their state.
refreshRange(rng: CellRange): void
Refreshes the cells in a range, updating their content and styles.
Unlike the refreshCells method, which updates all the cells, refreshRange allows you to specify which cells should be refreshed, which in some cases can improve performance.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
scrollIntoView(r: number, c: number | string, refresh?: boolean): boolean
指定したセルが画面に入るようにグリッドをスクロールします。
Negative row and column indices are ignored, so if you call
```typescript grid.scrollIntoView(200, -1); ```
The grid will scroll vertically to show row 200, and will not scroll horizontally.
select(rng: (CellRange | number), show?: (boolean | number | string)): boolean
セルの範囲を選択し、オプションで選択範囲を表示範囲までスクロールします。
The select method can be called by passing a CellRange and an optional boolean parameter that indicates whether the new selection should be scrolled into view. For example:
```typescript // select cell 1,1 and scroll it into view grid.select(new CellRange(1, 1), true);
// select range (1,1)-(2,4) and do not scroll it into view grid.select(new CellRange(1, 1, 2, 4), false); ```
You can also call the select method passing the index or the row and column you want to select. In this case, the new selection always scrolls into view. For example:
```typescript // select cell 1,1 and scroll it into view grid.select(1, 1); ```
Range to select (or index of the row to select).
Whether to scroll the new selection into view (or index, name, or binding of the column to select).
setCellData(r: number, c: string | number, value: any, coerce?: boolean, invalidate?: boolean): boolean
グリッドのスクロール可能領域内のセルの値を設定します。
Index of the row that contains the cell.
Index, name, or binding of the column that contains the cell.
Value to store in the cell.
Whether to change the value automatically to match the column's data type.
Whether to invalidate the grid to show the change.
setClipString(text: string, rng?: CellRange): void
Parses a string into rows and columns and applies the content to a given range.
非表示の行および列はスキップされます。
Tab and newline delimited text to parse into the grid.
CellRange to copy. If omitted, the current selection is used.
startEditing(fullEdit?: boolean, r?: number, c?: number | string, focus?: boolean, evt?: any): boolean
指定されたセルの編集を開始します。
Editing in the FlexGrid is similar to editing in Excel: Pressing F2 or double-clicking a cell puts the grid in **full-edit** mode. In this mode, the cell editor remains active until the user presses Enter, Tab, or Escape, or until he moves the selection with the mouse. In full-edit mode, pressing the cursor keys does not cause the grid to exit edit mode.
Typing text directly into a cell puts the grid in **quick-edit mode**. In this mode, the cell editor remains active until the user presses Enter, Tab, or Escape, or any arrow keys.
Full-edit mode is normally used to make changes to existing values. Quick-edit mode is normally used for entering new data quickly.
編集中に［F2］キーを押すことで、完全編集モードとクイック編集モードを切り替えることができます。
Whether to stay in edit mode when the user presses the cursor keys. Defaults to true.
Index of the row to be edited. Defaults to the currently selected row.
Index, name, or binding of the column to be edited. Defaults to the currently selected column.
Whether to give the editor the focus when editing starts. Defaults to true.
Event that triggered this action (usually a keypress or keydown).
toggleDropDownList(): boolean
Toggles the visibility of the drop-down list box associated with the currently selected cell.
The drop-down list is created automatically based on the column's Column.dataMap property.
このメソッドでは、セルが編集モードに入ったとき、またはユーザが特定のキーを押したときに、ドロップダウンリストを自動的に表示することができます。
For example, this code causes the grid to show the drop-down list whenever the grid enters edit mode:
```typescript // show the drop-down list when the grid enters edit mode theGrid.beginningEdit.addHandler(() => { theGrid.toggleDropDownList(); }); ```
This code causes the grid to show the drop-down list when the grid enters edit mode after the user presses the space bar:
```typescript // show the drop-down list when the user presses the space bar theGrid.hostElement.addEventListener('keydown', (e) => { if (e.keyCode == 32) { e.preventDefault(); theGrid.toggleDropDownList(); } }, true); ```
セルが編集モードに入る前に発生します。
The 'data' property of the handler parameters contains a reference to the DOM event that caused the grid to enter edit mode.
The event handler may cancel the edit operation.
セル編集が終了するときに発生します。
You can use this event to perform validation and prevent invalid edits. For example, the code below prevents users from entering values that do not contain the letter 'a'. The code demonstrates how you can obtain the old and new values before the edits are applied.
```typescript function cellEditEnding(flex, e) {
// get old and new values let oldVal = flex.getCellData(e.row, e.col), newVal = flex.activeEditor.value;
// cancel edits if newVal doesn't contain 'a' e.cancel = newVal.indexOf('a') < 0; } ```</>>
Setting the cancel parameter to true causes the grid to discard the edited value and keep the cell's original value.
If you also set the stayInEditMode parameter to true, the grid will remain in edit mode so the user can correct invalid entries before committing the edits.
Occurs after the value of the collapsedHeaders property has changed.
Occurs after the value of the collapsedHeaders property changes.
Occurs after a column group has been expanded or collapsed.
The 'data' property of the handler parameters contains a reference to the ColumnGroup that is about to change.
Occurs when a column group is about to be expanded or collapsed.
The 'data' property of the handler parameters contains a reference to the ColumnGroup that is about to change.
Occurs after the user has copied the selection content to the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).
Occurs when the user is copying the selection content to the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).
イベントハンドラでコピー操作をキャンセルできます。
Occurs after the user has deleted a row by pressing the Delete key (see the allowDelete property).
Occurs when the user is deleting a selected row by pressing the Delete key (see the allowDelete property).
イベントハンドラで行の削除をキャンセルできます。
ユーザーが列を別の位置にドラッグするときに発生します。
The handler may cancel the event to prevent users from dropping columns at certain positions. For example:
```typescript // remember column being dragged flex.draggingColumn.addHandler((s, e) => { theColumn = s.columns[e.col].binding; });
// prevent 'sales' column from being dragged to index 0 s.draggingColumnOver.addHandler((s, e) => { if (theColumn == 'sales' && e.col == 0) { e.cancel = true; } }); ```
セルを表す要素が作成されたときに発生します。
This event can be used to format cells for display. It is similar in purpose to the itemFormatter property, but has the advantage of allowing multiple independent handlers.
以下のサンプルコードは、グループ行のセルから'wj-wrap'クラスを削除します。
```typescript flex.formatItem.addHandler((flex, e) => { if (flex.rows[e.row] instanceof GroupRow) { wijmo.removeClass(e.cell, 'wj-wrap'); } }); ```
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
Occurs after the user has pasted content from the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).
Occurs after the user has pasted content from the clipboard into a cell (see the autoClipboard property).
The 'data' property of the handler parameters contains the cell's original value (before the new value was pasted).
Occurs when the user is pasting content from the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).
The 'data' property of the handler parameters contains a copy of the text being pasted into the grid.
イベントハンドラで貼り付け操作をキャンセルできます。
Occurs when the user is pasting content from the clipboard into a cell (see the autoClipboard property).
The 'data' property of the handler parameters contains the text being pasted into the cell.
イベントハンドラで貼り付け操作をキャンセルできます。
Occurs after one or more columns are pinned (or unpinned).
Occurs before one or more columns are pinned (or unpinned).
エディタセルが作成されてからアクティブになる前に発生します。
The event handler can access the editor element using the grid's activeEditor property.
Occurs when the user creates a new item by editing the new row template (see the allowAddNew property).
イベントハンドラで新しい項目の内容をカスタマイズしたり、新しい項目の作成をキャンセルしたりできます。
行編集が終了するとき、変更が確定またはキャンセルされる前に発生します。
This event can be used in conjunction with the rowEditStarted event to implement deep-binding edit undos. For example:
```typescript // save deep bound values when editing starts let itemData = {}; s.rowEditStarted.addHandler((s, e) => { let item = s.collectionView.currentEditItem; itemData = {}; s.columns.forEach(function (col) { if (col.binding.indexOf('.') > -1) { // deep binding let binding = new wijmo.Binding(col.binding); itemData[col.binding] = binding.getValue(item); } }) });
// restore deep bound values when edits are canceled s.rowEditEnded.addHandler((s, e) => { if (e.cancel) { // edits were canceled by the user let item = s.collectionView.currentEditItem; for (let k in itemData) { let binding = new wijmo.Binding(k); binding.setValue(item, itemData[k]); } } itemData = {}; }); ```
ユーザーが列ヘッダをクリックしてソートを適用する前に発生します。
The 'data' property of the handler parameters contains a reference to the DOM event that caused the sort.
The event handler may cancel the sort action.
グリッドが現在のビューを構成する要素の作成/更新を完了したときに発生します。
グリッドのビューは以下のような操作に応じて更新されます。
Extends the FlexGrid control to provide multiple rows per item.
Use the layoutDefinition property to define the layout of the rows used to display each data item.
A few FlexGrid properties are disabled in the MultiRow control because they would interfere with the custom multi-row layouts. The list of disabled properties includes the following:
allowMerging, mergeManager, autoGenerateColumns, columnGroups, allowDragging, allowPinning, childItemsPath, FlexGridDetailProvider, and visible.
Note also that cells in the columnFooters panel do not follow the multi-row layout. That is because those cells belong to rows that are not created by the grid itself, but by custom code.