ComponentOne ASP.NET MVC Controls
FlexSheet Class
File
wijmo.grid.sheet.js
Module
wijmo.grid.sheet
Base Class
FlexGrid
Derived Classes
FlexSheet

Defines the FlexSheet control.

The FlexSheet control extends the FlexGrid control to provide Excel-like features such as a calculation engine, multiple sheets, undo/redo, and XLSX import/export.

A complete list of the functions supported by the FlexSheet's calculation engine can be found here: FlexSheet Functions.

{@sample Grid/FlexSheet/Bound/purejs Example}

Constructor

Properties

Methods

Events

Constructor

constructor

constructor(element: any, options?): FlexSheet

Initializes a new instance of the FlexSheet class.

Parameters
Optional

JavaScript object containing initialization data for the control.

Returns
FlexSheet

Properties

activeEditor

Gets the HTMLInputElement that represents the cell editor currently active.

Inherited From
FlexGrid
Type
HTMLInputElement

allowAddNew

Gets or sets a value that indicates whether the grid should provide a new row template so users can add items to the source collection.

The new row template will not be displayed if the isReadOnly property is set to true.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

allowDelete

Gets or sets a value that indicates whether the grid should delete selected rows when the user presses the Delete key.

Selected rows will not be deleted if the isReadOnly property is set to true.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

allowDragging

Gets or sets a value that determines whether users are allowed to drag rows and/or columns with the mouse.

If the autoScroll property is set to true, the grid will automatically scroll its contents while the user drags rows or columns into new positions.

The grid allows dragging columns by default.

Dragging rows requires special considerations in bound scenarios.

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.

Also, remember to set the allowSorting property to false or you the row order will be determined by the data, and dragging rows will be pointless.

This fiddle demonstrates row dragging with a bound grid: Bound Row Dragging.

The default value for this property is AllowDragging.Columns.

Inherited From
FlexGrid
Type
AllowDragging

allowMerging

Gets or sets which parts of the grid provide cell merging.

The default value for this property is AllowMerging.None.

Inherited From
FlexGrid
Type
AllowMerging

allowResizing

Gets or sets a value that determines whether users may resize rows and/or columns with the mouse.

If resizing is enabled, users can resize columns by dragging the right edge of column header cells, or rows by dragging the bottom edge of row header cells.

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.

The default value for this property is AllowResizing.Columns.

Inherited From
FlexGrid
Type
AllowResizing

allowSorting

Gets or sets a value that determines whether users are allowed to sort columns by clicking the column header cells.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

alternatingRowStep

Gets or sets a value that determines the number of regular rows between 'alternating' rows.

The default value for this property is 1. Set it to zero to disable alternating rows, or to a number greater than one to insert multiple regular rows between alternating rows.

Inherited From
FlexGrid
Type
number

anchorCursor

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.

Inherited From
FlexGrid
Type
boolean

autoClipboard

Gets or sets a value that determines whether the grid should handle clipboard shortcuts.

The clipboard shortcuts are as follows:

ctrl+C, ctrl+Ins
Copy grid selection to clipboard.
ctrl+V, shift+Ins
Paste clipboard text to grid selection.

Only visible rows and columns are included in clipboard operations.

Read-only cells are not affected by paste operations.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

autoGenerateColumns

Gets or sets a value that determines whether the grid should generate columns automatically based on the 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'; var grid = new FlexGrid('#theGrid', { autoGenerateColumns: false, // data items may contain null values columns: [ // so define columns explicitly { 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.

Inherited From
FlexGrid
Type
boolean

autoScroll

Gets or sets a value that determines whether the grid should automatically scroll its contents while users drag rows or columns into new positions.

Row and column dragging are controlled by the allowDragging property.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

autoSearch

Gets or sets a value that determines whether the grid should search for cells as the users types into read-only cells.

The search happens on the column that is currently selected, if it is not editable. The search starts at the currently selected row and is case-insensitive.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

autoSizeMode

Gets or sets which cells should be taken into account when auto-sizing a row or column.

This property controls what happens when users double-click the edge of a column header.

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.

The default value for this property is AutoSizeMode.Both.

Inherited From
FlexGrid
Type
AutoSizeMode

bottomLeftCells

Gets the GridPanel that contains the bottom left cells.

The bottomLeftCells panel appears below the row headers, to the left of the columnFooters panel.

Inherited From
FlexGrid
Type
GridPanel

cellFactory

Gets or sets the CellFactory that creates and updates cells for this grid.

Inherited From
FlexGrid
Type
CellFactory

cells

Gets the GridPanel that contains the data cells.

Inherited From
FlexGrid
Type
GridPanel

childItemsPath

Gets or sets the name of the property (or properties) used to generate child rows in hierarchical grids.

Set this property to a string to specify the name of the property that contains an item's child items (e.g. childItemsPath = 'items';).

If items at different levels have child items with different names, set this property to an array containing the names of the properties that contain child items et each level (e.g. childItemsPath = ['checks','earnings'];).

{@sample Grid/TreeGrid/ChildItems/purejs Example}

Inherited From
FlexGrid
Type
any

clientSize

Gets the client size of the control (control size minus headers and scrollbars).

Inherited From
FlexGrid
Type
Size

cloneFrozenCells

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.

The default value for this property is null, which causes the grid to select the best setting depending on the browser.

Inherited From
FlexGrid
Type
boolean

collectionView

Gets the ICollectionView that contains the grid data.

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.

Inherited From
FlexGrid
Type
ICollectionView

columnFooters

Gets the GridPanel that contains the column footer cells.

The columnFooters panel appears below the grid cells, to the right of the bottomLeftCells panel. It can be used to display summary information below the grid data.

The example below shows how you can add a row to the columnFooters panel to display summary data for columns that have the aggregate property set:

function addFooterRow(flex) {

  // create a GroupRow to show aggregates
  var row = new wijmo.grid.GroupRow();

  // add the row to the column footer panel
  flex.columnFooters.rows.push(row);

  // show a sigma on the header
  flex.bottomLeftCells.setCellData(0, 0, '\u03A3');
}
Inherited From
FlexGrid
Type
GridPanel

