Class Grid

Index

Constructor methods

Properties

Methods

Constructor methods

constructor(container: string, data: Array<T extends Slick.SlickData>, columns: Column[], options: GridOptions): Grid

Create an instance of the grid.

Parameters

  • container: string

    Container node to create the grid in. This can be a DOM Element, a jQuery node, or a jQuery selector.

  • data: Array<T extends Slick.SlickData>

    Databinding source. This can either be a regular JavaScript array or a custom object exposing getItem(index) and getLength() functions.

  • columns: Column[]

    An array of column definition objects. See Column Options for a list of options that can be included on each column definition object.

  • options: GridOptions

    Additional options. See Grid Options for a list of options that can be included.

Returns

Grid

constructor(container: HTMLElement, data: Array<T extends Slick.SlickData>, columns: Column[], options: GridOptions): Grid

Parameters

  • container: HTMLElement
  • data: Array<T extends Slick.SlickData>
  • columns: Column[]
  • options: GridOptions

Returns

Grid

constructor(container: string, data: DataProvider, columns: Column[], options: GridOptions): Grid

Parameters

Returns

Grid

constructor(container: HTMLElement, data: DataProvider, columns: Column[], options: GridOptions): Grid

Parameters

Returns

Grid

Properties

public onActiveCellChanged: Event

public onActiveCellPositionChanged: Event

public onAddNewRow: Event

public onBeforeCellEditorDestroy: Event

public onBeforeDestroy: Event

public onBeforeEditCell: Event

public onBeforeHeaderCellDestroy: Event

public onBeforeHeaderRowCellDestroy: Event

public onCellChange: Event

public onCellCssStylesChanged: Event

public onClick: Event

public onColumnsReordered: Event

public onColumnsResized: Event

public onContextMenu: Event

public onDblClick: Event

public onDrag: Event

public onDragEnd: Event

public onDragInit: Event

public onDragStart: Event

public onHeaderCellRendered: Event

public onHeaderClick: Event

public onHeaderContextMenu: Event

public onHeaderMouseEnter: Event

public onHeaderMouseLeave: Event

public onHeaderRowCellRendered: Event

public onKeyDown: Event

public onMouseEnter: Event

public onMouseLeave: Event

public onScroll: Event

public onSelectedRowsChanged: Event

public onSort: Event

public onValidationError: Event

public onViewportChanged: Event

Methods

public addCellCssStyles(key: string, hash: CellCssStylesHash)

Adds an "overlay" of CSS classes to cell DOM elements. SlickGrid can have many such overlays associated with different keys and they are frequently used by plugins. For example, SlickGrid uses this method internally to decorate selected cells with selectedCellCssClass (see options).

example

{ 0: { "number_column": "cell-bold", "title_column": "cell-title cell-highlighted" }, 4: { "percent_column": "cell-highlighted" } }

Parameters

  • key: string

    A unique key you can use in calls to setCellCssStyles and removeCellCssStyles. If a hash with that key has already been set, an exception will be thrown.

  • hash: CellCssStylesHash

    A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.

public autosizeColumns()

Proportionately resizes all columns to fill available horizontal space. This does not take the cell contents into consideration.

public canCellBeActive(row: number, col: number): boolean

Returns true if you can click on a given cell and make it the active focus.

Parameters

  • row: number

    A row index.

  • col: number

    A column index.

Returns

boolean

public canCellBeSelected(row: number, col: number): boolean

Returns true if selecting the row causes this particular cell to have the selectedCellCssClass applied to it. A cell can be selected if it exists and if it isn't on an empty / "Add New" row and if it is not marked as "unselectable" in the column definition.

Parameters

  • row: number

    A row index.

  • col: number

    A column index.

Returns

boolean

public destroy()

todo: no docs

public editActiveCell(editor: Editor)

Attempts to switch the active cell into edit mode. Will throw an error if the cell is set to be not editable. Uses the specified editor, otherwise defaults to any default editor for that given cell.

Parameters

  • editor: Editor

    A SlickGrid editor (see examples in slick.editors.js).

public flashCell(row: number, cell: number, speed?: number)

Flashes the cell twice by toggling the CSS class 4 times.

Parameters

  • row: number

    A row index.

  • cell: number

    A column index.

  • speed?: number optional

    (optional) - The milliseconds delay between the toggling calls. Defaults to 100 ms.

public focus()

public getActiveCell(): Cell

Returns an object representing the coordinates of the currently active cell:

example
{
  row: activeRow,
  cell: activeCell
}

Returns

Cell

public getActiveCellNode(): HTMLElement

Returns the DOM element containing the currently active cell. If no cell is active, null is returned.

Returns

HTMLElement

public getActiveCellPosition(): CellPosition

Returns an object representing information about the active cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.

Returns

CellPosition

public getCanvasNode(): HTMLCanvasElement

Returns

HTMLCanvasElement

