ASP.NET MVC Controls
FlexGrid Class
File
wijmo.grid.js
Module
wijmo.grid
Base Class
Control
Derived Classes
FlexSheet, PivotGrid, MultiRow

The FlexGrid control provides a powerful and flexible way to display and edit data in a tabular format.

The FlexGrid control is a full-featured grid, providing all the features you are used to including several selection modes, sorting, column reordering, grouping, filtering, editing, custom cells, XAML-style star-sizing columns, row and column virtualization, etc.

Constructor

Properties

Methods

Events

Constructor

constructor

constructor(element: any, options?): FlexGrid

Initializes a new instance of the FlexGrid class.

Parameters
Returns
FlexGrid

Properties

activeEditor

Gets the HTMLInputElement that represents the cell editor currently active.

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.

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.

Type
boolean

allowDragging

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

Type
AllowDragging

allowMerging

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

Type
AllowMerging

allowResizing

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

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

Users may also double-click the edge of the header cells to automatically resize rows and columns to fit their content. The auto-size behavior can be customized using the autoSizeMode property.

Type
AllowResizing

allowSorting

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

Type
boolean

autoClipboard

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

The clipboard shortcuts are as follows:

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

Only visible rows and columns are included in clipboard operations.

Read-only cells are not affected by paste operations.

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:

var grid = new wijmo.grid.FlexGrid('#theGrid', {
  autoGenerateColumns: false, // data items may contain null values
  columns: [                  // so define columns explicitly
    { binding: 'name', header: 'Name', type: 'String' },
    { binding: 'amount', header: 'Amount', type: 'Number' },
    { binding: 'date', header: 'Date', type: 'Date' },
    { binding: 'active', header: 'Active', type: 'Boolean' }
  ],
  itemsSource: customers
});
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.

Type
AutoSizeMode

bottomLeftCells

Gets the GridPanel that contains the bottom left cells.

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

Type
GridPanel

cellFactory

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

Type
CellFactory

cells

Gets the GridPanel that contains the data cells.

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. 'items').

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

Type
any

clientSize

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

Type
Size

collectionView

Gets the ICollectionView that contains the grid data.

Type
ICollectionView

columnFooters

Gets the GridPanel that contains the column footer cells.

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

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

function addFooterRow(flex) {

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

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

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

columnHeaders

Gets the GridPanel that contains the column header cells.

Type
GridPanel

columnLayout

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

The column layout string represents an array with the columns and their properties. It can be used to persist column layouts defined by users so they are preserved across sessions, and can also be used to implement undo/redo functionality in applications that allow users to modify the column layout.

The column layout string does not include dataMap properties, because data maps are not serializable.

Type
string

columns

Gets the grid's column collection.

Type
ColumnCollection

controlRect

Gets the bounding rectangle of the control in page coordinates.

Type
Rect

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.

Type
boolean

editRange

Gets a CellRange that identifies the cell currently being edited.

Type
CellRange

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.

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.

Type
number

groupHeaderFormat

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

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

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

If a column is bound to the grouping property, the column header is used to replace the {name} parameter, and the column's format and data maps are used to calculate the {value} parameter. If no column is available, the group information is used instead.

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

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

Type
string

headersVisibility

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

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.

Type
boolean

isDisabled

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

Disabled controls cannot get mouse or keyboard events.

Inherited From
Control
Type
boolean

isReadOnly

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

Type
boolean

isTouching

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

Inherited From
Control
Type
boolean

isUpdating

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

Inherited From
Control
Type
boolean

itemFormatter

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

The formatter function can add any content to any cell. It provides complete flexibility over the appearance and behavior of grid cells.

If specified, the function should take four parameters: the GridPanel that contains the cell, the row and column indices of the cell, and the HTML element that represents the cell. The function will typically change the innerHTML property of the cell element.

For example:

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

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

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

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

  // reset attributes we are about to customize
  var s = cell.style;
  s.color = '';
  s.backgroundColor = '';

  // customize color and backgroundColor attributes for this cell
  ...
}

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

Type
Function

itemsSource

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

Type
any

mergeManager

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

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.

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.

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.

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

rowHeaders

Gets the GridPanel that contains the row header cells.

Type
GridPanel