columnHeaders

Gets the GridPanel that contains the column header cells.

Inherited From
FlexGrid
Type
GridPanel

columnLayout

Gets or sets a JSON string that defines the current column layout.

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 dataMap properties because data maps are not serializable.

Inherited From
FlexGrid
Type
string

columns

Gets the grid's column collection.

Inherited From
FlexGrid
Type
ColumnCollection

controlRect

Gets the bounding rectangle of the control in page coordinates.

Inherited From
FlexGrid
Type
Rect

 

Static controlTemplate

Overrides the template used to instantiate FlexSheet control.

Type
any

deferResizing

Gets or sets a value that determines whether row and column resizing should be deferred until the user releases the mouse button.

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.

Inherited From
FlexGrid
Type
boolean

definedNames

Gets an array the IDefinedName objects representing named ranges/expressions defined in the FlexSheet.

Type
ObservableArray

editableCollectionView

Gets the IEditableCollectionView that contains the grid data.

Inherited From
FlexGrid
Type
IEditableCollectionView

editColumnIndex

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 cause the grid to show the edit glyph on the last column of the rowHeaders panel.

Inherited From
FlexGrid
Type
number

editRange

Gets a CellRange that identifies the cell currently being edited.

Inherited From
FlexGrid
Type
CellRange

enableDragDrop

Gets or sets the value to indicates whether enable drag and drop rows or columns in FlexSheet.

Type
boolean

enableFormulas

Gets or sets the value to indicates whether enable formulas in FlexSheet.

Type
boolean

errorTip

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.

Inherited From
FlexGrid
Type
Tooltip

filter

Gets the FlexSheetFilter instance that controls FlexSheet filtering.

Type
FlexSheetFilter

frozenColumns

Gets or sets the number of frozen columns.

Frozen columns do not scroll horizontally, but the cells they contain may be selected and edited.

The default value for this property is 0.

Inherited From
FlexGrid
Type
number

frozenRows

Gets or sets the number of frozen rows.

Frozen rows do not scroll vertically, but the cells they contain may be selected and edited.

The default value for this property is 0.

Inherited From
FlexGrid
Type
number

groupHeaderFormat

Gets or sets the format string used to create the group header content.

The string may contain any text, plus the following replacement strings:

  • {name}: The name of the property being grouped on.
  • {value}: The value of the property being grouped on.
  • {level}: The group level.
  • {count}: The total number of items in this group.

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.

You may add invisible columns bound to the group properties in order to customize the formatting of the group header cells.

The default value for this property is
'{name}: <b>{value}</b>({count:n0} items)', which creates group headers similar to
'Country: UK (12 items)' or
'Country: Japan (8 items)'.

Inherited From
FlexGrid
Type
string

headersVisibility

Gets or sets a value that determines whether the row and column headers are visible.

The default value for this property is HeadersVisibility.All.

Inherited From
FlexGrid
Type
HeadersVisibility

hostElement

Gets the DOM element that is hosting the control.

Inherited From
Control
Type
HTMLElement

imeEnabled

Gets or sets a value that determines whether the grid should support Input Method Editors (IME) while not in edit mode.

This property is relevant only for sites/applications in Japanese, Chinese, Korean, and other languages that require IME support.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

isDisabled

Gets or sets a value that determines whether the control is disabled.

Disabled controls cannot get mouse or keyboard events.

Inherited From
Control
Type
boolean

isFunctionListOpen

Gets a value indicating whether the function list is opened.

Type
boolean

isReadOnly

Gets or sets a value that determines whether the user can modify cell values using the mouse and keyboard.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

isTabHolderVisible

Gets or sets a value indicating whether the TabHolder is visible.

Type
boolean

isTouching

Gets a value that indicates whether the control is currently handling a touch event.

Inherited From
Control
Type
boolean

isUpdating

Gets a value that indicates whether the control is currently being updated.

Inherited From
Control
Type
boolean

itemFormatter

Gets or sets a formatter function used to customize cells on this grid.

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:

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

    // draw sparklines in the cell
    var col = panel.columns[c];
    if (col.name == 'sparklines') {
      cell.innerHTML = getSparklike(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:

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

  // reset attributes we are about to customize
  var 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.

Inherited From
FlexGrid
Type
Function

itemsSource

Gets or sets the array or ICollectionView that contains items shown on the grid.

Inherited From
FlexGrid
Type
any

itemValidator

Gets or sets a validator function to determine whether cells contain valid data.

If specified, the validator function should take two parameters containing the cell's row and column indices, and should return a string containing the error description.

This property is especially useful when dealing with unbound grids, since bound grids can be validated using the getError property instead.

This example shows how you could prevent cells from containing the same data as the cell immediately above it:

// check that the cell above doesn't contain the same value as this one
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 'This is a duplicate value...'
    }
  }
  return null; // no errors
}
Inherited From
FlexGrid
Type
Function

keyActionEnter

Gets or sets the action to perform when the ENTER key is pressed.

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.

Inherited From
FlexGrid
Type
KeyAction

keyActionTab

Gets or sets the action to perform when the TAB key is pressed.

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.

Inherited From
FlexGrid
Type
KeyAction

mergeManager

Gets or sets the MergeManager object responsible for determining how cells should be merged.

Inherited From
FlexGrid
Type
MergeManager

newRowAtTop

Gets or sets a value that indicates whether the new row template should be located at the top of the grid or at the bottom.

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.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

preserveOutlineState

Gets or sets a value that determines whether the grid should preserve the expanded/collapsed state of nodes when the data is refreshed.

The preserveOutlineState property implementation is based on JavaScript's Map object, which is not available in IE 9 or 10.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

preserveSelectedState

Gets or sets a value that determines whether the grid should preserve the selected state of rows when the data is refreshed.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

quickAutoSize