public getCellCssStyles(key: string): CellCssStylesHash

Accepts a key name, returns the group of CSS styles defined under that name. See setCellCssStyles for more info.

Parameters

  • key: string

    A string.

Returns

CellCssStylesHash

public getCellEditor(): Editor

Returns the active cell editor. If there is no actively edited cell, null is returned.

Returns

Editor

public getCellFromEvent(e: Event): Cell

Returns a hash containing row and cell indexes from a standard W3C/jQuery event.

Parameters

  • e: Event

    A standard W3C/jQuery event.

Returns

Cell

public getCellFromPoint(x: number, y: number): Cell

Returns a hash containing row and cell indexes. Coordinates are relative to the top left corner of the grid beginning with the first row (not including the column headers).

Parameters

  • x: number

    An x coordinate.

  • y: number

    A y coordinate.

Returns

Cell

public getCellNode(row: number, cell: number): HTMLElement

Returns a DOM element containing a cell at a given row and cell.

Parameters

  • row: number

    A row index.

  • cell: number

    A column index.

Returns

HTMLElement

public getCellNodeBox(row: number, cell: number): CellPosition

Returns an object representing information about a cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.

Parameters

  • row: number

    A row index.

  • cell: number

    A column index.

Returns

CellPosition

public getColumnIndex(id: string): number

Returns the index of a column with a given id. Since columns can be reordered by the user, this can be used to get the column definition independent of the order:

Parameters

  • id: string

    A column id.

Returns

number

public getColumns(): Column[]

Returns an array of column definitions, containing the option settings for each individual column.

Returns

Column[]

public getData(): any

Returns an array of every data object, unless you're using DataView in which case it returns a DataView object.

Returns

any

public getDataItem(index: number): T in Slick.Grid<T extends SlickData>

Returns the databinding item at a given position.

Parameters

  • index: number

    Item index.

Returns

T in Slick.Grid<T extends SlickData>

public getDataLength(): number

Returns the size of the databinding source.

Returns

number

public getEditController(): Editor

Returns

Editor

public getEditorLock(): EditorLock

Returns

EditorLock

public getGridPosition(): CellPosition

todo: no docs

Returns

CellPosition

public getHeaderRow(): HTMLElement

todo: no docs

Returns

HTMLElement

public getHeaderRowColumn(columnId: string): Column

todo: no docs, return type is probably wrong -> "return $header && $header[0]"

Parameters

  • columnId: string

Returns

Column

public getOptions(): GridOptions

Returns an object containing all of the Grid options set on the grid. See a list of Grid Options here.

Returns

GridOptions

public getRenderedRange(viewportTop: number, viewportLeft: number): Viewport

Parameters

  • viewportTop: number
  • viewportLeft: number

Returns

Viewport

public getSelectedRows(): Array<number>

Returns an array of row indices corresponding to the currently selected rows.

Returns

Array<number>

public getSelectionModel(): SelectionModel

Returns the current SelectionModel. See here for more information about SelectionModels.

Returns

SelectionModel

public getSortColumns(): Column[]

todo: no docs or comments available

Returns

Column[]

public getTopPanel(): HTMLElement

todo: no docs

Returns

HTMLElement

public getViewport(viewportTop?: number, viewportLeft?: number): Viewport

Parameters

  • viewportTop?: number optional
  • viewportLeft?: number optional

Returns

Viewport

public gotoCell(row: number, cell: number, forceEdit?: boolean)

Accepts a row integer and a cell integer, scrolling the view to the row where row is its row index, and cell is its cell index. Optionally accepts a forceEdit boolean which, if true, will attempt to initiate the edit dialogue for the field in the specified cell. Unlike setActiveCell, this scrolls the row into the viewport and sets the keyboard focus.

Parameters

  • row: number

    A row index.

  • cell: number

    A column index.

  • forceEdit?: boolean optional

    If true, will attempt to initiate the edit dialogue for the field in the specified cell.

public init()

Initializes the grid. Called after plugins are registered. Normally, this is called by the constructor, so you don't need to call it. However, in certain cases you may need to delay the initialization until some other process has finished. In that case, set the explicitInitialization option to true and call the grid.init() manually.

public invalidate()

public invalidateRow(row: number)

Parameters

  • row: number

public invalidateRows(rows: Array<number>)

Parameters

  • rows: Array<number>

public navigateDown(): boolean

Switches the active cell one row down skipping unselectable cells. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public navigateLeft(): boolean

Switches the active cell one cell left skipping unselectable cells. Unline navigatePrev, navigateLeft stops at the first cell of the row. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public navigateNext(): boolean

Tabs over active cell to the next selectable cell. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public navigatePrev(): boolean

Tabs over active cell to the previous selectable cell. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public navigateRight(): boolean

Switches the active cell one cell right skipping unselectable cells. Unline navigateNext, navigateRight stops at the last cell of the row. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public navigateUp(): boolean

