Gets the HTMLInputElement that represents the cell editor currently active.

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

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

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

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

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

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

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

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

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

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

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

The clipboard shortcuts are as follows:

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.

Gets or sets a value that determines whether the grid should generate columns automatically based on the itemsSource.

The column generation depends on the itemsSource property containing at least one item. This data item is inspected and a column is created and bound to each property that contains a primitive value (number, string, Boolean, or Date).

Properties set to null do not generate columns, because the grid would have no way of guessing the appropriate type. In this type of scenario, you should set the autoGenerateColumns property to false and create the columns explicitly. For example:

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

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

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

By default, the grid will automatically set the column width based on the content of the header and data cells in the column. This property allows you to change that to include only the headers or only the data.

Gets the GridPanel that contains the bottom left cells.

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

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

Gets the GridPanel that contains the data cells.

Gets or sets a value that determines whether the content of header cells should be vertically centered.

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

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

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

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

Gets or sets a value that determines whether the grid should allow users to collapse and expand subtotal groups of rows and columns.

Gets the ICollectionView that contains the grid data.

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');
}

Gets the GridPanel that contains the column header cells.

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

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

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

Gets the grid's column collection.

Gets the bounding rectangle of the control in page coordinates.

Gets or sets a value that determines whether the grid should provide a custom context menu.

The custom context menu includes commands for changing field settings, removing fields, or showing detail records for the grid cells.

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

By default, deferResizing is set to false, causing rows and columns to be resized as the user drags the mouse. Setting this property to true causes the grid to show a resizing marker and to resize the row or column only when the user releases the mouse button.

Gets a CellRange that identifies the cell currently being edited.

Gets a reference to the PivotEngine that owns this PivotGrid.

Gets or sets the number of frozen columns.

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

Gets or sets the number of frozen rows.

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

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

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

• {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)'.

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

Gets the DOM element that is hosting the control.

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

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

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

Disabled controls cannot get mouse or keyboard events.

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

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

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

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

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

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

For example:

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

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

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

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

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

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

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

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

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

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

If you set the newRowAtTop property to true, and you want the new row template to remain visible at all times, set the frozenRows property to one. This will freeze the new row template at the top so it won't scroll off the view.

The new row template will be displayed only if the allowAddNew property is set to true and if the itemsSource object supports adding new items.

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

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

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

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

Gets the GridPanel that contains the row header cells.

Gets the grid's row collection.

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

Gets the size of the grid content in pixels.

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

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

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

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

Gets or sets the current selection.

Gets or sets the current selection mode.

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

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

Gets or sets a value that determines whether the grid should show a popup containing the detail records when the user double-clicks a cell.

Gets or sets a value that determines whether the grid should add the 'wj-state-invalid' class to cells that contain validation errors, and tooltips with error descriptions.

The grid detects validation errors using the getError property on the grid's itemsSource.

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

Data groups are created by modifying the groupDescriptions property of the ICollectionView object used as a the grid's itemsSource.

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

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

Unlike regular column headers, row fields are always sorted, either in ascending or descending order. If you set this property to true, sort icons will always be displayed over any row field headers.

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

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

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

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

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

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

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

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

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

Gets the range of cells currently in view.