Gets or sets a value that determines whether the grid should optimize performance over precision when auto-sizing columns.

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. Setting it to null (the default value) enables the feature for grids that don't have a custom itemFormatter or handlers attached to the formatItem event.

Inherited From
FlexGrid
Type
boolean

rightToLeft

Gets a value indicating whether the control is hosted in an element with right-to-left layout.

Inherited From
Control
Type
boolean

rowHeaderPath

Gets or sets the name of the property used to create row header cells.

Row header cells are not visible or selectable. They are meant for use with accessibility tools.

Inherited From
FlexGrid
Type
string

rowHeaders

Gets the GridPanel that contains the row header cells.

Inherited From
FlexGrid
Type
GridPanel

rows

Gets the grid's row collection.

Inherited From
FlexGrid
Type
RowCollection

scrollPosition

Gets or sets a Point that represents the value of the grid's scrollbars.

Inherited From
FlexGrid
Type
Point

scrollSize

Gets the size of the grid content in pixels.

Inherited From
FlexGrid
Type
Size

selectedItems

Gets or sets an array containing the data items that are currently selected.

Note: this property can be read in all selection modes, but it can be set only when selectionMode is set to SelectionMode.ListBox.

Inherited From
FlexGrid
Type
any[]

selectedRows

Gets or sets an array containing the rows that are currently selected.

Note: this property can be read in all selection modes, but it can be set only when selectionMode is set to SelectionMode.ListBox.

Inherited From
FlexGrid
Type
any[]

selectedSheet

Gets the current Sheet in the FlexSheet.

Type
Sheet

selectedSheetIndex

Gets or sets the index of the current sheet in the FlexSheet.

Type
number

selection

Gets or sets the current selection.

Inherited From
FlexGrid
Type
CellRange

selectionMode

Gets or sets the current selection mode.

Inherited From
FlexGrid
Type
SelectionMode

sheets

Gets the collection of Sheet objects representing workbook sheets.

Type
SheetCollection

showDropDown

Gets or sets a value that indicates whether the grid adds drop-down buttons to the cells in columns that have the showDropDown property set to true.

The drop-down buttons are shown only on columns that have a dataMap set and are editable. Clicking on the drop-down buttons causes the grid to show a list where users can select the value for the cell.

Cell drop-downs require the wijmo.input module to be loaded.

Inherited From
FlexGrid
Type
boolean

showErrors

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.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

showFilterIcons

Gets or sets the visiblity of the filter icon.

Type
boolean

showGroups

Gets or sets a value that determines whether the FlexGrid should insert group rows to delimit data groups.

Data groups are created by modifying the groupDescriptions property of the itemsSource.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

showMarquee

Gets or sets a value that indicates whether the grid should display an Excel-style marquee around the current selection.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

showSelectedHeaders

Gets or sets a value that indicates whether the grid should add class names to indicate selected header cells.

The default value for this property is HeadersVisibility.None.

Inherited From
FlexGrid
Type
HeadersVisibility

showSort

Gets or sets a value that determines whether the grid should display sort indicators in the column headers.

Sorting is controlled by the sortDescriptions property of the ICollectionView object used as a the grid's itemsSource.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

sortManager

Gets the SortManager instance that controls FlexSheet sorting.

Type
SortManager

sortRowIndex

Gets or sets the index of row in the column header panel that shows and changes the current sort.

The default value for this property is null, which causes the bottom row in the columnHeaders panel to act as the sort row.

Inherited From
FlexGrid
Type
number

stickyHeaders

Gets or sets a value that determines whether column headers should remain visible when the user scrolls the document.

The default value for this property is false.

Inherited From
FlexGrid
Type
boolean

topLeftCells

Gets the GridPanel that contains the top left cells (to the left of the column headers).

Inherited From
FlexGrid
Type
GridPanel

treeIndent

Gets or sets the indent used to offset row groups of different levels.

Inherited From
FlexGrid
Type
number

undoStack

Gets the UndoStack instance that controls undo and redo operations of the FlexSheet.

Type
UndoStack

validateEdits

Gets or sets a value that determines whether the grid should remain in edit mode when the user tries to commit edits that fail validation.

The grid detects validation errors by calling the getError method on the grid's itemsSource.

The default value for this property is true.

Inherited From
FlexGrid
Type
boolean

viewRange

Gets the range of cells currently in view.

Inherited From
FlexGrid
Type
CellRange

virtualizationThreshold

Gets or sets the minimum number of rows and/or columns required to enable virtualization.

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:

// 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:

// virtualize rows (threshold 0) but not columns (threshold 10,000)
theGrid.virtualizationThreshold = [0, 10000];

The default value for this property is 0, which virtualizes all rows and columns.

Inherited From
FlexGrid
Type
any

Methods

addBoundSheet

addBoundSheet(sheetName: string, source: any, pos?: number, grid?: FlexGrid): Sheet

Add a bound Sheet to the FlexSheet.

Parameters
Optional

The position in the sheets collection.

The FlexGrid instance associated with the Sheet. If not specified then new FlexGrid instance will be created.

Returns
Sheet

addEventListener

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

Adds an event listener to an element owned by this Control.

The control keeps a list of attached listeners and their handlers, making it easier to remove them when the control is disposed (see the dispose and removeEventListener methods).

Failing to remove event listeners may cause memory leaks.

The passive parameter is set to false by default, which means the event handler may call event.preventDefault(). If you are adding passive handlers to touch or wheel events, setting this parameter to true will improve application performance.

For details on passive event listeners, please see Improving scrolling performance with passive listeners.

Parameters
Inherited From
Control
Returns
void

addFunction

addFunction(name: string, func: Function, description?: string, minParamsCount?: number, maxParamsCount?: number): void

Add custom function in FlexSheet.

Parameters
Returns
void

addUnboundSheet

addUnboundSheet(sheetName?: string, rows?: number, cols?: number, pos?: number, grid?: FlexGrid): Sheet

Add an unbound Sheet to the FlexSheet.

Parameters
Returns
Sheet

applyCellsStyle