Switches the active cell one row up skipping unselectable cells. Returns a boolean saying whether it was able to complete or not.

Returns

boolean

public registerPlugin(plugin: Plugin)

Parameters

public removeCellCssStyles(key: string)

Removes an "overlay" of CSS classes from cell DOM elements. See setCellCssStyles for more.

Parameters

  • key: string

    A string key.

public render()

public resetActiveCell()

Resets active cell.

public resizeCanvas()

public scrollCellIntoView(row: number, cell: number, doPaging: boolean)

Parameters

  • row: number
  • cell: number
  • doPaging: boolean

public scrollRowIntoView(row: number, doPaging: boolean)

Parameters

  • row: number
  • doPaging: boolean

public scrollRowToTop(row: number)

Parameters

  • row: number

public setActiveCell(row: number, cell: number)

Sets an active cell.

Parameters

  • row: number

    A row index.

  • cell: number

    A column index.

public setCellCssStyles(key: string, hash: CellCssStylesHash)

Sets CSS classes to specific grid cells by calling removeCellCssStyles(key) followed by addCellCssStyles(key, hash). key is name for this set of styles so you can reference it later - to modify it or remove it, for example. hash is a per-row-index, per-column-name nested hash of CSS classes to apply. Suppose you have a grid with columns: ["login", "name", "birthday", "age", "likes_icecream", "favorite_cake"] ...and you'd like to highlight the "birthday" and "age" columns for people whose birthday is today, in this case, rows at index 0 and 9. (The first and tenth row in the grid).

Parameters

  • key: string

    A string key. Will overwrite any data already associated with this key.

  • hash: CellCssStylesHash

    A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.

public setColumns(columnDefinitions: Column[])

Sets grid columns. Column headers will be recreated and all rendered rows will be removed. To rerender the grid (if necessary), call render().

Parameters

  • columnDefinitions: Column[]

    An array of column definitions.

public setData(newData: Array<T extends Slick.SlickData>, scrollToTop: boolean)

Sets a new source for databinding and removes all rendered rows. Note that this doesn't render the new rows - you can follow it with a call to render() to do that.

Parameters

  • newData: Array<T extends Slick.SlickData>

    New databinding source using a regular JavaScript array..

  • scrollToTop: boolean

    If true, the grid will reset the vertical scroll position to the top of the grid.

public setData(newData: DataProvider, scrollToTop: boolean)

Sets a new source for databinding and removes all rendered rows. Note that this doesn't render the new rows - you can follow it with a call to render() to do that.

Parameters

  • newData: DataProvider

    New databinding source using a custom object exposing getItem(index) and getLength() functions.

  • scrollToTop: boolean

    If true, the grid will reset the vertical scroll position to the top of the grid.

public setHeaderRowVisibility(visible: boolean)

todo: no docs

Parameters

  • visible: boolean

public setOptions(options: GridOptions)

Extends grid options with a given hash. If an there is an active edit, the grid will attempt to commit the changes and only continue if the attempt succeeds.

options

An object with configuration options.

Parameters

public setSelectedRows(rowsArray: Array<number>)

Accepts an array of row indices and applies the current selectedCellCssClass to the cells in the row, respecting whether cells have been flagged as selectable.

Parameters

  • rowsArray: Array<number>

    An array of row numbers.

public setSelectionModel(selectionModel: SelectionModel)

Unregisters a current selection model and registers a new one. See the definition of SelectionModel for more information.

selectionmodel

A SelectionModel.

Parameters

public setSortColumn(columnId: string, ascending: boolean)

Accepts a columnId string and an ascending boolean. Applies a sort glyph in either ascending or descending form to the header of the column. Note that this does not actually sort the column. It only adds the sort glyph to the header.

Parameters

  • columnId: string
  • ascending: boolean

public setSortColumns(cols: Array<{ columnId: string; sortAsc: boolean; }>)

Accepts an array of objects in the form [ { columnId: [string], sortAsc: [boolean] }, ... ]. When called, this will apply a sort glyph in either ascending or descending form to the header of each column specified in the array. Note that this does not actually sort the column. It only adds the sort glyph to the header

Parameters

  • cols: Array<{ columnId: string; sortAsc: boolean; }>

public setTopPanelVisibility(visible: boolean)

todo: no docs

Parameters

  • visible: boolean

public unregisterPlugin(plugin: Plugin)

Parameters

public updateCell(row: number, cell: number)

Parameters

  • row: number
  • cell: number

public updateColumnHeader(columnId: string, title?: string, toolTip?: string)

Updates an existing column definition and a corresponding header DOM element with the new title and tooltip.

Parameters

  • columnId: string

    Column id.

  • title?: string optional

    New column name.

  • toolTip?: string optional

    New column tooltip.

public updateRow(row: number)

Parameters

  • row: number

public updateRowCount()