rows

Gets the grid's row collection.

Type
RowCollection

scrollPosition

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

Type
Point

scrollSize

Gets the size of the grid content in pixels.

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.

Type
any[]

selectedRows

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

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

Type
any[]

selection

Gets or sets the current selection.

Type
CellRange

selectionMode

Gets or sets the current selection mode.

Type
SelectionMode

showAlternatingRows

Gets or sets a value that determines whether the grid should add the 'wj-alt' class to cells in alternating rows.

Setting this property to false disables alternate row styles without any changes to the CSS.

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 getError property on the grid's itemsSource.

Type
boolean

showGroups

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

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

Type
boolean

showMarquee

Gets or sets a value that indicates whether the grid should display a marquee element around the current selection.

Type
boolean

showSelectedHeaders

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

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.

Type
boolean

sortRowIndex

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

This property is set to null by default, causing the last row in the columnHeaders panel to act as the sort row.

Type
number

stickyHeaders

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

Type
boolean

topLeftCells

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

Type
GridPanel

treeIndent

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

Type
number

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.

Type
boolean

viewRange

Gets the range of cells currently in view.

Type
CellRange

Methods

addEventListener

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

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

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

Failing to remove event listeners may cause memory leaks.

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 is capturing.

Inherited From
Control
Returns
void

applyTemplate

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

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

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

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