applyCellsStyle(cellStyle: ICellStyle, cells?: CellRange[], isPreview?: boolean): void

Apply the style to a range of cells.

Parameters
Returns
void

applyFunctionToCell

applyFunctionToCell(): void

Inserts the selected function from the function list to the cell value editor.

Returns
void

applyTemplate

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

Applies the template to a new instance of a control, and returns the root element.

This method should be called by constructors of templated controls. It is responsible for binding the template parts to the corresponding control members.

For example, the code below applies a template to an instance of an InputNumber control. The template must contain elements with the 'wj-part' attribute set to 'input', 'btn-inc', and 'btn-dec'. The control members '_tbx', '_btnUp', and '_btnDn' will be assigned references to these elements.

this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');
Parameters
Inherited From
Control
Returns
HTMLElement

autoSizeColumn

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

Resizes a column to fit its content.

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.

Parameters
Inherited From
FlexGrid
Returns
void

autoSizeColumns

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

Resizes a range of columns to fit their content.

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.

Parameters
Inherited From
FlexGrid
Returns
void

autoSizeRow

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

Resizes a row to fit its content.

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.

Parameters
Inherited From
FlexGrid
Returns
void

autoSizeRows

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

Resizes a range of rows to fit their content.

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.

Parameters
Inherited From
FlexGrid
Returns
void

beginUpdate

beginUpdate(): void

Suspends notifications until the next call to endUpdate.

Inherited From
Control
Returns
void

canEditCell

canEditCell(r: number, c: number): void

Gets a value that indicates whether a given cell can be edited.

Parameters
Inherited From
FlexGrid
Returns
void

clear

clear(): void

Clears the content of the FlexSheet control.

Returns
void

collapseGroupsToLevel

collapseGroupsToLevel(level: number): void

Collapses all the group rows to a given level.

Parameters
Inherited From
FlexGrid
Returns
void

containsFocus

containsFocus(): boolean

Overrides the base class method to take into account the function list.

Returns
boolean

Static convertNumberToAlpha

convertNumberToAlpha(c: number): string

Converts the number value to its corresponding alpha value. For instance: 0, 1, 2...to a, b, c...

Parameters
Returns
string

deferUpdate

deferUpdate(fn: Function): void

Executes a function within a beginUpdate/endUpdate block.

The control will not be updated until the function has been executed. This method ensures endUpdate is called even if the function throws an exception.

Parameters
Inherited From
Control
Returns
void

deleteColumns

deleteColumns(index?: number, count?: number): void

Deletes columns from the current Sheet of the FlexSheet control.

Parameters
Returns
void

deleteRows

deleteRows(index?: number, count?: number): void

Deletes rows from the current Sheet of the FlexSheet control.

Parameters
Returns
void

dispose

dispose(): void

Disposes of the control by removing its association with the host element.

Returns
void

Static disposeAll

disposeAll(e?: HTMLElement): void

Disposes of all Wijmo controls contained in an HTML element.

Parameters
Inherited From
Control
Returns
void

endUpdate

endUpdate(): void

Resumes notifications suspended by calls to beginUpdate.

Inherited From
Control
Returns
void

evaluate

evaluate(formula: string, format?: string, sheet?: Sheet, getPrimitiveResult?: boolean): any

Evaluates a formula.

FlexSheet formulas follow the Excel syntax, including a large subset of the functions supported by Excel. A complete list of the functions supported by FlexSheet can be found here: FlexSheet Functions.

Parameters
Returns
any

finishEditing

finishEditing(cancel?: boolean): boolean

Commits any pending edits and exits edit mode.

Parameters
Inherited From
FlexGrid
Returns
boolean

focus

focus(): void

Overridden to set the focus to the grid without scrolling the whole grid into view.

Inherited From
FlexGrid
Returns
void

freezeAtCursor

freezeAtCursor(): void

Freeze or unfreeze the columns and rows of the FlexSheet control.

Returns
void

getBuiltInTableStyle

getBuiltInTableStyle(styleName: string): TableStyle

Get the built-in table style via its name.

Parameters
Returns
TableStyle

getCellBoundingRect

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

Gets a the bounds of a cell element in viewport coordinates.

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.

Parameters
Inherited From
FlexGrid
Returns
Rect

getCellData

getCellData(r: number, c: number, formatted: boolean): any

Gets the value stored in a cell in the scrollable area of the grid.

Parameters
Inherited From
FlexGrid
Returns
any

getCellValue

getCellValue(rowIndex: number, colIndex: number, formatted?: boolean, sheet?: Sheet): any

Gets the evaluated cell value.

Unlike the getCellData method that returns a raw data that can be a value or a formula, the getCellValue method always returns an evaluated value, that is if the cell contains a formula then it will be evaluated first and the resulting value will be returned.

Parameters
Returns
any

getClipString

getClipString(rng?: CellRange): string

Gets the content of a CellRange as a string suitable for copying to the clipboard.

FlexSheet overrides this method to support multiple rows or columns selection in FlexSheet.

Hidden rows and columns are not included in the clip string.

Parameters
Returns
string

getColumn

getColumn(name: string): Column

Gets a column by name or by binding.

The method searches the column by name. If a column with the given name is not found, it searches by binding. The searches are case-sensitive.

Parameters
Inherited From
FlexGrid
Returns
Column

Static getControl

getControl(element: any): Control

Gets the control that is hosted in a given DOM element.

Parameters
Inherited From
Control
Returns
Control

getMergedRange

getMergedRange(panel: GridPanel, r: number, c: number, clip?: boolean): CellRange

Gets a CellRange that specifies the merged extent of a cell in a GridPanel. This method overrides the getMergedRange method of its parent class FlexGrid

Parameters
Returns
CellRange

getSelectedState

getSelectedState(r: number, c: number): SelectedState

Gets a SelectedState value that indicates the selected state of a cell.

Parameters
Inherited From
FlexGrid
Returns
SelectedState

getSelectionFormatState

getSelectionFormatState(): IFormatState

