Events 9
onBeforePagingInfoChanged event
type PagingInfo
{ pageSize: number; pageNum: number; totalRows: number; totalPages: number; dataView: any }
Fires before the paging info changes, from `setPagingOptions()` and during `refresh()`. Return false to cancel the change.
onGroupExpanded event
type OnGroupExpandedEventArgs
{ level: number; groupingKey: string | number | null }
Fires when a group is expanded, from `expandGroup()` or `expandAllGroups()`; a null groupingKey means every group at that level.
onGroupCollapsed event
type OnGroupCollapsedEventArgs
{ level: number; groupingKey: string | number | null }
Fires when a group is collapsed, from `collapseGroup()` or `collapseAllGroups()`; a null groupingKey means every group at that level.
onPagingInfoChanged event
type PagingInfo
{ pageSize: number; pageNum: number; totalRows: number; totalPages: number; dataView: any }
Fires after the paging info (page size or page number) changes, following onBeforePagingInfoChanged.
onRowCountChanged event
type OnRowCountChangedEventArgs
{ previous: number; current: number; itemCount: number; dataView: SlickDataView; callingOnRowsChanged: boolean }
Fires from `refresh()` when the number of output rows changes, for example after filtering, paging or adding items; args give the previous and current counts.
onRowsChanged event
type OnRowsChangedEventArgs
{ rows: number[]; itemCount: number; dataView: SlickDataView; calledOnRowCountChanged: boolean }
Fires from `refresh()` when the set of visible rows changes; `rows` lists the affected row indexes.
onRowsOrCountChanged event
type OnRowsOrCountChangedEventArgs
{ rowsDiff: number[]; previousRowCount: number; currentRowCount: number; itemCount: number; rowCountChanged: boolean; rowsChanged: boolean; dataView: SlickDataView }
Fires from `refresh()` after onRowsChanged and/or onRowCountChanged. Subscribe to this single event to react to either kind of change with one handler.
onSelectedRowIdsChanged event
type OnSelectedRowIdsChangedEventArgs
{ grid?: SlickGrid; added?: boolean; filteredIds: Array<string | number>; selectedRowIds: Array<string | number>; ids: Array<string | number>; rows: number[]; dataView: SlickDataView }
Fires when the tracked selected item ids change, from `setSelectedIds()` and while `syncGridSelection()` keeps the grid selection in sync as rows are filtered or sorted.
onSetItemsCalled event
type OnSetItemsCalledEventArgs
{ idProperty: string; itemCount: number }
Fires from `setItems()` after the DataView receives a new set of items; args give the id property name and item count.
Methods 57
beginUpdate
beginUpdate(bulkUpdate?: boolean)
Begins a bached update of the items in the data view.
including deletes and the related events are postponed to the endUpdate call.
As certain operations are postponed during this update, some methods might not
deliver fully consistent information.
| Parameter | Type | Description |
|---|
bulkUpdate? | boolean | - if set to true, most data view modifications |
endUpdate
endUpdate()
Ends a batch started with beginUpdate() and runs a single refresh(), so many changes cause one re-render. Always pair it with beginUpdate().
dataView.beginUpdate();
for (const row of incoming) dataView.updateItem(row.id, row);
dataView.endUpdate();
destroy
destroy()
Releases the DataView: clears items and internal indexes and unsubscribes its events. Call it when you tear down the grid to avoid leaks.
dataView.destroy();
setRefreshHints
setRefreshHints(hints: DataViewHints)
provide some refresh hints as to what to rows needs refresh
| Parameter | Type | Description |
|---|
hints | DataViewHints | |
getFilterArgs
getFilterArgs()
get extra filter arguments of the filter method
setFilterArgs
setFilterArgs(args: any)
add extra filter arguments to the filter method
| Parameter | Type | Description |
|---|
args | any | |
getItems
getItems()
Get all DataView Items
getIdPropertyName
getIdPropertyName()
Get the DataView Id property name to use (defaults to "Id" but could be customized to something else when instantiating the DataView)
setItems
setItems(data: TData[], objectIdProperty?: string)
Set the Items with a new Dataset and optionally pass a different Id property name
| Parameter | Type | Description |
|---|
data | TData[] | - array of data |
objectIdProperty? | string | - optional id property to use as primary id |
setPagingOptions
setPagingOptions(args: Partial<PagingInfo>)
Set Paging Options
| Parameter | Type | Description |
|---|
args | Partial<PagingInfo> | |
getPagingInfo
getPagingInfo(): PagingInfo
Get Paging Options
returns PagingInfo
sort
sort(comparer: (a: TData, b: TData) => number, ascending?: boolean)
Sort Method to use by the DataView
| Parameter | Type | Description |
|---|
comparer | (a: TData, b: TData) => number | |
ascending? | boolean | |
fastSort deprecated
fastSort(field: string | (() => string), ascending?: boolean)
Deprecated: , to be more removed in next major since IE is no longer supported and this is no longer useful.
Provides a workaround for the extremely slow sorting in IE.
Does a [lexicographic] sort on a give column by temporarily overriding Object.prototype.toString
to return the value of that field and then doing a native Array.sort().
Sorts items by a single field using a faster string-based comparison. field is a property name or a function that returns the sort string. Use sort() with a comparer for custom or multi-field ordering; fastSort trades flexibility for speed.
dataView.fastSort('lastName', true);
| Parameter | Type | Description |
|---|
field | string | (() => string) | |
ascending? | boolean | |
reSort
reSort()
Re-Sort the dataset
getFilteredItems
getFilteredItems()
Get only the DataView filtered items
getFilteredItemCount
getFilteredItemCount()
Get the array length (count) of only the DataView filtered items
getFilter
getFilter()
Get current Filter used by the DataView
setFilter
setFilter(filterFn: FilterFn<TData>)
Set a Filter that will be used by the DataView
| Parameter | Type | Description |
|---|
filterFn | FilterFn<TData> | |
getGrouping
getGrouping(): Grouping[]
Get current Grouping info
returns Grouping[]
setGrouping
setGrouping(groupingInfo: Grouping | Grouping[])
Set some Grouping
| Parameter | Type | Description |
|---|
groupingInfo | Grouping | Grouping[] | |
getItemByIdx
getItemByIdx(i: number)
Get an item in the DataView by its row index
| Parameter | Type | Description |
|---|
i | number | |
getIdxById
getIdxById(id: DataIdType)
Get row index in the DataView by its Id
| Parameter | Type | Description |
|---|
id | DataIdType | |
getRowByItem
getRowByItem(item: TData)
Get row number in the grid by its item object
| Parameter | Type | Description |
|---|
item | TData | |
getRowById
getRowById(id: DataIdType)
Get row number in the grid by its Id
| Parameter | Type | Description |
|---|
id | DataIdType | |
getItemById
getItemById(id: DataIdType)
Get an item in the DataView by its Id
| Parameter | Type | Description |
|---|
id | DataIdType | |
mapItemsToRows
mapItemsToRows(itemArray: TData[])
From the items array provided, return the mapped rows
| Parameter | Type | Description |
|---|
itemArray | TData[] | |
mapIdsToRows
mapIdsToRows(idArray: DataIdType[])
From the Ids array provided, return the mapped rows
| Parameter | Type | Description |
|---|
idArray | DataIdType[] | |
mapRowsToIds
mapRowsToIds(rowArray: number[])
From the rows array provided, return the mapped Ids
| Parameter | Type | Description |
|---|
rowArray | number[] | |
updateSingleItem
updateSingleItem(id: DataIdType, item: TData)
Performs the update operations of a single item by id without
triggering any events or refresh operations.
| Parameter | Type | Description |
|---|
id | DataIdType | The new id of the item. |
item | TData | The item which should be the new value for the given id. |
updateItem
updateItem(id: DataIdType, item: T)
Updates a single item in the data view given the id and new value.
| Parameter | Type | Description |
|---|
id | DataIdType | The new id of the item. |
item | T | The item which should be the new value for the given id. |
updateItems
updateItems(ids: DataIdType[], newItems: T[])
Updates multiple items in the data view given the new ids and new values.
| Parameter | Type | Description |
|---|
ids | DataIdType[] | |
newItems | T[] | The new items that should be set in the data view for the given ids. |
insertItem
insertItem(insertBefore: number, item: TData)
Inserts a single item into the data view at the given position.
| Parameter | Type | Description |
|---|
insertBefore | number | The 0-based index before which the item should be inserted. |
item | TData | The item to insert. |
insertItems
insertItems(insertBefore: number, newItems: TData[])
Inserts multiple items into the data view at the given position.
| Parameter | Type | Description |
|---|
insertBefore | number | The 0-based index before which the items should be inserted. |
newItems | TData[] | The items to insert. |
addItem
addItem(item: TData)
Adds a single item at the end of the data view.
| Parameter | Type | Description |
|---|
item | TData | The item to add at the end. |
addItems
addItems(newItems: TData[])
Adds multiple items at the end of the data view.
| Parameter | Type | Description |
|---|
newItems | TData[] | The items to add at the end. |
deleteItem
deleteItem(id: DataIdType)
Deletes a single item identified by the given id from the data view.
| Parameter | Type | Description |
|---|
id | DataIdType | The id identifying the object to delete. |
deleteItems
deleteItems(ids: DataIdType[])
Deletes multiple item identified by the given ids from the data view.
| Parameter | Type | Description |
|---|
ids | DataIdType[] | The ids of the items to delete. |
sortedAddItem
sortedAddItem(item: TData)
Add an item in a sorted dataset (a Sort function must be defined)
| Parameter | Type | Description |
|---|
item | TData | |
sortedUpdateItem
sortedUpdateItem(id: string | number, item: TData)
Update an item in a sorted dataset (a Sort function must be defined)
| Parameter | Type | Description |
|---|
id | string | number | |
item | TData | |
getItemCount
getItemCount()
Get item count, that is the full dataset lenght of the DataView
getLength
getLength()
Get row count (rows displayed in current page)
getItem
getItem(i: number)
Retrieve an item from the DataView at specific index
| Parameter | Type | Description |
|---|
i | number | |
getItemMetadata
getItemMetadata(row: number): ItemMetadata | null
Returns the metadata SlickGrid applies to a row — CSS classes, per-column overrides, and for group/total rows the special formatter and colspan. This is how grouped rows render. Returns null when the row has no metadata.
const meta = dataView.getItemMetadata(0);
| Parameter | Type | Description |
|---|
row | number | |
returns ItemMetadata | null
collapseAllGroups
collapseAllGroups(level?: number)
Collapses all groups. Pass a zero-based level to collapse only that grouping level; omit it for every level. Requires grouping set with setGrouping plus a SlickGroupItemMetadataProvider.
dataView.collapseAllGroups(); // every level
dataView.collapseAllGroups(0); // top level only
| Parameter | Type | Description |
|---|
level? | number | Optional level to collapse. If not specified, applies to all levels. |
expandAllGroups
expandAllGroups(level?: number)
Expands all groups. Pass a zero-based level to expand only that level; omit it for every level.
dataView.expandAllGroups();
| Parameter | Type | Description |
|---|
level? | number | Optional level to expand. If not specified, applies to all levels. |
expandCollapseGroup
expandCollapseGroup(level: number, groupingKey: string, collapse?: boolean)
Low-level toggle used by expandGroup/collapseGroup. Sets the collapsed state of the group at groupingKey on grouping level; pass collapse true to collapse, false to expand.
dataView.expandCollapseGroup(0, 'Australia', true); // collapse
| Parameter | Type | Description |
|---|
level | number | |
groupingKey | string | |
collapse? | boolean | |
collapseGroup
collapseGroup(args: any)
Collapses one group. Pass the group's groupingKey, or for a nested group pass one key per level from the top down. Requires grouping via setGrouping.
dataView.collapseGroup('Australia');
// nested: dataView.collapseGroup('Australia', 'Australia:NT');
| Parameter | Type | Description |
|---|
args | any | |
expandGroup
expandGroup(args: any)
Expands one group. Same argument form as collapseGroup — a single groupingKey, or one key per level for nested groups.
dataView.expandGroup('Australia');
| Parameter | Type | Description |
|---|
args | any | |
getGroups
getGroups()
Returns the current top-level Group objects. Each has value, count, rows, nested groups, and totals when aggregators are set. Empty array when no grouping is active.
for (const g of dataView.getGroups()) {
console.log(g.value, g.count);
}
refresh
refresh()
Re-applies the current filter, sort, paging and grouping, then fires the change events for whatever changed. Call it after you mutate items outside the DataView's own add/update methods. Inside a beginUpdate()/endUpdate() batch it is deferred to endUpdate().
items[0].active = false;
dataView.refresh();
syncGridSelection
syncGridSelection(grid: SlickGridModel, preserveHidden: boolean, preserveHiddenOnSelectionChange?: boolean)
Wires the grid and the DataView together to keep row selection tied to item ids.
This is useful since, without it, the grid only knows about rows, so if the items
move around, the same rows stay selected instead of the selection moving along
with the items.
NOTE: This doesn't work with cell selection model.
| Parameter | Type | Description |
|---|
grid | SlickGridModel | - The grid to sync selection with. |
preserveHidden | boolean | - Whether to keep selected items that go out of the
view due to them getting filtered out. |
preserveHiddenOnSelectionChange? | boolean | - Whether to keep selected items
that are currently out of the view (see preserveHidden) as selected when selection
changes. |
getAllSelectedIds
getAllSelectedIds()
Get all selected IDs
Note: when using Pagination it will also include hidden selections assuming `preserveHiddenOnSelectionChange` is set to true.
getAllSelectedFilteredIds
getAllSelectedFilteredIds()
Get all selected filtered IDs (similar to "getAllSelectedIds" but only return filtered data)
Note: when using Pagination it will also include hidden selections assuming `preserveHiddenOnSelectionChange` is set to true.
setSelectedIds
setSelectedIds(selectedIds: Array<number | string>, options?: Partial<{ isRowBeingAdded: boolean; shouldTriggerEvent: boolean; applyRowSelectionToGrid: boolean; }>)
Set current row selected IDs array (regardless of Pagination)
NOTE: This will NOT change the selection in the grid, if you need to do that then you still need to call
"grid.setSelectedRows(rows)"
| Parameter | Type | Description |
|---|
selectedIds | Array<number | string> | - list of IDs which have been selected for this action |
options? | Partial<{ isRowBeingAdded: boolean; shouldTriggerEvent: boolean; applyRowSelectionToGrid: boolean; }> | - `isRowBeingAdded`: defaults to true, are the new selected IDs being added (or removed) as new row selections
- `shouldTriggerEvent`: defaults to true, should we trigger `onSelectedRowIdsChanged` event
- `applyRowSelectionToGrid`: defaults to true, should we apply the row selections to the grid in the UI |
getAllSelectedItems
getAllSelectedItems()
Get all selected dataContext items
Note: when using Pagination it will also include hidden selections assuming `preserveHiddenOnSelectionChange` is set to true.
getAllSelectedFilteredItems
getAllSelectedFilteredItems()
Get all selected filtered dataContext items (similar to "getAllSelectedItems" but only return filtered data)
Note: when using Pagination it will also include hidden selections assuming `preserveHiddenOnSelectionChange` is set to true.
syncGridCellCssStyles
syncGridCellCssStyles(grid: SlickGridModel, key: string)
Keeps a set of cell CSS styles (added with grid.setCellCssStyles under key) attached to the right items as they move, sort or filter. Call it once after you add the styles; the DataView re-applies them on every change.
grid.setCellCssStyles('flagged', hash);
dataView.syncGridCellCssStyles(grid, 'flagged');
| Parameter | Type | Description |
|---|
grid | SlickGridModel | |
key | string | |