ASP.NET Core MVC Controls | ComponentOne
In This Topic
    FlexSheet Class
    In This Topic
    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?: any): FlexSheet
    

    Initializes a new instance of the FlexSheet class.

    Parameters
    • element: any

      The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').

    • options: any
    Optional

    JavaScript object containing initialization data for the control.

    Returns
    FlexSheet

    Properties

    activeCell

    Gets the **HTMLElement** that represents the currently active cell element.

    If no cell is currently selected, or if the selected cell is not currently within view, this property returns null.

    Inherited From
    FlexGrid
    Type
    HTMLElement

    activeEditor

    Gets the **HTMLInputElement** that represents the currently active cell editor.

    If no cell is currently being edited, this property returns null.

    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

    allowAutoFill

    Gets or sets the value to indicates whether enable autofill, the feature to fill cells with data that follows a pattern by dragging the bottom right corner of the cell.

    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** for the FlexGrid control and **AllowDragging.None** for the **PivotGrid** control.

    This property does not apply to the **MultiRow** control.

    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** for the FlexGrid control and **AllowMerging.All** for the **PivotGrid** control.

    This property does not apply to the **MultiRow** control.

    Inherited From
    FlexGrid
    Type
    AllowMerging

    allowPinning

    Gets or sets a value that determines whether the grid should add pin buttons to the column headers and how the pin buttons behave.

    The pin buttons allow users to pin (freeze) columns so they remain in view as the user scrolls the grid horizontally.

    The default value for this property is **AllowPinning.None**.

    Inherited From
    FlexGrid
    Type
    AllowPinning

    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 **AllowSorting.SingleColumn**.

    Inherited From
    FlexGrid
    Type
    AllowSorting

    alternatingRowStep

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

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

    The default value for this property is **1** for the FlexGrid control and **0** for the **PivotGrid** control.

    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

    ariaLabel

    Gets or sets the aria label property of cells host.

    Inherited From
    FlexGrid
    Type
    string

    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:

    import { FlexGrid } from '@mescius/wijmo.grid';
    let 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** for the FlexGrid control and **false** for the **PivotGrid** control.

    Inherited From
    FlexGrid
    Type
    boolean

    autoRowHeights

    Gets or sets a value that determines whether the grid should automatically resize the rows when the data or grid layout change.

    This property is especially useful when the grid has columns configured to word-wrap their content (see wordWrap), and when the grid has a relatively small number of rows (auto-sizing is an expensive operation).

    The default value for this property is **false**.

    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.

    See also the caseSensitiveSearch property.

    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

    bigCheckboxes

    Gets or sets a value that determines whether the checkboxes used to edit boolean columns should extend to cover the whole cell width.

    Big checkboxes are easier to toggle with the mouse, since the user may click anywhere in the cell to toggle them.

    The default value for this property is **false**.

    Inherited From
    FlexGrid
    Type
    boolean

    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

    calculationPrecision

    Gets or sets the number of digits after the decimal point to round to when calculating formulas.

    Negative value means that no rounding is performed.

    The default value for this property is **14**.

    Type
    number

    caseSensitiveSearch

    Gets or sets a value that determines whether searches performed while the user types should case-sensitive.

    The searches include searching for regular text (see the autoSearch property) as well as searching for items while editing data-mapped cells (see the Column.dataMap property).

    The default value for this property is **false** (searches are not case-sensitive by default).

    Inherited From
    FlexGrid
    Type
    boolean

    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}

    The default value for this property is **null**.

    This property does not apply to the **MultiRow** control.

    Inherited From
    FlexGrid
    Type
    string

    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 let 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

    columnGroups

    Gets or sets an array used to define hierarchical column groups.

    The items in the array should be JSON objects with properties of Column objects, plus three optional members:

    * 'columns' array containing an array of child columns, * 'collapseTo' string containing the binding(s) of the child column(s) that should remain visible when the group is collapsed. * 'isCollapsed' boolean that determines if the group should be initially collapsed.

    For example, the code below generates a grid with two column groups, both initially collapsed:

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

    Inherited From
    FlexGrid
    Type
    any[]

    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 properties that cannot be converted to JSON, such as dataMap and editor.

    If you want to save and restore column layouts and don't require the layouts to be serializable, you can clone the content of the columns property and restore it later using array methods. This is not as convenient as using the columnLayout property, but it does allow you to save and restore data maps and editors.

    Inherited From
    FlexGrid
    Type
    string

    columns

    Gets the grid's column collection.

    Inherited From
    FlexGrid
    Type
    ColumnCollection

    commitEmptyEdits

    Gets or sets a value that indicates how the grid commit empty edits to cell values.

    The default value for this property is **true**.

    If you choose to ignore commit empty edits, the Grid will not commit empty edits to cell values if the original value is null.

    Inherited From
    FlexGrid
    Type
    boolean

    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

    copyHeaders

    Gets or sets a value that determines whether the grid should include the content of header cells when copying data to the clipboard.

    This property is especially useful in read-only grids, because the header information typically should not be included when pasting data into the grid.

    The default value for this property is **HeadersVisibility.None** for the FlexGrid control and **HeadersVisibility.All** for the **PivotGrid** control.

    Inherited From
    FlexGrid
    Type
    HeadersVisibility

     

    Static defaultTypeWidth

    Gets a reference to a static object that defines the default width for auto-generated grid columns based on their types.

    The object keys are DataType values. The object values are either numbers (widths in pixels) or star-size strings (multiples of the default width defined by the columns defaultSize property).

    For example:

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

    // make boolean columns on all grids 100px wide by default FlexGrid.defaultTypeWidth[DataType.Boolean] = 100;
    // make numeric columns on all grids 75% as wide as the columns defaultSize FlexGrid.defaultTypeWidth[DataType.Number] = '0.75*';

    Inherited From
    FlexGrid
    Type
    object

    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** for the FlexGrid control and **true** for the **PivotGrid** control.

    Inherited From
    FlexGrid
    Type
    boolean

    definedNames

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

    Type
    DefinedNameCollection

    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 causes 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

    expandSelectionOnCopyPaste

    Gets or sets a value that determines whether the grid should automatically expand the selection to include cells in merged ranges when copying or pasting content to/from the clipboard.

    The default value for this property is **true**.

    Inherited From
    FlexGrid
    Type
    boolean

    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 **null**, which causes the grid to use a culture-specific version of the string

    '{name}: <b>{value}</b>({count:n0} items)'
    

    This default format string creates group headers similar to

    'Country: <b>UK</b> (12 items)'
    'Country: <b>Japan</b> (8 items)'
    

    Inherited From
    FlexGrid
    Type
    string

    groupSummaryPosition

    Gets or sets a value that determines the position of group summary row in the group. This property does not work if childItemsPath property is set

    The default value for this property is **GroupSummaryPosition.Top**.

    Inherited From
    FlexGrid
    Type
    GroupSummaryPosition

    headersFocusability

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

    The default value for this property is **HeadersFocusability.None**.

    Inherited From
    FlexGrid
    Type
    HeadersFocusability

    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
    FlexGrid
    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** for the FlexGrid control and **true** for the **PivotGrid** control.

    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 = (panel, r, c, cell) => {
      if (panel.cellType == CellType.Cell) {

    // draw sparklines in the cell let col = panel.columns[c]; if (col.name == 'sparklines') { cell.innerHTML = getSparkline(panel, r, c); } } }

    Note that the FlexGrid recycles cells, so if your itemFormatter modifies the cell's style attributes, you must make sure that it resets these attributes for cells that should not have them. For example:

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

    // reset attributes we are about to customize let s = cell.style; s.color = ''; s.backgroundColor = ''; // customize color and backgroundColor attributes for this cell ... }

    If you have a scenario where multiple clients may want to customize the grid rendering (for example when creating directives or re-usable libraries), consider using the formatItem event instead. The event allows multiple clients to attach their own handlers.

    Inherited From
    FlexGrid
    Type
    IItemFormatter

    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 parameters containing the cell's row and column indices and a parsing parameter that describes whether the data has already been parsed and applied to the data item (parsing == false), or whether the user was trying to edit the value and entered a value that could not be parsed into the data type expected (parsing == true).

    The method returns a string containing an error message, or null if no errors were detected.

    For example,

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

    // parsing failed, show message if (parsing) { if (prop == 'date') { return 'Please enter a valid date in the format "MM/dd/yyyy"'; } else if (prop == 'id') { return 'Please enter a positive number'; } }
    // check that stored (parsed) data is valid if (prop == 'date' && item.date < minDate) { return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd'); } else if (prop == 'id' && item.id < 0) { return 'Please enter a positive number'; } });

    See also the getError method.

    Inherited From
    FlexGrid
    Type
    IItemValidator

    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.

    Note that the default setting for the inherited FlexSheet control is CycleOut (see below).

    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

    lazyRender

    Gets or sets a value that determines whether the grid should skip rendering cells that were updated in the last render cycle.

    The default value for this property is **true**.

    Inherited From
    FlexGrid
    Type
    boolean

    maxContent

    Gets or sets a value that determines whether the grid should adjust its size to fit the maximum content width and available height.

    The default value for this property is **false**.

    Inherited From
    FlexGrid
    Type
    boolean

    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

    pasteEmptyCells

    Gets or sets a value that determines whether when pasting, paste all cells or only not empty cells The default value for this property is **true**.

    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

    preserveWhiteSpace

    Gets or sets a value that determines whether the grid should keep whitespace in cells as they appear in the data (white-space: pre) or whether it should collapse the whitespace into a single space character (white-space: normal).

    This property allows you to specify how the grid should handle white space without changing any CSS rules. You choose to use CSS rules instead, however, since they provide better control over scope.

    For example, you could create CSS rules that apply to all grids in the application, to specific grids, or to specific columns.

    Be aware that setting this property to **true** may have undesired effects in applications that use interop cell templates (Vue templates especially).

    The default value for this property is **false**.

    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.

    The default value for this property is **null**, which enables quick auto-sizing for grids that don't have a custom itemFormatter or handlers attached to the formatItem event.

    Quick auto-sizing uses different strategies when auto-sizing rows or columns.

    When auto-sizing columns, it uses a temporary canvas element to locate the row with the widest entry for a column. When the row is located, its contents are measured precisely. The limitation with this approach is that the canvas only renders plain text, so if cells contain HTML the auto-sizing may miss the widest column.

    When auto-sizing rows, it uses a cache to store the row heights based on the cell content, and skips measuring numeric cells. The limitation with this approach is that it only improves performance if many cells have the same content, or if many columns are numeric.

    If you find that auto-sizing is slowing down your application, it is probably worth setting quickAutoSize to true and checking the results to see if it works correctly and improves performance for your app.

    Inherited From
    FlexGrid
    Type
    boolean

    refreshOnEdit

    Gets or sets a value that determines whether the grid should refresh all cells after a cell is edited.

    The default value for this property is **true**.

    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[]

    selectedRanges

    Gets or sets an array with CellRange objects that represent the current selection.

    The first element in the array is the current selection. If the grid's selectionMode property is set to MultiRange, the array may contain additional ranges that represent the extended selection.

    Note that ranges in the selectedRanges array may contain overlapping areas, which may be important when performing actions like aggregating over the extended selection.

    Inherited From
    FlexGrid
    Type
    CellRange[]

    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
    Row[]

    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 should add drop-down buttons to data-mapped cells.

    The drop-down buttons are shown on columns that have a Column.dataMap and are editable.

    Clicking on the drop-down buttons causes the grid to show a drop-down list from which users can select the cell value.

    This setting may be overridden on specific columns using the column's dataMapEditor property.

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

    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 ICollectionView object used as an 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**.

    If you choose to show the marquee, you may want to improve accessibility by using some simple CSS to make the marquee fully opaque only when the grid has the focus:

    ```css .wj-flexgrid:not(.wj-state-focused) .wj-marquee { opacity: 0.2; } ```

    Inherited From
    FlexGrid
    Type
    boolean

    showPlaceholders

    Gets or sets a value that determines whether the grid should use the column headers as placeholders when editing cells.

    The default value for this property is **false**.

    This property is especially useful in grids that have multiple rows per data item (like the MultiRow grid) and in grids that allow adding new items (see the allowAddNew property).

    This property only works with the grid's built-in editor. If you are using custom editors (see the Column.editor property), then you are responsible for setting the placeholder property on those.

    The Internet Explorer browser does not show input placeholders on focused input elements, so this property is not useful in IE.

    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

    skipMerged

    Gets or sets a value that determines whether when copying, skip cells that have been merged The default value for this property is **false**.

    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

    tabOrder

    Gets or sets a value of the **tabindex** attribute associated with the control.

    **tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.

    Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.

    Inherited From
    Control
    Type
    number

    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.

    The default value for this property is **14** pixels for the FlexGrid control, and **32** pixels for the **PivotGrid**.

    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 causes the grid to virtualize all rows and columns.

    Inherited From
    FlexGrid
    Type
    number

    Methods

    addBoundSheet

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

    Add a bound Sheet to the FlexSheet.

    Parameters
    • sheetName: string

      The name of the Sheet.

    • source: any

      The items source for the Sheet.

    • pos: number Optional

      The position in the sheets collection.

    • grid: FlexGrid Optional

      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
    • target: EventTarget

      Target element for the event.

    • type: string

      String that specifies the event.

    • fn: any

      Function to execute when the event occurs.

    • capture: boolean Optional

      Whether the listener should be handled by the control before it is handled by the target element.

    • passive: boolean Optional

      Indicates that the handler will never call preventDefault().

    Inherited From
    Control
    Returns
    void

    addFunction

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

    Add custom function in FlexSheet.

    Parameters
    • name: string

      the name of the custom function.

    • func: Function

      the custom function.
      The function signature looks as follows:

      function (...params: any[][][]): any;
      

      The function takes a variable number of parameters, each parameter corresponds to an expression passed as a function argument. Independently of whether the expression passed as a function argument resolves to a single value or to a cell range, each parameter value is always a two dimensional array of resolved values. The number of rows (first index) and columns (second index) in the array corresponds to the size of the specified cell range. In case where argument is an expression that resolves to a single value, it will be a one-to-one array where its value can be retrieved using the param[0][0] indexer.
      The sample below adds a custom Sum Product function ('customSumProduct') to the FlexSheet:

      flexSheet.addFunction('customSumProduct', (...params: any[][][]) => {
         let result = 0,
             range1 = params[0],
             range2 = params[1];
      
         if (range1.length > 0 && range1.length === range2.length && range1[0].length === range2[0].length) {
             for (let i = 0; i < range1.length; i++) {
                 for (let j = 0; j < range1[0].length; j++) {
                     result += range1[i][j] * range2[i][j];
                 }
             }
         }
         return result;
      }, 'Custom SumProduct Function', 2, 2);
      

      After adding this function, it can be used it in sheet cell expressions, like here:

      =customSumProduct(A1:B5, B1:C5)
      
    • description: string Optional

      the description of the custom function, it will be shown in the function autocompletion of the FlexSheet.

    • minParamsCount: number Optional

      the minimum count of the parameter that the function need.

    • maxParamsCount: number Optional

      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.

    Returns
    void

    addUnboundSheet

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

    Add an unbound Sheet to the FlexSheet.

    Parameters
    • sheetName: string Optional

      The name of the Sheet.

    • rows: number Optional

      The row count of the Sheet.

    • cols: number Optional

      The column count of the Sheet.

    • pos: number Optional

      The position in the sheets collection.

    • grid: FlexGrid Optional

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

    Returns
    Sheet

    adjustFrozenRowColSize

    adjustFrozenRowColSize(index: number, type: FrozenRowCol, delta?: number): void
    

    Adjusts the size of a column/row ensuring the total size of frozen elements does not exceed the grid size.

    Parameters
    Inherited From
    FlexGrid
    Returns
    void

    applyCellsStyle

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

    Apply the style to a range of cells.

    Parameters
    • cellStyle: ICellStyle

      The ICellStyle object to apply.

    • cells: CellRange[] Optional

      An array of CellRange objects to apply the style to. If not specified then style is applied to the currently selected cells.

    • isPreview: boolean Optional

      Indicates whether the applied style is just for preview.

    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. Therefore, this method is not available. 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', templateString, {
      _tbx: 'input',
      _btnUp: 'btn-inc',
      _btnDn: 'btn-dec'
    }, 'input');
    
    
    ```

    Parameters
    • classNames: string

      Names of classes to add to the control's host element.

    • template: string

      An HTML string that defines the control template.

    • parts: Object

      A dictionary of part variables and their names.

    • namePart: string Optional

      Name of the part to be named after the host element. This determines how the control submits data when used in forms.

    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
    • c: number

      Index of the column to resize.

    • header: boolean Optional

      Whether the column index refers to a regular or a header row.

    • extra: number Optional

      Extra spacing, in pixels.

    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
    • firstColumn: number Optional

      Index of the first column to resize (defaults to the first column).

    • lastColumn: number Optional

      Index of the last column to resize (defaults to the last column).

    • header: boolean Optional

      Whether the column indices refer to regular or header columns.

    • extra: number Optional

      Extra spacing, in pixels.

    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
    • r: number

      Index of the row to resize.

    • header: boolean Optional

      True to indicate the row index refers to a header row, false to indicate it refers to a regular data row, or null to indicate it refers to a footer row.

    • extra: number Optional

      Extra spacing, in pixels.

    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
    • firstRow: number Optional

      Index of the first row to resize.

    • lastRow: number Optional

      Index of the last row to resize.

    • header: boolean Optional

      Whether the row indices refer to regular or header rows.

    • extra: number Optional

      Extra spacing, in pixels.

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

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

    Parameters
    • r: number

      Index of the row that contains the cell.

    • c: number

      Index of the column that contains the cell.

    Inherited From
    FlexGrid
    Returns
    boolean

    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
    • level: number

      Maximum group level to show.

    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
    • c: number

      The number value need to be converted.

    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(ranges: CellRange[]): void
    

    Deletes columns from the current Sheet of the FlexSheet control.

    Parameters
    • ranges: CellRange[]

      An array of CellRange instances that determines the deleting columns.

    Returns
    void

    deleteColumns

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

    Deletes columns from the current Sheet of the FlexSheet control.

    Parameters
    • index: number Optional

      The starting index of the deleting columns. If not specified then columns will be deleted starting from the first column of the current selection.

    • count: number Optional

      The numbers of columns to delete. If not specified then one column will be deleted.

    Returns
    void

    deleteRows

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

    Deletes rows from the current Sheet of the FlexSheet control.

    Parameters
    • index: number Optional

      The starting index of the deleting rows. If not specified then rows will be deleted starting from the first row of the current selection.

    • count: number Optional

      The numbers of rows to delete. If not specified then one row will be deleted.

    Returns
    void

    deleteRows

    deleteRows(ranges: CellRange[]): 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
    • formula: string

      The formula to evaluate. The formula may start with an optional equals sign ('=').

    • format: string Optional

      If specified, defines the .Net format that will be applied to the evaluated value.

    • sheet: Sheet Optional

      The Sheet whose data will be used for evaluation. If not specified then the current sheet is used.

    • getPrimitiveResult: boolean Optional

      Indicates whether need convert the non-primitive result to primitive type.

    Returns
    any

    finishEditing

    finishEditing(cancel?: boolean): boolean
    

    Commits any pending edits and exits edit mode.

    Parameters
    • cancel: boolean Optional

      Whether pending edits should be canceled or committed.

    Inherited From
    FlexGrid
    Returns
    boolean

    focus

    focus(force?: boolean): void
    

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

    Parameters
    • force: boolean Optional

      Whether to perform the focus operation even if the grid already contains the focus.

    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
    • styleName: string

      The name of the built-in table style.

    Returns
    TableStyle

    getCellBoundingRect

    getCellBoundingRect(r: number, c: number | string, 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
    • r: number

      Index of the row that contains the cell.

    • c: number | string

      Index, name, or binding of the column that contains the cell.

    • raw: boolean Optional

      Whether to return the rectangle in raw panel coordinates as opposed to viewport coordinates.

    Inherited From
    FlexGrid
    Returns
    Rect

    getCellData

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

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

    Parameters
    • r: number

      Index of the row that contains the cell.

    • c: number | string

      Index, name, or binding of the column that contains the cell.

    • formatted: boolean

      Whether to format the value for display.

    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
    • rowIndex: number

      The row index of the cell.

    • colIndex: number

      The column index of the cell.

    • formatted: boolean Optional

      Indicates whether to return an original or a formatted value of the cell.

    • sheet: Sheet Optional

      The Sheet whose value to evaluate. If not specified then the data from current sheet is used.

    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 | number, header?: boolean): 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
    • name: string | number

      The column name, binding, or index.

    • header: boolean Optional

      Whether to include column groups in search.

    Inherited From
    FlexGrid
    Returns
    Column

    getColumnGroups

    getColumnGroups(): ColumnGroupCollection
    

    Get the collection of column groups.

    Inherited From
    FlexGrid
    Returns
    ColumnGroupCollection

    Static getControl

    getControl(element: any): Control
    

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

    Parameters
    • element: any

      The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').

    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
    • panel: GridPanel

      GridPanel that contains the range.

    • r: number

      Index of the row that contains the cell.

    • c: number

      Index of the column that contains the cell.

    • clip: boolean Optional

      Whether to clip the merged range to the grid's current view range.

    Returns
    CellRange

    getSelectedState

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

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

    Parameters
    • r: number

      Row index of the cell to inspect.

    • c: number

      Column index of the cell to inspect.

    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: number | wijmo.Point | MouseEvent | HTMLElement, y?: number | boolean): 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', (e) => {
      let ht = flex.hitTest(e.pageX, e.pageY);
      console.log('you clicked a cell of type "' +
        wijmo.grid.CellType[ht.cellType] + '".');
    });
    
    

    Parameters
    • pt: number | wijmo.Point | MouseEvent | HTMLElement

      Point to investigate, in page coordinates, or a MouseEvent object, or x coordinate of the point.

    • y: number | boolean Optional

      Y coordinate of the point in page coordinates (if the first parameter is a number).

    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
    • options: any

      Object that contains the initialization data.

    Inherited From
    Control
    Returns
    void

    insertColumns

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

    Inserts columns in the current Sheet of the FlexSheet control.

    Parameters
    • index: number Optional

      The position where new columns should be added. If not specified then columns will be added before the left column of the current selection.

    • count: number Optional

      The numbers of columns to add. If not specified then one column will be added.

    Returns
    void

    insertRows

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

    Inserts rows in the current Sheet of the FlexSheet control.

    Parameters
    • index: number Optional

      The position where new rows should be added. If not specified then rows will be added before the first row of the current selection.

    • count: number Optional

      The numbers of rows to add. If not specified then one row will be added.

    Returns
    void

    invalidate

    invalidate(fullUpdate?: boolean): void
    

    Invalidates the control causing an asynchronous refresh.

    Parameters
    • fullUpdate: boolean Optional

      Whether to update the control layout as well as the content.

    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
    • e: HTMLElement Optional

      Container element. If set to null, all Wijmo controls on the page will be invalidated.

    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: string | ArrayBuffer | Blob | wijmo.xlsx.Workbook): 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
    • workbook: string | ArrayBuffer | Blob | wijmo.xlsx.Workbook

      A Workbook, Blob, base-64 string, or ArrayBuffer containing the xlsx file content.

    Returns
    void

    loadAsync

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

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

    Parameters
    • workbook: string | ArrayBuffer | Blob | wijmo.xlsx.Workbook

      A Workbook, Blob, base-64 string, or ArrayBuffer containing the xlsx file content.

    • onLoaded: (workbook: wijmo.xlsx.Workbook) Optional

      This callback provides access to the loaded workbook instance. Since this method is asynchronous, users cannot get the loaded workbook instance immediately. This callback has a single parameter, the loaded workbook instance.

    • onError: (reason?: any) Optional

      This callback catches errors when loading workbooks. It has a single parameter, the 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);
      });
      
    Returns
    void

    mergeRange

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

    Merges the selected CellRange into one cell.

    Parameters
    • cells: CellRange Optional

      The CellRange to merge.

    • isCopyMergeCell: boolean Optional

      This parameter indicates that merge operation is done by copy\paste merge cell or not.

    Returns
    void

    onAutoFilled

    onAutoFilled(e: AutoFillingEventArgs): void
    

    Raises the autoFilled event.

    Parameters
    Returns
    void

    onAutoFilling

    onAutoFilling(e: AutoFillingEventArgs): void
    

    Raises the autoFilling event.

    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

    onColumnGroupCollapsedChanged

    onColumnGroupCollapsedChanged(e: CellRangeEventArgs): void
    

    Raises the columnGroupCollapsedChanged event.

    Parameters
    Inherited From
    FlexGrid
    Returns
    void

    onColumnGroupCollapsedChanging

    onColumnGroupCollapsedChanging(e: CellRangeEventArgs): boolean
    

    Raises the columnGroupCollapsedChanging event.

    Parameters
    Inherited From
    FlexGrid
    Returns
    boolean

    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

    onInvalidInput

    onInvalidInput(e: CancelEventArgs): void
    

    Raises the invalidInput event.

    If the event handler cancels the event, the control will keep the invalid input and the focus.

    Parameters
    Inherited From
    Control
    Returns
    void

    onItemsSourceChanged

    onItemsSourceChanged(e?: EventArgs): void
    

    Raises the itemsSourceChanged event.

    Parameters
    Inherited From
    FlexGrid
    Returns
    void

    onItemsSourceChanging

    onItemsSourceChanging(e: CancelEventArgs): boolean
    

    Raises the itemsSourceChanging 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

    onPinnedColumn

    onPinnedColumn(e: CellRangeEventArgs): void
    

    Raises the pinnedColumn event.

    Parameters
    Inherited From
    FlexGrid
    Returns
    void

    onPinningColumn

    onPinningColumn(e: CellRangeEventArgs): boolean
    

    Raises the pinningColumn 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

    onStarSizedColumns

    onStarSizedColumns(e?: EventArgs): void
    

    Raises the starSizedColumns event.

    Parameters
    Inherited From
    FlexGrid
    Returns
    void

    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
    • fullUpdate: boolean Optional

      Whether to update the control layout as well as the content.

    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
    • e: HTMLElement Optional

      Container element. If set to null, all Wijmo controls on the page will be invalidated.

    Inherited From
    Control
    Returns
    void

    refreshCells

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

    Refreshes the grid display.

    Parameters
    • fullUpdate: boolean

      Whether to update the grid layout and content, or just the content.

    • recycle: boolean Optional

      Whether to recycle existing elements.

    • state: boolean Optional

      Whether to keep existing elements and update their state.

    Inherited From
    FlexGrid
    Returns
    void

    refreshRange

    refreshRange(rng: CellRange): void
    

    Refreshes the cells in a range, updating their content and styles.

    Unlike the refreshCells method, which updates all the cells, refreshRange allows you to specify which cells should be refreshed, which in some cases can improve performance.

    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
    • target: EventTarget Optional

      Target element for the event. If null, removes listeners attached to all targets.

    • type: string Optional

      String that specifies the event. If null, removes listeners attached to all events.

    • fn: any Optional

      Handler to remove. If null, removes all handlers.

    • capture: boolean Optional

      Whether the listener is capturing. If null, removes capturing and non-capturing listeners.

    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
    • fileName: string Optional

      Name of the file that is generated.

    • onSaved: (base64?: string) Optional

      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.

    • onError: (reason?: any) Optional

      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);
      });
      
    • options: IFlexSheetXlsxOptions Optional

      IFlexSheetXlsxOptions object specifying the save options.

    Returns
    void

    scrollIntoView

    scrollIntoView(r: number, c: number | string, 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
    • r: number

      Index of the row to scroll into view.

    • c: number | string

      Index, name, or binding of the column to scroll into view.

    • refresh: boolean Optional

      Optional parameter that determines whether the grid should refresh to show the new scroll position immediately.

    Inherited From
    FlexGrid
    Returns
    boolean

    select

    select(rng: any, show?: any, panel?: GridPanel): boolean
    

    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
    • rng: any

      The cell range to select.

    • show: any Optional

      Indicates whether to scroll the new selection into view.

    • panel: GridPanel Optional

      The GridPanel to the selected range belongs GridPanel

    Returns
    boolean

    selectAll

    selectAll(): void
    

    Selects all the cells on the grid.

    Inherited From
    FlexGrid
    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, isMapKeyValue?: boolean): boolean
    

    Overrides the setCellData function of the base class.

    Parameters
    • r: number

      Index of the row that contains the cell.

    • c: any

      Index, name, or binding of the column that contains the cell.

    • value: any

      Value to store in the cell.

    • coerce: boolean Optional

      Whether to change the value automatically to match the column's data type.

    • invalidate: boolean Optional

      Whether to invalidate the FlexSheet to show the change.

    • isMapKeyValue: boolean Optional

      value passed is already key value of dataMap, don't need re-find.

    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
    • text: string

      Tab and newline delimited text to parse into the grid.

    • rng: CellRange Optional

      CellRange to copy. If omitted, the current selection is used.

    Returns
    void

    showColumnFilter

    showColumnFilter(): void
    

    Show the filter editor.

    Returns
    void

    showFunctionList

    showFunctionList(target: HTMLElement): void
    

    Open the function list.

    Parameters
    • target: HTMLElement

      The DOM element that toggle the function list.

    Returns
    void

    startEditing

    startEditing(fullEdit?: boolean, r?: number, c?: number | string, focus?: boolean, evt?: any): 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
    • fullEdit: boolean Optional

      Whether to stay in edit mode when the user presses the cursor keys. Defaults to true.

    • r: number Optional

      Index of the row to be edited. Defaults to the currently selected row.

    • c: number | string Optional

      Index, name, or binding of the column to be edited. Defaults to the currently selected column.

    • focus: boolean Optional

      Whether to give the editor the focus when editing starts. Defaults to true.

    • evt: any Optional

      Event that triggered this action (usually a keypress or keydown).

    Inherited From
    FlexGrid
    Returns
    boolean

    toggleDropDownList

    toggleDropDownList(): boolean
    

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

    The drop-down list is created automatically based on the column's Column.dataMap property.

    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.addHandler(() => {
      theGrid.toggleDropDownList();
    });
    
    

    This code causes the grid to show the drop-down list when the grid enters edit mode after the user presses the space bar:

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

    Inherited From
    FlexGrid
    Returns
    boolean

    undo

    undo(): void
    

    Undo the last user action.

    Returns
    void

    Events

    autoFilled

    Occurs after the FlexSheet has performed the auto-fill operation.

    Arguments
    AutoFillingEventArgs

    autoFilling

    Occurs before the FlexSheet performs the auto-fill operation.

    Arguments
    AutoFillingEventArgs

    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.

    The 'data' property of the handler parameters contains a reference to the DOM event that caused the grid to enter edit mode.

    The event handler may cancel the edit operation.

    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(flex, e) {



    // get old and new values let oldVal = flex.getCellData(e.row, e.col), newVal = flex.activeEditor.value;


    // cancel edits if newVal doesn't contain 'a' e.cancel = newVal.indexOf('a') < 0; }

    Setting the cancel parameter to true causes the grid to discard the edited value and keep the cell's original value.

    If you also set the stayInEditMode parameter to true, the grid will remain in edit mode so the user can correct invalid entries before committing the edits.

    Inherited From
    FlexGrid
    Arguments
    CellEditEndingEventArgs

    columnChanged

    Occurs after the FlexSheet inserted or deleted columns.

    Arguments
    RowColumnChangedEventArgs

    columnGroupCollapsedChanged

    Occurs after a column group has been expanded or collapsed.

    The 'data' property of the handler parameters contains a reference to the ColumnGroup that is about to change.

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    columnGroupCollapsedChanging

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

    The 'data' property of the handler parameters contains a reference to the ColumnGroup that is about to change.

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    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((s, e) => {
        theColumn = s.columns[e.col].binding;
    });



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

    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((flex, e) => {
      if (flex.rows[e.row] instanceof 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

    invalidInput

    Occurs when invalid input is detected.

    Invalid input may occur when the user types or pastes a value that cannot be converted to the proper type, or a value that is outside the valid range.

    If the event handler cancels the event, the control will retain the invalid content and the focus, so users can correct the error.

    If the event is not canceled, the control will ignore the invalid input and will retain the original content.

    Inherited From
    Control
    Arguments
    CancelEventArgs

    itemsSourceChanged

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

    Inherited From
    FlexGrid
    Arguments
    EventArgs

    itemsSourceChanging

    Occurs before the grid is 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).

    The 'data' property of the handler parameters contains the cell's original value (before the new value was pasted).

    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 'data' property of the handler parameters contains a copy of the text being pasted into the grid.

    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 'data' property of the handler parameters contains the text being pasted into the cell.

    The event handler may cancel the paste operation.

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    pinnedColumn

    Occurs after one or more columns are pinned (or unpinned).

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    pinningColumn

    Occurs before one or more columns are pinned (or unpinned).

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    prepareCellForEdit

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

    The event handler can access the editor element using the grid's activeEditor property.

    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
    let itemData = {};
    s.rowEditStarted.addHandler((s, e) => {
      let item = s.collectionView.currentEditItem;
      itemData = {};
      s.columns.forEach(function (col) {
        if (col.binding.indexOf('.') > -1) { // deep binding
          let binding = new wijmo.Binding(col.binding);
          itemData[col.binding] = binding.getValue(item);
        }
      })
    });



    // restore deep bound values when edits are canceled s.rowEditEnded.addHandler((s, e) => { if (e.cancel) { // edits were canceled by the user let item = s.collectionView.currentEditItem; for (let k in itemData) { let binding = new wijmo.Binding(k); binding.setValue(item, itemData[k]); } } itemData = {}; });

    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.

    The 'data' property of the handler parameters contains a reference to the DOM event that caused the sort.

    The event handler may cancel the sort action.

    Inherited From
    FlexGrid
    Arguments
    CellRangeEventArgs

    starSizedColumns

    When one or more columns have been resized due to star-sizing.

    Inherited From
    FlexGrid
    Arguments
    EventArgs

    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