Gets the IFormatState object describing formatting of the selected cells.

Returns
IFormatState

getTemplate

getTemplate(): string

Gets the HTML template used to create instances of the control.

This method traverses up the class hierarchy to find the nearest ancestor that specifies a control template. For example, if you specify a prototype for the ComboBox control, which does not specify a template, it will override the template defined by the DropDown base class (the nearest ancestor that does specify a template).

Inherited From
Control
Returns
string

hideFunctionList

hideFunctionList(): void

Close the function list.

Returns
void

hitTest

hitTest(pt: any, y?: any): HitTestInfo

Gets a HitTestInfo object with information about a given point.

For example:

// hit test a point when the user clicks on the grid
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] + '".');
});
Parameters
Inherited From
FlexGrid
Returns
HitTestInfo

initialize

initialize(options: any): void

Initializes the control by copying the properties from a given object.

This method allows you to initialize controls using plain data objects instead of setting the value of each property in code.

For example:

grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 } 
  ]
});

// is equivalent to
grid.itemsSource = myList;
grid.autoGenerateColumns = false;

// etc.

The initialization data is type-checked as it is applied. If the initialization object contains unknown property names or invalid data types, this method will throw.

Parameters
Inherited From
Control
Returns
void

insertColumns

insertColumns(index?: number, count?: number): void

Inserts columns in the current Sheet of the FlexSheet control.

Parameters
Returns
void

insertRows

insertRows(index?: number, count?: number): void

Inserts rows in the current Sheet of the FlexSheet control.

Parameters
Returns
void

invalidate

invalidate(fullUpdate?: boolean): void

Invalidates the control causing an asynchronous refresh.

Parameters
Inherited From
Control
Returns
void

Static invalidateAll

invalidateAll(e?: HTMLElement): void

Invalidates all Wijmo controls contained in an HTML element.

Use this method when your application has dynamic panels that change the control's visibility or dimensions. For example, splitters, accordions, and tab controls usually change the visibility of its content elements. In this case, failing to notify the controls contained in the element may cause them to stop working properly.

If this happens, you must handle the appropriate event in the dynamic container and call the invalidateAll method so the contained Wijmo controls will update their layout information properly.

Parameters
Inherited From
Control
Returns
void

isRangeValid

isRangeValid(rng: CellRange): boolean

Checks whether a given CellRange is valid for this grid's row and column collections.

Parameters
Inherited From
FlexGrid
Returns
boolean

load

load(workbook: any): void

Loads the workbook into FlexSheet. This method works with JSZip 2.5.

For example:

// This sample opens an xlsx file chosen through Open File
// dialog and fills FlexSheet
 

// HTML
<input type="file" 
    id="importFile" 
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 
/>
<div id="flexHost"></>
 

// JavaScript
var flexSheet = new wijmo.grid.FlexSheet("#flexHost"),
    importFile = document.getElementById('importFile');
 
importFile.addEventListener('change', function () {
    loadWorkbook();
});
 
function loadWorkbook() {
    var reader,
        file = importFile.files[0];
    if (file) {
        reader = new FileReader();
        reader.onload = function (e) {
            flexSheet.load(reader.result);
        };
        reader.readAsArrayBuffer(file);
    }
}
Parameters
Returns
void

loadAsync

loadAsync(workbook: any, onLoaded?: (workbook: wijmo.xlsx.Workbook), onError?: (reason?: any)): void

Loads the workbook into FlexSheet asynchronously. This method works with JSZip 3.0.

Parameters
Returns
void

mergeRange

mergeRange(cells?: CellRange, isCopyMergeCell?: boolean): void

Merges the selected CellRange into one cell.

Parameters
Returns
void

onAutoSizedColumn

onAutoSizedColumn(e: CellRangeEventArgs): void

Raises the autoSizedColumn event.

Parameters
Inherited From
FlexGrid
Returns
void

onAutoSizedRow

onAutoSizedRow(e: CellRangeEventArgs): void

Raises the autoSizedRow event.

Parameters
Inherited From
FlexGrid
Returns
void

onAutoSizingColumn

onAutoSizingColumn(e: CellRangeEventArgs): boolean

Raises the autoSizingColumn event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onAutoSizingRow

onAutoSizingRow(e: CellRangeEventArgs): boolean

Raises the autoSizingRow event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onBeginDroppingRowColumn

onBeginDroppingRowColumn(e: DroppingRowColumnEventArgs): void

Raises the beginDroppingRowColumn event.

Parameters
Returns
void

onBeginningEdit

onBeginningEdit(e: CellRangeEventArgs): boolean

Raises the beginningEdit event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onCellEditEnded

onCellEditEnded(e: CellRangeEventArgs): void

Raises the cellEditEnded event.

Parameters
Inherited From
FlexGrid
Returns
void

onCellEditEnding

onCellEditEnding(e: CellEditEndingEventArgs): boolean

Raises the cellEditEnding event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onColumnChanged

onColumnChanged(e: RowColumnChangedEventArgs): void

Raises the columnChanged event.

Parameters
Returns
void

onCopied

onCopied(e: CellRangeEventArgs): void

Raises the copied event.

Parameters
Inherited From
FlexGrid
Returns
void

onCopying

onCopying(e: CellRangeEventArgs): boolean

Raises the copying event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDeletedRow

onDeletedRow(e: CellRangeEventArgs): void

Raises the deletedRow event.

Parameters
Inherited From
FlexGrid
Returns
void

onDeletingRow

onDeletingRow(e: CellRangeEventArgs): boolean

Raises the deletingRow event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDraggedColumn

onDraggedColumn(e: CellRangeEventArgs): void

Raises the draggedColumn event.

Parameters
Inherited From
FlexGrid
Returns
void

onDraggedRow

onDraggedRow(e: CellRangeEventArgs): void

Raises the draggedRow event.

Parameters
Inherited From
FlexGrid
Returns
void

onDraggingColumn

onDraggingColumn(e: CellRangeEventArgs): boolean

Raises the draggingColumn event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDraggingColumnOver

