constructor(element: any, options?: any): FlexSheet
This constructor is for internal use.
Initializes a new instance of a FlexSheet control.
The DOM element that will host the control, or a jQuery selector (e.g. '#theCtrl').
JavaScript object containing initialization data for the control.
Gets the HTMLInputElement that represents the cell editor currently active.
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.
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.
Gets or sets a value that determines whether users are allowed to drag rows and/or columns with the mouse.
Gets or sets which parts of the grid provide cell merging.
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.
Gets or sets a value that determines whether users are allowed to sort columns by clicking the column header cells.
Gets or sets a value that determines whether the grid should handle clipboard shortcuts.
The clipboard shortcuts are as follows:
Only visible rows and columns are included in clipboard operations.
Read-only cells are not affected by paste operations.
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:
var grid = new wijmo.grid.FlexGrid('#theGrid', {
autoGenerateColumns: false, // data items may contain null values
columns: [ // so define columns explicitly
{ binding: 'name', header: 'Name', type: 'String' },
{ binding: 'amount', header: 'Amount', type: 'Number' },
{ binding: 'date', header: 'Date', type: 'Date' },
{ binding: 'active', header: 'Active', type: 'Boolean' }
],
itemsSource: customers
});
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.
Gets the GridPanel that contains the bottom left cells.
The bottomLeftCells panel appears below the row headers, to the left of the columnFooters panel.
Gets or sets the CellFactory that creates and updates cells for this grid.
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. 'items').
If items at different levels child items with different names, then set this property to an array containing the names of the properties that contain child items et each level (e.g. [ 'accounts', 'checks', 'earnings' ]).
Gets the client size of the control (control size minus headers and scrollbars).
Gets the ICollectionView that contains the grid data.
Gets the GridPanel that contains the column header cells.
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.
Gets the bounding rectangle of the control in page coordinates.
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.
Gets a CellRange that identifies the cell currently being edited.
Gets or sets the number of frozen columns.
Frozen columns do not scroll horizontally, but the cells they contain may be selected and edited.
Gets or sets the number of frozen rows.
Frozen rows do not scroll vertically, but the cells they contain may be selected and edited.
Gets or sets the format string used to create the group header content.
The string may contain any text, plus the following replacement strings:
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)'.
Gets or sets a value that determines whether the row and column headers are visible.
Gets the DOM element that is hosting the control.
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.
Gets or sets a value that determines whether the control is disabled.
Disabled controls cannot get mouse or keyboard events.
Gets or sets a value that determines whether the user can modify cell values using the mouse and keyboard.
Gets a value that indicates whether the control is currently handling a touch event.
Gets a value that indicates whether the control is currently being updated.
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.
Gets or sets the array or ICollectionView that contains items shown on the grid.
Gets or sets the MergeManager object responsible for determining how cells should be merged.
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.
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.
Gets or sets a value that determines whether the grid should preserve the selected state of rows when the data is refreshed.
Gets a value indicating whether the control is hosted in an element with right-to-left layout.
Gets the GridPanel that contains the row header cells.
Gets or sets a Point that represents the value of the grid's scrollbars.
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.
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.
Gets or sets a value that determines whether the grid should add the 'wj-alt' class to cells in alternating rows.
Setting this property to false disables alternate row styles without any changes to the CSS.
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 getError property on the grid's itemsSource.
Gets or sets a value that determines whether the grid should insert group rows to delimit data groups.
Data groups are created by modifying the groupDescriptions property of the itemsSource.
Gets or sets a value that indicates whether the grid should display a marquee element around the current selection.
Gets or sets a value that indicates whether the grid should add class names to indicate selected header cells.
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.
Gets or sets the index of row in the column header panel that shows and changes the current sort.
This property is set to null by default, causing the last row in the columnHeaders panel to act as the sort row.
Gets or sets a value that determines whether column headers should remain visible when the user scrolls the document.
Gets the GridPanel that contains the top left cells (to the left of the column headers).
Gets or sets the indent used to offset row groups of different levels.
Gets the UndoStack instance that controls undo and redo operations of the FlexSheet.
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.
addBoundSheet(sheetName: string, source: any, pos?: number, grid?: FlexGrid): Sheet
Add a bound Sheet to the FlexSheet.
The name of the Sheet.
The items source for the Sheet.
The position in the sheets collection.
The FlexGrid instance associated with the Sheet. If not specified then new FlexGrid instance will be created.
addCustomFunction(name: string, func: Function, description?: string, minParamsCount?: number, maxParamsCount?: number): void
Add custom function in FlexSheet.
the name of the custom function.
the custom function.
the description of the custom function, it will be shown in the function autocompletion of the FlexSheet.
the minimum count of the parameter that the function need.
the maximum count of the parameter that the function need. If the count of the parameters in the custom function is arbitrary, the minParamsCount and maxParamsCount should be set to null.
addEventListener(target: EventTarget, type: string, fn: any, capture?: 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 method).
Failing to remove event listeners may cause memory leaks.
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener is capturing.
addUnboundSheet(sheetName?: string, rows?: number, cols?: number, pos?: number, grid?: FlexGrid): Sheet
Add an unbound Sheet to the FlexSheet.
The name of the Sheet.
The row count of the Sheet.
The column count of the Sheet.
The position in the sheets collection.
The FlexGrid instance associated with the Sheet. If not specified then new FlexGrid instance will be created.
applyCellsStyle(cellStyle: ICellStyle, cells?: CellRange[], isPreview?: boolean): void
Apply the style to a range of cells.
The ICellStyle object to apply.
An array of CellRange objects to apply the style to. If not specified then style is applied to the currently selected cells.
Indicates whether the applied style is just for preview.
applyFunctionToCell(): void
Inserts the selected function from the function list to the cell value editor.
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');
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
Resizes a column to fit its content.
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
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 potentially take a long time.
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
Resizes a row to fit its content.
Index of the row to resize.
Whether the row index refers to a regular or a header row.
Extra spacing, in pixels.
autoSizeRows(firstRow?: number, lastRow?: number, header?: boolean, extra?: number): void
Resizes a range of rows to fit their content.
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.
beginUpdate(): void
Suspends notifications until the next call to endUpdate.
canEditCell(r: number, c: number): void
Gets a value that indicates whether a given cell can be edited.
Index of the row that contains the cell.
Index of the column that contains the cell.
clear(): void
Clears the content of the FlexSheet control.
collapseGroupsToLevel(level: number): void
Collapses all the group rows to a given level.
Maximum group level to show.
containsFocus(): boolean
Overrides the base class method to take into account the function list.
convertNumberToAlpha(c: number): string
Converts the number value to its corresponding alpha value. For instance: 0, 1, 2...to a, b, c...
The number value need to be converted.
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.
Function to be executed.
deleteColumns(index?: number, count?: number): void
Deletes columns from the current Sheet of the FlexSheet control.
The starting index of the deleting columns. If not specified then columns will be deleted starting from the first column of the current selection.
The numbers of columns to delete. If not specified then one column will be deleted.
deleteRows(index?: number, count?: number): void
Deletes rows from the current Sheet of the FlexSheet control.
The starting index of the deleting rows. If not specified then rows will be deleted starting from the first row of the current selection.
The numbers of rows to delete. If not specified then one row will be deleted.
dispose(): void
Disposes of the control by removing its association with the host element.
disposeAll(e?: HTMLElement): void
Disposes of all Wijmo controls contained in an HTML element.
Container element.
endUpdate(): void
Resumes notifications suspended by calls to beginUpdate.
evaluate(formula: string, format?: string, sheet?: Sheet): 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.
The formula to evaluate. The formula may start with an optional equals sign ('=').
If specified, defines the .Net format that will be applied to the evaluated value.
The Sheet whose data will be used for evaluation. If not specified then the current sheet is used.
finishEditing(cancel?: boolean): boolean
Commits any pending edits and exits edit mode.
Whether pending edits should be canceled or committed.
focus(): void
Overridden to set the focus to the grid without scrolling the whole grid into view.
freezeAtCursor(): void
Freeze or unfreeze the columns and rows of the FlexSheet control.
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.
getCellData(r: number, c: number, formatted: boolean): any
Gets the value stored in a cell in the scrollable area of the grid.
Index of the row that contains the cell.
Index of the column that contains the cell.
Whether to format the value for display.
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.
The row index of the cell.
The column index of the cell.
Indicates whether to return an original or a formatted value of the cell.
The Sheet whose value to evaluate. If not specified then the data from current sheet is used.
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.
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.
The name or binding to find.
getControl(element: any): Control
Gets the control that is hosted in a given DOM element.
The DOM element that is hosting the control, or a selector for the host element (e.g. '#theCtrl').
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
GridPanel that contains the range.
Index of the row that contains the cell.
Index of the column that contains the cell.
Whether to clip the merged range to the grid's current view range.
getSelectedState(r: number, c: number): SelectedState
Gets a SelectedState value that indicates the selected state of a cell.
getSelectionFormatState(): IFormatState
Gets the IFormatState object describing formatting of the selected cells.
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, it will override the template defined by the DropDown base class.
hideFunctionList(): void
Close the function list.
hitTest(pt: any, y?: number): 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] + '".');
});
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
This method is for internal use.
Initializes the FlexSheet 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.
Object that contains the initialization data.
insertColumns(index?: number, count?: number): void
Inserts columns in the current Sheet of the FlexSheet control.
The position where new columns should be added. If not specified then columns will be added before the left column of the current selection.
The numbers of columns to add. If not specified then one column will be added.
insertRows(index?: number, count?: number): void
Inserts rows in the current Sheet of the FlexSheet control.
The position where new rows should be added. If not specified then rows will be added before the first row of the current selection.
The numbers of rows to add. If not specified then one row will be added.
invalidate(fullUpdate?: boolean): void
Invalidates the control causing an asynchronous refresh.
Whether to update the control layout as well as the content.
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.
Container element. If set to null, all Wijmo controls on the page will be invalidated.
isRangeValid(rng: CellRange): boolean
Checks whether a given CellRange is valid for this grid's row and column collections.
Range to check.
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);
}
}
A workbook instance or a Blob instance or a base-64 string or an ArrayBuffer containing xlsx file content.
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.
A workbook instance or a Blob instance or a base-64 string or an ArrayBuffer containing xlsx file content.
This callback provides an approach to get the loaded workbook instance. Since this method is an asynchronous method, user is not able to get the loaded workbook instance immediately. User has to get the loaded workbook instance through this callback. This has a single parameter, the loaded workbook instance. It is passed to user.
This callback catches error information when loading. This has a single parameter, the failure reason. The return value is passed to user if he wants to catch the load failure reason.
For example:
flexsheet.loadAsync(blob, function (workbook) {
// user can access the loaded workbook instance in this callback.
var app = worksheet.application ;
...
}, function (reason) {
// User can catch the failure reason in this callback.
console.log('The reason of load failure is ' + reason);
});
mergeRange(cells?: CellRange, isCopyMergeCell?: boolean): void
Merges the selected CellRange into one cell.
The CellRange to merge.
This parameter indicates that merge operation is done by copy\paste merge cell or not.
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.
onColumnChanged(e: RowColumnChangedEventArgs): void
Raises the columnChanged event.
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.
onDraggingRowColumn(e: DraggingRowColumnEventArgs): void
Raises the draggingRowColumn event.
onDraggingRowOver(e: CellRangeEventArgs): boolean
Raises the draggingRowOver event.
CellRangeEventArgs that contains the event data.
onDroppingRowColumn(e?: EventArgs): void
Raises the droppingRowColumn event.
onFormatItem(e: FormatItemEventArgs): void
Raises the formatItem event.
FormatItemEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
Overridden to transfer focus to the active cell (for accessibility).
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.
onItemsSourceChanged(e?: EventArgs): void
Raises the itemsSourceChanged event.
onLoaded(e?: EventArgs): void
Raises the loaded event.
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
Overridden to reset mouse state when losing focus.
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.
onPrepareCellForEdit(e: CellRangeEventArgs): void
Raises the prepareCellForEdit event.
CellRangeEventArgs that contains the event data.
onPrepareChangingColumn(): void
Raises the prepareChangingColumn event.
onPrepareChangingRow(): void
Raises the prepareChangingRow event.
onRemoteLoaded(e: EventArgs): void
Raises the remoteLoaded event.
onRemoteLoading(e: CancelEventArgs): void
Raises the remoteLoading event.
onRemoteSaved(e: RemoteSavedEventArgs): void
Raises the remoteSaved event.
onRemoteSaving(e: CancelEventArgs): void
Raises the fileSaving event.
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): void
Raises the rowAdded event.
CellRangeEventArgs that contains the event data.
onRowChanged(e: RowColumnChangedEventArgs): void
Raises the rowChanged event.
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.
onSelectedSheetChanged(e: PropertyChangedEventArgs): void
Raises the currentSheetChanged event.
PropertyChangedEventArgs that contains the event data.
onSelectionChanged(e: CellRangeEventArgs): void
Raises the selectionChanged event.
CellRangeEventArgs that contains the event data.
onSelectionChanging(e: CellRangeEventArgs): boolean
Raises the selectionChanging event.
CellRangeEventArgs that contains the event data.
onSheetCleared(e?: EventArgs): void
Raises the sheetCleared event.
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.
onUnknownFunction(e: UnknownFunctionEventArgs): void
Raises the unknownFunction event.
onUpdatedLayout(e?: EventArgs): void
Raises the updatedLayout event.
onUpdatedView(e?: EventArgs): void
Raises the updatedView event.
onUpdatingLayout(e: CancelEventArgs): boolean
Raises the updatingLayout event.
CancelEventArgs that contains the event data.
onUpdatingView(e: CancelEventArgs): boolean
Raises the updatingView event.
CancelEventArgs that contains the event data.
redo(): void
Redo the last user action.
refresh(fullUpdate?: boolean): void
Overridden to refresh the sheet and the TabHolder.
Whether to update the control layout as well as the content.
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.
Container element. If set to null, all Wijmo controls on the page will be invalidated.
refreshCells(fullUpdate: boolean, recycle?: boolean, state?: boolean): void
Refreshes the grid display.
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.
remoteLoad(actionUrl?: string): void
Invoke this method to load data from server.
The action url for remote saving.
remoteSave(contentType?: ContentType, actionUrl?: string, extraData?: any): void
Invoke this method to save data to server.
ContentType specify the data type.
The action url for remote saving.
The extra data.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
Removes one or more event listeners attached to elements owned by this Control.
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.
save(fileName?: string): 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);
}
Name of the file that is generated.
saveAsync(fileName?: string, onSaved?: (base64?: string), onError?: (reason?: any)): void
Saves the FlexSheet to xlsx file asynchronously. This method works with JSZip 3.0.
Name of the file that is generated.
This callback provides an approach to get the base-64 string that represents the content of the saved FlexSheet. Since this method is an asynchronous method, user is not able to get the base-64 string immediately. User has to get the base-64 string through this callback. This has a single parameter, the base64 string of the saved flexsheet. It is passed to user.
This callback catches error information when saving. This has a single parameter, the failure reason. The return value is passed to user if he wants to catch the save failure reason.
For example:
flexsheet.saveAsync('', function (base64) {
// user can access the base64 string in this callback.
document.getElementByID('export').href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' + 'base64,' + base64;
}, function (reason) {
// User can catch the failure reason in this callback.
console.log('The reason of save failure is ' + reason);
});
scrollIntoView(r: number, c: number): boolean
Scrolls the grid to bring a specific cell into view.
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.
The cell range to select.
Indicates whether to scroll the new selection into view.
selectNextFunction(): void
Select next function in the function list.
selectPreviousFunction(): void
Select previous function in the function list.
setCellData(r: number, c: any, value: any, coerce?: boolean): boolean
Overrides the setCellData function of the base class.
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.
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.
Tab and newline delimited text to parse into the grid.
CellRange to copy. If omitted, the current selection is used.
showColumnFilter(): void
Show the filter editor.
showFunctionList(target: HTMLElement): void
Open the function list.
The DOM element that toggle the function list.
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.
Whether to stay in edit mode when the user presses the cursor keys. Defaults to false.
Index of the row to be edited. Defaults to the currently selected row.
Index 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.
undo(): void
Undo the last user action.
Occurs after the user auto-sizes a column by double-clicking the right edge of a column header cell.
Occurs after the user auto-sizes a row by double-clicking the bottom edge of a row header cell.
Occurs before the user auto-sizes a column by double-clicking the right edge of a column header cell.
Occurs before the user auto-sizes a row by double-clicking the bottom edge of a row header cell.
Occurs before a cell enters edit mode.
Occurs when a cell edit has been committed or canceled.
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.
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).
The event handler may cancel the copy operation.
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 event handler may cancel the row deletion.
Occurs when the user finishes dragging a column.
Occurs when the user finishes dragging a row.
Occurs when the user starts dragging a column.
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;
}
});
Occurs when the user starts dragging a row.
Occurs when dragging the rows or the columns of the FlexSheet.
Occurs as the user drags a row to a new position.
Occurs when dropping the rows or the columns of the FlexSheet.
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');
}
});
Occurs after a group has been expanded or collapsed.
Occurs when a group is about to be expanded or collapsed.
Occurs after the grid has been bound to a new items source.
Occurs after the grid rows have been bound to items in the data source.
Occurs before the grid rows are bound to items in the data source.
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).
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 copy operation.
Occurs when the user is pasting content from the clipboard into a cell (see the autoClipboard property).
The event handler may cancel the copy operation.
Occurs when an editor cell is created and before it becomes active.
Occurs when the user finishes resizing a column.
Occurs when the user finishes resizing rows.
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.
Occurs when a row edit has been committed or canceled.
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 = {};
});
Occurs after a row enters edit mode.
Occurs before a row enters edit mode.
Occurs after the control has scrolled.
Occurs after selection changes.
Occurs before selection changes.
Occurs after the user applies a sort by clicking on a column header.
Occurs before the user applies a sort by clicking on a column header.
Occurs when the FlexSheet meets the unknown formula.
Occurs after the grid has updated its internal layout.
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:
Occurs before the grid updates its internal layout.
Occurs when the grid starts creating/updating the elements that make up the current view.
The FlexSheet control extends the FlexSheet control and provides an Excel-like functionality.