this.applyTemplate('wj-control wj-inputnumber', template, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');
Parameters
  • 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.

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.

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 potentially take a long time.

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.

Returns
void

autoSizeRow

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

Resizes a row to fit its content.

Parameters
  • r: number

    Index of the row to resize.

  • header: boolean Optional

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

  • extra: number Optional

    Extra spacing, in pixels.

Returns
void

autoSizeRows

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

Resizes a range of rows to fit their content.

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.

Returns
void

beginUpdate

beginUpdate(): void

Suspends notifications until the next call to endUpdate.

Inherited From
Control
Returns
void

canEditCell

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

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

Parameters
  • r: number

    Index of the row that contains the cell.

  • c: number

    Index of the column that contains the cell.

Returns
void

collapseGroupsToLevel

collapseGroupsToLevel(level: number): void

Collapses all the group rows to a given level.

Parameters
  • level: number

    Maximum group level to show.

Returns
void

containsFocus

containsFocus(): boolean

Checks whether this control contains the focused element.

Returns
boolean

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

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

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.

Returns
boolean

focus

focus(): void

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

Returns
void

getCellBoundingRect

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

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

This method returns the bounds of cells in the cells panel (scrollable data cells). To get the bounds of cells in other panels, use the getCellBoundingRect method in the appropriate GridPanel object.

The returned value is a Rect object which contains the position and dimensions of the cell in viewport coordinates. The viewport coordinates are the same used by the getBoundingClientRect method.

Parameters
  • r: number

    Index of the row that contains the cell.

  • c: number

    Index of the column that contains the cell.

  • raw: boolean Optional

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

Returns
Rect

getCellData

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

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

Parameters
  • r: number

    Index of the row that contains the cell.

  • c: number

    Index of the column that contains the cell.

  • formatted: boolean

    Whether to format the value for display.

Returns
any

getClipString

getClipString(rng?: CellRange): string

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

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

Parameters
Returns
string

getColumn

getColumn(name: string): Column

Gets a column by name or by binding.

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

Parameters
  • name: string

    The name or binding to find.

Returns
Column

Static getControl

getControl(element: any): Control

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

Parameters
  • element: any

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

Inherited From
Control
Returns
Control

getMergedRange

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

Gets a CellRange that specifies the merged extent of a cell in a GridPanel.

Parameters
  • p: GridPanel

    The 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.

Returns
SelectedState

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, it will override the template defined by the DropDown base class.

Inherited From
Control
Returns
string

hitTest

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

Gets a HitTestInfo object with information about a given point.

For example:

// hit test a point when the user clicks on the grid
flex.hostElement.addEventListener('click', function (e) {
  var ht = flex.hitTest(e.pageX, e.pageY);
  console.log('you clicked a cell of type "' +
    wijmo.grid.CellType[ht.cellType] + '".');
});
Parameters
  • pt: any

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

  • y: number Optional

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

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

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
Returns
boolean

onAutoSizedColumn

onAutoSizedColumn(e: CellRangeEventArgs): void

Raises the autoSizedColumn event.

Parameters
Returns
void

onAutoSizedRow

onAutoSizedRow(e: CellRangeEventArgs): void

Raises the autoSizedRow event.

Parameters
Returns
void

onAutoSizingColumn

onAutoSizingColumn(e: CellRangeEventArgs): boolean

Raises the autoSizingColumn event.

Parameters
Returns
boolean

onAutoSizingRow

onAutoSizingRow(e: CellRangeEventArgs): boolean

Raises the autoSizingRow event.

Parameters
Returns
boolean

onBeginningEdit

onBeginningEdit(e: CellRangeEventArgs): boolean

Raises the beginningEdit event.

Parameters
Returns
boolean

onCellEditEnded

onCellEditEnded(e: CellRangeEventArgs): void

Raises the cellEditEnded event.

Parameters
Returns
void

onCellEditEnding

onCellEditEnding(e: CellEditEndingEventArgs): boolean

Raises the cellEditEnding event.

Parameters
Returns
boolean

onCopied

onCopied(e: CellRangeEventArgs): void

Raises the copied event.

Parameters
Returns
void

onCopying

onCopying(e: CellRangeEventArgs): boolean

Raises the copying event.

Parameters
Returns
boolean

onDeletedRow

onDeletedRow(e: CellRangeEventArgs): void

Raises the deletedRow event.

Parameters
Returns
void

onDeletingRow

onDeletingRow(e: CellRangeEventArgs): boolean

Raises the deletingRow event.

Parameters
Returns
boolean

onDraggedColumn

onDraggedColumn(e: CellRangeEventArgs): void

Raises the draggedColumn event.

Parameters
Returns
void

onDraggedRow

onDraggedRow(e: CellRangeEventArgs): void

Raises the draggedRow event.

Parameters
Returns
void

onDraggingColumn

onDraggingColumn(e: CellRangeEventArgs): boolean

Raises the draggingColumn event.

Parameters
Returns
boolean

onDraggingColumnOver

onDraggingColumnOver(e: CellRangeEventArgs): boolean

Raises the draggingColumnOver event.

Parameters
Returns
boolean

onDraggingRow

onDraggingRow(e: CellRangeEventArgs): boolean

Raises the draggingRow event.

Parameters
Returns
boolean

onDraggingRowOver

onDraggingRowOver(e: CellRangeEventArgs): boolean

Raises the draggingRowOver event.

Parameters
Returns
boolean

onFormatItem

onFormatItem(e: FormatItemEventArgs): void

Raises the formatItem event.

Parameters
Returns
void

onGotFocus

onGotFocus(e?: EventArgs): void

Overridden to transfer focus to the active cell (for accessibility).

Parameters
Returns
void

onGroupCollapsedChanged

onGroupCollapsedChanged(e: CellRangeEventArgs): void

Raises the groupCollapsedChanged event.

Parameters
Returns
void

onGroupCollapsedChanging

onGroupCollapsedChanging(e: CellRangeEventArgs): boolean

Raises the groupCollapsedChanging event.

Parameters
Returns
boolean

onItemsSourceChanged

onItemsSourceChanged(e?: EventArgs): void

Raises the itemsSourceChanged event.

Parameters
Returns
void

onLoadedRows

onLoadedRows(e?: EventArgs): void

Raises the loadedRows event.

Parameters
Returns
void

onLoadingRows

onLoadingRows(e: CancelEventArgs): boolean

Raises the loadingRows event.

Parameters
Returns
boolean

onLostFocus

onLostFocus(e?: EventArgs): void

Overridden to reset mouse state when losing focus.

Parameters
Returns
void

onPasted

onPasted(e: CellRangeEventArgs): void

Raises the pasted event.

Parameters
Returns
void

onPastedCell

onPastedCell(e: CellRangeEventArgs): void

Raises the pastedCell event.

Parameters
Returns
void

onPasting

onPasting(e: CellRangeEventArgs): boolean

Raises the pasting event.

Parameters
Returns
boolean

onPastingCell

onPastingCell(e: CellRangeEventArgs): boolean

Raises the pastingCell event.

Parameters
Returns
boolean

onPrepareCellForEdit

onPrepareCellForEdit(e: CellRangeEventArgs): void

Raises the prepareCellForEdit event.

Parameters
Returns
void

onResizedColumn

onResizedColumn(e: CellRangeEventArgs): void

Raises the resizedColumn event.

Parameters
Returns
void

onResizedRow

onResizedRow(e: CellRangeEventArgs): void

Raises the resizedRow event.

Parameters
Returns
void

onResizingColumn

onResizingColumn(e: CellRangeEventArgs): boolean

Raises the resizingColumn event.

Parameters
Returns
boolean

onResizingRow

onResizingRow(e: CellRangeEventArgs): boolean

Raises the resizingRow event.

Parameters
Returns
boolean

onRowAdded

onRowAdded(e: CellRangeEventArgs): void

Raises the rowAdded event.

Parameters
Returns
void

onRowEditEnded

onRowEditEnded(e: CellRangeEventArgs): void

Raises the rowEditEnded event.

Parameters
Returns
void

onRowEditEnding

onRowEditEnding(e: CellRangeEventArgs): void

Raises the rowEditEnding event.

Parameters
Returns
void

onRowEditStarted

onRowEditStarted(e: CellRangeEventArgs): void

Raises the rowEditStarted event.

Parameters
Returns
void

onRowEditStarting

onRowEditStarting(e: CellRangeEventArgs): void

Raises the rowEditStarting event.

Parameters
Returns
void

onScrollPositionChanged

onScrollPositionChanged(e?: EventArgs): void

Raises the scrollPositionChanged event.

Parameters
Returns
void

onSelectionChanged

onSelectionChanged(e: CellRangeEventArgs): void

Raises the selectionChanged event.

Parameters
Returns
void

onSelectionChanging

onSelectionChanging(e: CellRangeEventArgs): boolean

Raises the selectionChanging event.

Parameters
Returns
boolean

onSortedColumn

onSortedColumn(e: CellRangeEventArgs): void

Raises the sortedColumn event.

Parameters
Returns
void

onSortingColumn

onSortingColumn(e: CellRangeEventArgs): boolean

Raises the sortingColumn event.

Parameters
Returns
boolean

onUpdatedLayout

onUpdatedLayout(e?: EventArgs): void

Raises the updatedLayout event.

Parameters
Returns
void

onUpdatedView

onUpdatedView(e?: EventArgs): void

Raises the updatedView event.

Parameters
Returns
void

onUpdatingLayout

onUpdatingLayout(e: CancelEventArgs): boolean

Raises the updatingLayout event.

Parameters
Returns
boolean

onUpdatingView

onUpdatingView(e: CancelEventArgs): boolean

Raises the updatingView event.

Parameters
Returns
boolean

refresh

refresh(fullUpdate?: boolean): void

Refreshes the grid display.

Parameters
  • fullUpdate: boolean Optional

    Whether to update the grid layout and content, or just 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.

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

scrollIntoView

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

Scrolls the grid to bring a specific cell into view.

Parameters
  • r: number

    Index of the row to scroll into view.

  • c: number

    Index of the column to scroll into view.

Returns
boolean

select

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

Selects a cell range and optionally scrolls it into view.

Parameters
  • rng: any

    Range to select.

  • show: any Optional

    Whether to scroll the new selection into view.

Returns
void

setCellData

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

Sets the value of a cell in the scrollable area of the grid.

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 grid to show the change.

Returns
boolean

setClipString

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

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

Hidden rows and columns are skipped.

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

startEditing

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

Starts editing a given cell.

Editing in the FlexGrid is similar to editing in Excel: Pressing F2 or double-clicking a cell puts the grid in full-edit mode. In this mode, the cell editor remains active until the user presses Enter, Tab, or Escape, or until he moves the selection with the mouse. In full-edit mode, pressing the cursor keys does not cause the grid to exit edit mode.

Typing text directly into a cell puts the grid in quick-edit mode. In this mode, the cell editor remains active until the user presses Enter, Tab, or Escape, or any arrow keys.

Full-edit mode is normally used to make changes to existing values. Quick-edit mode is normally used for entering new data quickly.

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

Parameters
  • fullEdit: boolean Optional

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

  • r: number Optional

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

  • c: number Optional

    Index 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.

Returns
boolean

Events

autoSizedColumn

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

Arguments
CellRangeEventArgs

autoSizedRow

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

Arguments
CellRangeEventArgs

autoSizingColumn

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

Arguments
CellRangeEventArgs

autoSizingRow

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

Arguments
CellRangeEventArgs

beginningEdit

Occurs before a cell enters edit mode.

Arguments
CellRangeEventArgs

cellEditEnded

Occurs when a cell edit has been committed or canceled.

Arguments
CellRangeEventArgs

cellEditEnding

Occurs when a cell edit is ending.

You can use this event to perform validation and prevent invalid edits. For example, the code below prevents users from entering values that do not contain the letter 'a'. The code demonstrates how you can obtain the old and new values before the edits are applied.

function cellEditEnding (sender, e) {

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

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

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

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

Arguments
CellEditEndingEventArgs

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).

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.

Arguments
CellRangeEventArgs

deletedRow

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

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.

Arguments
CellRangeEventArgs

draggedColumn

Occurs when the user finishes dragging a column.

Arguments
CellRangeEventArgs

draggedRow

Occurs when the user finishes dragging a row.

Arguments
CellRangeEventArgs

draggingColumn

Occurs when the user starts dragging a column.

Arguments
CellRangeEventArgs

draggingColumnOver

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

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

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

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

draggingRow

Occurs when the user starts dragging a row.

Arguments
CellRangeEventArgs

draggingRowOver

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

Arguments
CellRangeEventArgs

formatItem

Occurs when an element representing a cell has been created.

This event can be used to format cells for display. It is similar in purpose to the itemFormatter property, but has the advantage of allowing multiple independent handlers.

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

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

Arguments
CellRangeEventArgs

groupCollapsedChanging

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

Arguments
CellRangeEventArgs

itemsSourceChanged

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

Arguments
EventArgs

loadedRows

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

Arguments
EventArgs

loadingRows

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

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).