onDraggingColumnOver(e: CellRangeEventArgs): boolean

Raises the draggingColumnOver event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDraggingRow

onDraggingRow(e: CellRangeEventArgs): boolean

Raises the draggingRow event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDraggingRowColumn

onDraggingRowColumn(e: DraggingRowColumnEventArgs): void

Raises the draggingRowColumn event.

Parameters
Returns
void

onDraggingRowOver

onDraggingRowOver(e: CellRangeEventArgs): boolean

Raises the draggingRowOver event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onDroppingRowColumn

onDroppingRowColumn(e?: EventArgs): void

Raises the droppingRowColumn event.

Parameters
Returns
void

onEndDroppingRowColumn

onEndDroppingRowColumn(e: CancelEventArgs): void

Raises the endDroppingRowColumn event.

Parameters
Returns
void

onFormatItem

onFormatItem(e: FormatItemEventArgs): void

Raises the formatItem event.

Parameters
Inherited From
FlexGrid
Returns
void

onGotFocus

onGotFocus(e?: EventArgs): void

Raises the gotFocus event.

Parameters
Inherited From
Control
Returns
void

onGroupCollapsedChanged

onGroupCollapsedChanged(e: CellRangeEventArgs): void

Raises the groupCollapsedChanged event.

Parameters
Inherited From
FlexGrid
Returns
void

onGroupCollapsedChanging

onGroupCollapsedChanging(e: CellRangeEventArgs): boolean

Raises the groupCollapsedChanging event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onItemsSourceChanged

onItemsSourceChanged(e?: EventArgs): void

Raises the itemsSourceChanged event.

Parameters
Inherited From
FlexGrid
Returns
void

onItemsSourceChanging

onItemsSourceChanging(e: CancelEventArgs): boolean

Raises the itemsSourceChanged event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onLoaded

onLoaded(e?: EventArgs): void

Raises the loaded event.

Parameters
Returns
void

onLoadedRows

onLoadedRows(e?: EventArgs): void

Raises the loadedRows event.

Parameters
Inherited From
FlexGrid
Returns
void

onLoadingRows

onLoadingRows(e: CancelEventArgs): boolean

Raises the loadingRows event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onLostFocus

onLostFocus(e?: EventArgs): void

Raises the lostFocus event.

Parameters
Inherited From
Control
Returns
void

onPasted

onPasted(e: CellRangeEventArgs): void

Raises the pasted event.

Parameters
Inherited From
FlexGrid
Returns
void

onPastedCell

onPastedCell(e: CellRangeEventArgs): void

Raises the pastedCell event.

Parameters
Inherited From
FlexGrid
Returns
void

onPasting

onPasting(e: CellRangeEventArgs): boolean

Raises the pasting event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onPastingCell

onPastingCell(e: CellRangeEventArgs): boolean

Raises the pastingCell event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onPrepareCellForEdit

onPrepareCellForEdit(e: CellRangeEventArgs): void

Raises the prepareCellForEdit event.

Parameters
Inherited From
FlexGrid
Returns
void

onPrepareChangingColumn

onPrepareChangingColumn(e: RowColumnChangedEventArgs): void

Raises the prepareChangingColumn event.

Parameters
Returns
void

onPrepareChangingRow

onPrepareChangingRow(e: RowColumnChangedEventArgs): void

Raises the prepareChangingRow event.

Parameters
Returns
void

onRefreshed

onRefreshed(e?: EventArgs): void

Raises the refreshed event.

Parameters
Inherited From
Control
Returns
void

onRefreshing

onRefreshing(e?: EventArgs): void

Raises the refreshing event.

Parameters
Inherited From
Control
Returns
void

onResizedColumn

onResizedColumn(e: CellRangeEventArgs): void

Raises the resizedColumn event.

Parameters
Inherited From
FlexGrid
Returns
void

onResizedRow

onResizedRow(e: CellRangeEventArgs): void

Raises the resizedRow event.

Parameters
Inherited From
FlexGrid
Returns
void

onResizingColumn

onResizingColumn(e: CellRangeEventArgs): boolean

Raises the resizingColumn event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onResizingRow

onResizingRow(e: CellRangeEventArgs): boolean

Raises the resizingRow event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onRowAdded

onRowAdded(e: CellRangeEventArgs): boolean

Raises the rowAdded event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onRowChanged

onRowChanged(e: RowColumnChangedEventArgs): void

Raises the rowChanged event.

Parameters
Returns
void

onRowEditEnded

onRowEditEnded(e: CellRangeEventArgs): void

Raises the rowEditEnded event.

Parameters
Inherited From
FlexGrid
Returns
void

onRowEditEnding

onRowEditEnding(e: CellRangeEventArgs): void

Raises the rowEditEnding event.

Parameters
Inherited From
FlexGrid
Returns
void

onRowEditStarted

onRowEditStarted(e: CellRangeEventArgs): void

Raises the rowEditStarted event.

Parameters
Inherited From
FlexGrid
Returns
void

onRowEditStarting

onRowEditStarting(e: CellRangeEventArgs): void

Raises the rowEditStarting event.

Parameters
Inherited From
FlexGrid
Returns
void

onScrollPositionChanged

onScrollPositionChanged(e?: EventArgs): void

Raises the scrollPositionChanged event.

Parameters
Inherited From
FlexGrid
Returns
void

onSelectedSheetChanged

onSelectedSheetChanged(e: PropertyChangedEventArgs): void

Raises the currentSheetChanged event.

Parameters
Returns
void

onSelectionChanged

onSelectionChanged(e: CellRangeEventArgs): void

Raises the selectionChanged event.

Parameters
Inherited From
FlexGrid
Returns
void

onSelectionChanging

onSelectionChanging(e: CellRangeEventArgs): boolean

Raises the selectionChanging event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onSheetCleared

onSheetCleared(e?: EventArgs): void

Raises the sheetCleared event.

Parameters
Returns
void

onSortedColumn

onSortedColumn(e: CellRangeEventArgs): void

Raises the sortedColumn event.

Parameters
Inherited From
FlexGrid
Returns
void

onSortingColumn

onSortingColumn(e: CellRangeEventArgs): boolean

Raises the sortingColumn event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onUnknownFunction

onUnknownFunction(e: UnknownFunctionEventArgs): void

Raises the unknownFunction event.

Parameters
Returns
void

onUpdatedLayout

onUpdatedLayout(e?: EventArgs): void

Raises the updatedLayout event.

Parameters
Inherited From
FlexGrid
Returns
void

onUpdatedView

onUpdatedView(e?: EventArgs): void

Raises the updatedView event.

Parameters
Inherited From
FlexGrid
Returns
void

onUpdatingLayout

onUpdatingLayout(e: CancelEventArgs): boolean

Raises the updatingLayout event.

Parameters
Inherited From
FlexGrid
Returns
boolean

onUpdatingView

onUpdatingView(e: CancelEventArgs): boolean

Raises the updatingView event.

Parameters
Inherited From
FlexGrid
Returns
boolean

redo

redo(): void

Redo the last user action.

Returns
void

refresh

refresh(fullUpdate?: boolean): void

Overridden to refresh the sheet and the TabHolder.

Parameters
Returns
void

Static refreshAll

refreshAll(e?: HTMLElement): void

Refreshes all Wijmo controls contained in an HTML element.

This method is similar to invalidateAll, except the controls are updated immediately rather than after an interval.

Parameters
Inherited From
Control
Returns
void

refreshCells

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

Refreshes the grid display.

Parameters
Inherited From
FlexGrid
Returns
void

removeEventListener

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

Removes one or more event listeners attached to elements owned by this Control.

Parameters
Inherited From
Control
Returns
number

save

save(fileName?: string, options?: IFlexSheetXlsxOptions): Workbook

Saves FlexSheet to xlsx file. This method works with JSZip 2.5.

For example:

// This sample exports FlexSheet content to an xlsx file.  
// click.
 

// HTML
<button 
    onclick="saveXlsx('FlexSheet.xlsx')">
    Save
</button>
 

// JavaScript
function saveXlsx(fileName) {

    // Save the flexGrid to xlsx file.
    flexsheet.save(fileName);
}
Parameters
Returns
Workbook

saveAsync

saveAsync(fileName?: string, onSaved?: (base64?: string), onError?: (reason?: any), options?: IFlexSheetXlsxOptions): void

Saves the FlexSheet to xlsx file asynchronously. This method works with JSZip 3.0.

Parameters
Returns
void

scrollIntoView

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

Scrolls the grid to bring a specific cell into view.

Negative row and column indices are ignored, so if you call

grid.scrollIntoView(200, -1);

The grid will scroll vertically to show row 200, and will not scroll horizontally.

Parameters
Inherited From
FlexGrid
Returns
boolean

select

select(rng: any, show?: any): void

Selects a cell range and optionally scrolls it into view.

FlexSheet overrides this method to adjust the selection cell range for the merged cells in the FlexSheet.

Parameters
Returns
void

selectNextFunction

selectNextFunction(): void

Select next function in the function list.

Returns
void

selectPreviousFunction

selectPreviousFunction(): void

Select previous function in the function list.

Returns
void

setCellData

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

Overrides the setCellData function of the base class.

Parameters
Returns
boolean

setClipString

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

Parses a string into rows and columns and applies the content to a given range.

Override the setClipString method of FlexGrid.

Parameters
Returns
void

showColumnFilter

showColumnFilter(): void

Show the filter editor.

Returns
void

showFunctionList

showFunctionList(target: HTMLElement): void

Open the function list.

Parameters
Returns
void

startEditing

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

Starts editing a given cell.

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.

While editing, the user can toggle between full and quick modes by pressing the F2 key.

Parameters
Inherited From
FlexGrid
Returns
boolean

toggleDropDownList

toggleDropDownList(): void

Toggles the drop-down list-box associated with the currently selected cell.

This method can be used to show the drop-down list automatically when the cell enters edit mode, or when the user presses certain keys.

For example, this code causes the grid to show the drop-down list whenever the grid enters edit mode:

// show the drop-down list when the grid enters edit mode
theGrid.beginningEdit = function () {
  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:

// show the drop-down list when the user presses the space bar
theGrid.hostElement.addEventListener('keydown', function (e) {
  if (e.keyCode == 32) {
    e.preventDefault();
    theGrid.toggleDropDownList();
  }
}, true);
Inherited From
FlexGrid
Returns
void

undo

undo(): void

Undo the last user action.

Returns
void

Events

autoSizedColumn

Occurs after the user auto-sizes a column by double-clicking the right edge of a column header cell.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

autoSizedRow

Occurs after the user auto-sizes a row by double-clicking the bottom edge of a row header cell.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

autoSizingColumn

Occurs before the user auto-sizes a column by double-clicking the right edge of a column header cell.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

autoSizingRow

Occurs before the user auto-sizes a row by double-clicking the bottom edge of a row header cell.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

beginDroppingRowColumn

Occurs when begin dropping the rows or the columns of the FlexSheet.

Arguments
DroppingRowColumnEventArgs

beginningEdit

Occurs before a cell enters edit mode.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

cellEditEnded

Occurs when a cell edit has been committed or canceled.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

cellEditEnding

Occurs when a cell edit is ending.

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.

function cellEditEnding (sender, e) {

  // get old and new values
  var flex = sender,
      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.

Inherited From
FlexGrid
Arguments
CellEditEndingEventArgs

columnChanged

Occurs after the FlexSheet inserted or deleted columns.

Arguments
RowColumnChangedEventArgs

copied

Occurs after the user has copied the selection content to the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

copying

Occurs when the user is copying the selection content to the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).

The event handler may cancel the copy operation.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

deletedRow

Occurs after the user has deleted a row by pressing the Delete key (see the allowDelete property).

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

deletingRow

Occurs when the user is deleting a selected row by pressing the Delete key (see the allowDelete property).

The event handler may cancel the row deletion.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggedColumn

Occurs when the user finishes dragging a column.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggedRow

Occurs when the user finishes dragging a row.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggingColumn

Occurs when the user starts dragging a column.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggingColumnOver

Occurs as the user drags a column to a new position.

The handler may cancel the event to prevent users from dropping columns at certain positions. For example:

// remember column being dragged
flex.draggingColumn.addHandler(function (s, e) {
    theColumn = s.columns[e.col].binding;
});

// prevent 'sales' column from being dragged to index 0
s.draggingColumnOver.addHandler(function (s, e) {
    if (theColumn == 'sales' && e.col == 0) {
        e.cancel = true;
    }
});
Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggingRow

Occurs when the user starts dragging a row.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

draggingRowColumn

Occurs when dragging the rows or the columns of the FlexSheet.

Arguments
DraggingRowColumnEventArgs

draggingRowOver

Occurs as the user drags a row to a new position.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

droppingRowColumn

Occurs when dropping the rows or the columns of the FlexSheet. This event has been deprecated. Please use beginDroppingRowColumn and endDroppingRowColumn event instead.

Arguments
EventArgs

endDroppingRowColumn

Occurs when end dropping the rows or the columns of the FlexSheet.

Arguments
CancelEventArgs

formatItem

Occurs when an element representing a cell has been created.

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.

For example, this code removes the 'wj-wrap' class from cells in group rows:

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

gotFocus

Occurs when the control gets the focus.

Inherited From
Control
Arguments
EventArgs

groupCollapsedChanged

Occurs after a group has been expanded or collapsed.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

groupCollapsedChanging

Occurs when a group is about to be expanded or collapsed.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

itemsSourceChanged

Occurs after the grid has been bound to a new items source.

Inherited From
FlexGrid
Arguments
EventArgs

itemsSourceChanging

Occurs after the grid has been bound to a new items source.

Inherited From
FlexGrid
Arguments
CancelEventArgs

loaded

Occurs after the FlexSheet loads the Workbook instance

Arguments
EventArgs

loadedRows

Occurs after the grid rows have been bound to items in the data source.

Inherited From
FlexGrid
Arguments
EventArgs

loadingRows

Occurs before the grid rows are bound to items in the data source.

Inherited From
FlexGrid
Arguments
CancelEventArgs

lostFocus

Occurs when the control loses the focus.

Inherited From
Control
Arguments
EventArgs

pasted

Occurs after the user has pasted content from the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

pastedCell

Occurs after the user has pasted content from the clipboard into a cell (see the autoClipboard property).

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

pasting

Occurs when the user is pasting content from the clipboard by pressing one of the clipboard shortcut keys (see the autoClipboard property).

The event handler may cancel the paste operation.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

pastingCell

Occurs when the user is pasting content from the clipboard into a cell (see the autoClipboard property).

The event handler may cancel the paste operation.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

prepareCellForEdit

Occurs when an editor cell is created and before it becomes active.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

prepareChangingColumn

Occurs before the FlexSheet inserts or deletes columns.

Arguments
RowColumnChangedEventArgs

prepareChangingRow

Occurs before the FlexSheet insert\delete rows.

Arguments
RowColumnChangedEventArgs

refreshed

Occurs after the control has refreshed its contents.

Inherited From
Control
Arguments
EventArgs

refreshing

Occurs when the control is about to refresh its contents.

Inherited From
Control
Arguments
EventArgs

resizedColumn

Occurs when the user finishes resizing a column.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

resizedRow

Occurs when the user finishes resizing rows.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

resizingColumn

Occurs as columns are resized.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

resizingRow

Occurs as rows are resized.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

rowAdded

Occurs when the user creates a new item by editing the new row template (see the allowAddNew property).

The event handler may customize the content of the new item or cancel the new item creation.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

rowChanged

Occurs after the FlexSheet insert\delete rows.

Arguments
RowColumnChangedEventArgs

rowEditEnded

Occurs when a row edit has been committed or canceled.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

rowEditEnding

Occurs when a row edit is ending, before the changes are committed or canceled.

This event can be used in conjunction with the rowEditStarted event to implement deep-binding edit undos. For example:

// save deep bound values when editing starts
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);
    }
  })
});

// restore deep bound values when edits are canceled
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 = {};
});
Inherited From
FlexGrid
Arguments
CellRangeEventArgs

rowEditStarted

Occurs after a row enters edit mode.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

rowEditStarting

Occurs before a row enters edit mode.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

scrollPositionChanged

Occurs after the control has scrolled.

Inherited From
FlexGrid
Arguments
EventArgs

selectedSheetChanged

Occurs when current sheet index changed.

Arguments
PropertyChangedEventArgs

selectionChanged

Occurs after selection changes.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

selectionChanging

Occurs before selection changes.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

sheetCleared

Occurs when the FlexSheet is cleared.

Arguments
EventArgs

sortedColumn

Occurs after the user applies a sort by clicking on a column header.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

sortingColumn

Occurs before the user applies a sort by clicking on a column header.

Inherited From
FlexGrid
Arguments
CellRangeEventArgs

unknownFunction

Occurs when the FlexSheet meets the unknown formula.

Arguments
UnknownFunctionEventArgs

updatedLayout

Occurs after the grid has updated its internal layout.

Inherited From
FlexGrid
Arguments
EventArgs

updatedView

Occurs when the grid finishes creating/updating the elements that make up the current view.

The grid updates the view in response to several actions, including:

  • refreshing the grid or its data source,
  • adding, removing, or changing rows or columns,
  • resizing or scrolling the grid,
  • changing the selection.

Inherited From
FlexGrid
Arguments
EventArgs

updatingLayout

Occurs before the grid updates its internal layout.

Inherited From
FlexGrid
Arguments
CancelEventArgs

updatingView

Occurs when the grid starts creating/updating the elements that make up the current view.

Inherited From
FlexGrid
Arguments
CancelEventArgs