Arguments
CellRangeEventArgs

pastedCell

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

Arguments
CellRangeEventArgs

pasting

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

The event handler may cancel the copy operation.

Arguments
CellRangeEventArgs

pastingCell

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

The event handler may cancel the copy operation.

Arguments
CellRangeEventArgs

prepareCellForEdit

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

Arguments
CellRangeEventArgs

resizedColumn

Occurs when the user finishes resizing a column.

Arguments
CellRangeEventArgs

resizedRow

Occurs when the user finishes resizing rows.

Arguments
CellRangeEventArgs

resizingColumn

Occurs as columns are resized.

Arguments
CellRangeEventArgs

resizingRow

Occurs as rows are resized.

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.

Arguments
CellRangeEventArgs

rowEditEnded

Occurs when a row edit has been committed or canceled.

Arguments
CellRangeEventArgs

rowEditEnding

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

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

// save deep bound values when editing starts
var itemData = {};
s.rowEditStarted.addHandler(function (s, e) {
  var item = s.collectionView.currentEditItem;
  itemData = {};
  s.columns.forEach(function (col) {
    if (col.binding.indexOf('.') > -1) { // deep binding
      var binding = new wijmo.Binding(col.binding);
      itemData[col.binding] = binding.getValue(item);
    }
  })
});

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

rowEditStarted

Occurs after a row enters edit mode.

Arguments
CellRangeEventArgs

rowEditStarting

Occurs before a row enters edit mode.

Arguments
CellRangeEventArgs

scrollPositionChanged

Occurs after the control has scrolled.

Arguments
EventArgs

selectionChanged

Occurs after selection changes.

Arguments
CellRangeEventArgs

selectionChanging

Occurs before selection changes.

Arguments
CellRangeEventArgs

sortedColumn

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

Arguments
CellRangeEventArgs

sortingColumn

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

Arguments
CellRangeEventArgs

updatedLayout

Occurs after the grid has updated its internal layout.

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.

Arguments
EventArgs

updatingLayout

Occurs before the grid updates its internal layout.

Arguments
CancelEventArgs

updatingView

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

Arguments
CancelEventArgs

 

 


Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback