Accessories
| Function | DOM element to use as the popup parent for grid popups (context menu, column menu etc). See Popup Parent. function setPopupParent(
ePopupParent: HTMLElement
): void;
|
| Function | Shows the column menu after and positions it relative to the provided button element. Use in conjunction with your own header template. function showColumnMenuAfterButtonClick(
colKey: string | Column,
buttonElement: HTMLElement
): void;
|
| showColumnMenuAfterMouseClick
Function | Shows the column menu after and positions it relative to the mouse event. Use in conjunction with your own header template. |
| Function | function hidePopupMenu(): void;
|
| Function | Resets the side bar to the provided configuration. The parameter is the same as the sideBar grid property. The side bar is re-created from scratch with the new config. See Side Bar. function setSideBar(
def: SideBarDef | string | string[] | boolean
): void;
interface SideBarDef {
// A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom.
toolPanels?: (ToolPanelDef | string)[];
// The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed.
defaultToolPanel?: string;
// To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown.
hiddenByDefault?: boolean;
// Sets the side bar position relative to the grid.
position?: 'left' | 'right';
}
|
| Function | Returns the current side bar configuration. If a shortcut was used, returns the detailed long form. function getSideBar(): SideBarDef | undefined;
interface SideBarDef {
// A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom.
toolPanels?: (ToolPanelDef | string)[];
// The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed.
defaultToolPanel?: string;
// To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown.
hiddenByDefault?: boolean;
// Sets the side bar position relative to the grid.
position?: 'left' | 'right';
}
|
| Function | Show/hide the entire side bar, including any visible panel and the tab buttons. function setSideBarVisible(show: boolean): void;
|
| Function | Returns true if the side bar is visible. function isSideBarVisible(): boolean;
|
| Function | Sets the side bar position relative to the grid. Possible values are 'left' or 'right' . Default: 'right' function setSideBarPosition(
position: 'left' | 'right'
): void;
|
| Function | Opens a particular tool panel. Provide the ID of the tool panel to open. See Tool Panel. function openToolPanel(key: string): void;
|
| Function | Closes the currently open tool panel (if any). function closeToolPanel(): void;
|
| Function | Returns the ID of the currently shown tool panel if any, otherwise null . function getOpenedToolPanel(): string | null;
|
| Function | Returns true if the tool panel is showing, otherwise false . function isToolPanelShowing(): boolean;
|
| Function | Force refresh all tool panels by calling their refresh method. function refreshToolPanel(): void;
|
| Function | function getToolPanelInstance(id: string): TToolPanel | undefined;
|
| Function | function getStatusPanel(key: string): TStatusPanel | undefined;
|
Clipboard
See Clipboard for more information.
| Function | Cuts data to clipboard by following the same rules as pressing Ctrl+X. function cutToClipboard(
params?: IClipboardCopyParams
): void;
interface IClipboardCopyParams {
includeHeaders?: boolean;
includeGroupHeaders?: boolean;
}
|
| Function | Copies data to clipboard by following the same rules as pressing Ctrl+C. function copyToClipboard(
params?: IClipboardCopyParams
): void;
interface IClipboardCopyParams {
includeHeaders?: boolean;
includeGroupHeaders?: boolean;
}
|
| Function | Copies the selected ranges to the clipboard. function copySelectedRangeToClipboard(
params?: IClipboardCopyParams
): void;
interface IClipboardCopyParams {
includeHeaders?: boolean;
includeGroupHeaders?: boolean;
}
|
| Function | Copies the selected range down, similar to Ctrl+D in Excel. function copySelectedRangeDown(): void;
|
| Function | Copies the selected rows to the clipboard. function copySelectedRowsToClipboard(
params?: IClipboardCopyRowsParams
): void;
interface IClipboardCopyRowsParams {
columnKeys?: (string | Column)[];
includeHeaders?: boolean;
includeGroupHeaders?: boolean;
}
|
Column Definitions
See Updating Column Definitions for more information.
| getColumnDefs
Function | Returns the current column definitions.
|
| setColumnDefs
Function | Call to set new column definitions. The grid will redraw all the column headers, and then redraw all of the rows.
|
| setAutoGroupColumnDef
Function | Call to set new auto group column definition. The grid will recreate any auto-group columns if present. |
| setDefaultColDef
Function | Call to set new Default Column Definition. |
| sizeColumnsToFit
Function | function sizeColumnsToFit(
params?: ISizeColumnsToFitParams
): void;
interface ISizeColumnsToFitParams {
// Defines a default minimum width for every column (does not override the column minimum width)
defaultMinWidth?: number;
// Defines a default maximum width for every column (does not override the column maximum width)
defaultMaxWidth?: number;
// Provides a minimum and/or maximum width to specific columns
columnLimits?: IColumnLimit[];
}
interface IColumnLimit {
// Selector for the column to which these dimension limits will apply
key: Column | string;
// Defines a minimum width for this column (does not override the column minimum width)
minWidth?: number;
// Defines a maximum width for this column (does not override the column maximum width)
maxWidth?: number;
}
|
See Column Headers for more information.
| Function | Sets the height in pixels for the row containing the column label header. function setHeaderHeight(headerHeight?: number): void;
|
| Function | Sets the height in pixels for the rows containing header column groups. function setGroupHeaderHeight(headerHeight?: number): void;
|
| Function | Sets the height in pixels for the row containing the floating filters. function setFloatingFiltersHeight(headerHeight?: number): void;
|
| Function | Sets the height in pixels for the row containing the columns when in pivot mode. function setPivotHeaderHeight(headerHeight?: number): void;
|
| Function | Sets the height in pixels for the row containing header column groups when in pivot mode. function setPivotGroupHeaderHeight(headerHeight?: number): void;
|
Editing
See Cell Editing for more information.
| Function | Start editing the provided cell. If another cell is editing, the editing will be stopped in that other cell. See Editing API. function startEditingCell(
params: StartEditingCellParams
): void;
interface StartEditingCellParams {
// The row index of the row to start editing
rowIndex: number;
// The column key of the row to start editing
colKey: string | Column;
// Set to `'top'` or `'bottom'` to start editing a pinned row
rowPinned?: RowPinnedType;
// The key to pass to the cell editor
key?: string;
// The charPress to pass to the cell editor
charPress?: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | If a cell is editing, it stops the editing. Pass true if you want to cancel the editing (i.e. don't accept changes). See Editing API. function stopEditing(
cancel: boolean = false
): void;
|
| Function | If the grid is editing, returns back details of the editing cell(s). See Editing API. function getEditingCells(): CellPosition[];
interface CellPosition {
// The grid column
column: Column;
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | Returns the list of active cell editor instances. Optionally provide parameters to restrict to certain columns / row nodes. See Cell Editor Instances. function getCellEditorInstances(
params: GetCellEditorInstancesParams<TData> = {}
): ICellEditor[];
interface GetCellEditorInstancesParams<TData = any> {
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
|
Events
| Function | Add an event listener for the specified eventType . Works similar to addEventListener for a browser DOM element. function addEventListener(
eventType: string,
listener: Function
): void;
|
| Function | Add an event listener for all event types coming from the grid. function addGlobalListener(listener: Function): void;
|
| Function | Remove an event listener. function removeEventListener(
eventType: string,
listener: Function
): void;
|
| Function | Remove a global event listener. function removeGlobalListener(listener: Function): void;
|
| Function | Registers a callback to a virtual row. A virtual row is a row that is visually rendered on the screen (rows that are not visible because of the scroll position are not rendered). Unlike normal events, you do not need to unregister rendered row listeners. When the rendered row is removed from the grid, all associated rendered row listeners will also be removed. listen for this event if your cellRenderer needs to do cleanup when the row no longer exists.
function addRenderedRowListener(
eventName: string,
rowIndex: number,
callback: Function
): void;
|
Export
See Export for more information.
| Function | Downloads a CSV export of the grid's data. |
| Function | Similar to exportDataAsCsv , except returns the result as a string rather than download it. |
| Function | Downloads an Excel export of the grid's data. |
| Function | Similar to exportDataAsExcel , except instead of downloading a file, it will return a Blob to be processed by the user. |
| Function | This is method to be used to get the grid's data as a sheet, that will later be exported either by getMultipleSheetsAsExcel() or exportMultipleSheetsAsExcel() . |
| Function | Downloads an Excel export of multiple sheets in one file. function exportMultipleSheetsAsExcel(
params: ExcelExportMultipleSheetParams
): void;
interface ExcelExportMultipleSheetParams {
// The author of the exported file.
// Default: `AG Grid`
author?: string;
// Array of strings containing the raw data for Excel workbook sheets.
// This property is only used when exporting to multiple sheets using `api.exportMultipleSheetsAsExcel()` and the data for each sheet is obtained by calling `api.getSheetDataForExcel()`.
data: string[];
// String to use as the file name.
// Default: `export.xlsx`
fileName?: string;
// The default value for the font size of the Excel document.
// Default: `11`
fontSize?: number;
// The mimeType of the Excel file.
// Default: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
mimeType?: string;
}
|
| Function | Similar to exportMultipleSheetsAsExcel , except instead of downloading a file, it will return a Blob to be processed by the user. function getMultipleSheetsAsExcel(
params: ExcelExportMultipleSheetParams
): Blob | undefined;
interface ExcelExportMultipleSheetParams {
// The author of the exported file.
// Default: `AG Grid`
author?: string;
// Array of strings containing the raw data for Excel workbook sheets.
// This property is only used when exporting to multiple sheets using `api.exportMultipleSheetsAsExcel()` and the data for each sheet is obtained by calling `api.getSheetDataForExcel()`.
data: string[];
// String to use as the file name.
// Default: `export.xlsx`
fileName?: string;
// The default value for the font size of the Excel document.
// Default: `11`
fontSize?: number;
// The mimeType of the Excel file.
// Default: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
mimeType?: string;
}
|
Filtering
See Filtering for more information.
| Function | function getQuickFilter(): string | undefined;
|
| Function | function setQuickFilter(newFilter: string): void;
|
| Function | function resetQuickFilter(): void;
|
| Function | function isQuickFilterPresent(): boolean;
|
| setExcludeHiddenColumnsFromQuickFilter
Function | Updates the excludeHiddenColumnsFromQuickFilter grid option. Set to true to exclude hidden columns from being checked by the Quick Filter (or false to include them). This can give a significant performance improvement when there are a large number of hidden columns, and you are only interested in filtering on what's visible.
See Exclude Hidden Columns. function setExcludeHiddenColumnsFromQuickFilter(value: boolean): void;
|
| isColumnFilterPresent
Function | Returns true if any column filter is set, otherwise false . function isColumnFilterPresent(): boolean;
|
| Function | Returns true if any filter is set. This includes quick filter, advanced filter or external filter. function isAnyFilterPresent(): boolean;
|
| Function | Returns the filter component instance for a column. key can be a string field name or a ColDef object (matches on object reference, useful if field names are not unique). If your filter is created asynchronously, getFilterInstance will return null so you will need to use the callback to access the filter instance instead.
See Accessing Individual Filter Component Instances. function getFilterInstance(
key: string | Column,
callback?: (filter: TFilter | null) => void
): TFilter | null | undefined;
|
| Function | Gets the current state of all the advanced filters. Used for saving filter state. function getFilterModel(): { [key: string]: any; };
|
| Function | Sets the state of all the advanced filters. Provide it with what you get from getFilterModel() to restore filter state. function setFilterModel(model: any): void;
|
| Function | Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs. function onFilterChanged(): void;
|
| Function | Destroys a filter. Useful to force a particular filter to be created from scratch again. function destroyFilter(key: string | Column): void;
|
Integrated Charts
See Integrated Charts for more information.
| Function | function createRangeChart(
params: CreateRangeChartParams
): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
|
| Function | Used to programmatically create pivot charts from a grid. See Pivot Chart API. function createPivotChart(
params: CreatePivotChartParams
): ChartRef | undefined;
interface CreatePivotChartParams {
// The type of chart to create.
chartType: ChartType;
// The default theme to use, either a default option or your own custom theme.
chartThemeName?: string;
// Provide to display the chart outside of the grid in your own container.
chartContainer?: HTMLElement;
// Allows specific chart options in the current theme to be overridden.
chartThemeOverrides?: AgChartThemeOverrides;
// When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart.
unlinkChart?: boolean;
}
type ChartType =
'column'
| 'groupedColumn'
| 'stackedColumn'
| 'normalizedColumn'
| 'bar'
| 'groupedBar'
| 'stackedBar'
| 'normalizedBar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
| 'stackedArea'
| 'normalizedArea'
| 'histogram'
| 'columnLineCombo'
| 'areaColumnCombo'
| 'customCombo'
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
|
| Function | Used to programmatically create cross filter charts from a range. See Cross-filter API. function createCrossFilterChart(
params: CreateCrossFilterChartParams
): ChartRef | undefined;
interface CreateCrossFilterChartParams {
// The type of cross-filter chart to create.
chartType: CrossFilterChartType;
// The range of cells to be charted. If no rows / rowIndexes are specified all rows will be included.
cellRange: ChartParamsCellRange;
// Suppress highlighting the selected range in the grid.
suppressChartRanges?: boolean;
// The aggregation function that should be applied to all series data.
aggFunc?: string | IAggFunc;
// The default theme to use, either a default option or your own custom theme.
chartThemeName?: string;
// Provide to display the chart outside of the grid in your own container.
chartContainer?: HTMLElement;
// Allows specific chart options in the current theme to be overridden.
chartThemeOverrides?: AgChartThemeOverrides;
// When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart.
unlinkChart?: boolean;
}
type CrossFilterChartType =
'column'
| 'bar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
type ChartParamsCellRange =
Partial<Omit<CellRangeParams, 'rowStartPinned'
| 'rowEndPinned'>>
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
|
| Function | Returns the ChartRef using the supplied chartId . function getChartRef(chartId: string): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
|
| Function | Returns a list of models with information about the charts that are currently rendered from the grid. See Saving / Restoring Charts. function getChartModels(): ChartModel[] | undefined;
|
| Function | function restoreChart(
chartModel: ChartModel,
chartContainer?: HTMLElement
): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
|
| Function | function getChartImageDataURL(
params: GetChartImageDataUrlParams
): string | undefined;
interface GetChartImageDataUrlParams {
// The id of the created chart.
chartId: string;
// A string indicating the image format.
// The default format type is `image/png`.
// Options: `image/png`, `image/jpeg`
fileFormat?: string;
}
|
| Function | function downloadChart(
params: ChartDownloadParams
): void;
interface ChartDownloadParams {
// The id of the created chart.
chartId: string;
// Name of downloaded image file. The chart title will be used by default
fileName?: string;
// A string indicating the image format.
// The default format type is `image/png`.
// Options: `image/png`, `image/jpeg`
fileFormat?: string;
// Dimensions of downloaded chart image in pixels. The current chart dimensions will be used if not specified.
dimensions?: { width: number; height: number; };
}
|
| Function | function openChartToolPanel(
params: OpenChartToolPanelParams
): void;
interface OpenChartToolPanelParams {
// The id of the created chart.
chartId: string;
// Name of the Chart Tool Panel. The default 'Settings' Tool Panel will be used if not specified.
panel?: ChartToolPanelName;
}
type ChartToolPanelName =
'settings'
| 'data'
| 'format'
|
| Function | function closeChartToolPanel(
params: CloseChartToolPanelParams
): void;
interface CloseChartToolPanelParams {
// The id of the created chart.
chartId: string;
}
|
Keyboard Navigation
See Keyboard Navigation for more information.
| Function | Returns the focused cell (or the last focused cell if the grid lost focus). function getFocusedCell(): CellPosition | null;
interface CellPosition {
// The grid column
column: Column;
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | Sets the focus to the specified cell. rowPinned can be either 'top', 'bottom' or null (for not pinned). function setFocusedCell(
rowIndex: number,
colKey: string | Column,
rowPinned?: RowPinnedType
): void;
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | Clears the focused cell. function clearFocusedCell(): void;
|
| Function | Navigates the grid focus to the next cell, as if tabbing. |
| Function | Navigates the grid focus to the previous cell, as if shift-tabbing. |
Master Detail
See Master Detail for more information.
| Function | Returns the DetailGridInfo corresponding to the supplied detailGridId . function getDetailGridInfo(id: string): DetailGridInfo | undefined;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_{ROW-ID}`,
// where `ROW-ID` is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
|
| Function | Iterates through each DetailGridInfo in the grid and calls the supplied callback on each. See Accessing Detail Grids. function forEachDetailGridInfo(
callback: (gridInfo: DetailGridInfo, index: number) => void
): void;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_{ROW-ID}`,
// where `ROW-ID` is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
|
| Function | function addDetailGridInfo(
id: string,
gridInfo: DetailGridInfo
): void;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_{ROW-ID}`,
// where `ROW-ID` is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
|
| Function | function removeDetailGridInfo(id: string): void;
|
Miscellaneous
| Function | Gets the value for a column for a particular rowNode (row). This is useful if you want the raw value of a cell e.g. if implementing your own CSV export.
|
| Function | Switch between layout options: normal , autoHeight , print . Defaults to normal if no domLayout provided.
See DOM Layout. function setDomLayout(
domLayout?: DomLayoutType
): void;
type DomLayoutType =
'normal'
| 'autoHeight'
| 'print'
|
| Function | Will destroy the grid and release resources. If you are using a framework you do not need to call this, as the grid links in with the framework lifecycle. However if you are using Web Components or native JavaScript, you do need to call this, to avoid a memory leak in your application. function destroy(): void;
|
| Function | Sets an ARIA property in the grid panel (element with role="grid" ), and removes an ARIA property when the value is null.
Example:
api.setGridAriaProperty('label', 'my grid') will set aria-label="my grid" .
api.setGridAriaProperty('label', null) will remove the aria-label attribute from the grid element. function setGridAriaProperty(
property: string,
value: string | null
): void;
|
| Function | Returns true when there are no more animation frames left to process. function isAnimationFrameQueueEmpty(): boolean;
|
Overlays
See Overlays for more information.
| Function | Show the 'loading' overlay. function showLoadingOverlay(): void;
|
| Function | Show the 'no rows' overlay. function showNoRowsOverlay(): void;
|
| Function | Hides the overlay if showing. function hideOverlay(): void;
|
See Row Pagination for more information.
| Function | Set whether the grid paginates the data or not. true to enable pagination false to disable pagination
function setPagination(value: boolean): void;
|
| Function | Returns true when the last page is known; this will always be the case if you are using the Client-Side Row Model for pagination. Returns false when the last page is not known; this only happens when using Infinite Row Model. function paginationIsLastPageFound(): boolean;
|
| Function | Returns how many rows are being shown per page. function paginationGetPageSize(): number;
|
| Function | Sets the paginationPageSize , then re-paginates the grid so the changes are applied immediately. function paginationSetPageSize(size?: number): void;
|
| Function | Returns the 0-based index of the page which is showing. function paginationGetCurrentPage(): number;
|
| Function | Returns the total number of pages. Returns null if paginationIsLastPageFound() === false . function paginationGetTotalPages(): number;
|
| Function | The total number of rows. Returns null if paginationIsLastPageFound() === false . function paginationGetRowCount(): number;
|
| Function | Goes to the specified page. If the page requested doesn't exist, it will go to the last page. function paginationGoToPage(page: number): void;
|
| Function | Navigates to the next page. function paginationGoToNextPage(): void;
|
| Function | Navigates to the previous page. function paginationGoToPreviousPage(): void;
|
| Function | Navigates to the first page. function paginationGoToFirstPage(): void;
|
| Function | Navigates to the last page. function paginationGoToLastPage(): void;
|
Pivot and Aggregation
See Pivot and Aggregation for more information
| Function | Add an aggregation function with the specified key. function addAggFunc(
key: string,
aggFunc: IAggFunc
): void;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// Pivot Result Column being produced using this aggregation
pivotResultColumn?: Column;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
|
| Function | Add aggregations function with the specified keys. function addAggFuncs(
aggFuncs: { [key: string]: IAggFunc; }
): void;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// Pivot Result Column being produced using this aggregation
pivotResultColumn?: Column;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
|
| Function | Clears all aggregation functions (including those provided by the grid). function clearAggFuncs(): void;
|
Refresh
See View Refresh for more information.
| Function | Performs change detection on all cells, refreshing cells where required. See Refresh Cells. function refreshCells(
params: RefreshCellsParams<TData> = {}
): void;
interface RefreshCellsParams<TData = any> {
// Skip change detection, refresh everything.
force?: boolean;
// Skip cell flashing, if cell flashing is enabled.
suppressFlash?: boolean;
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
|
| Function | Remove row(s) from the DOM and recreate them again from scratch. See Redraw Rows. function redrawRows(
params: RedrawRowsParams<TData> = {}
): void;
interface RedrawRowsParams<TData = any> {
// Row nodes to redraw
rowNodes?: IRowNode<TData>[];
}
|
| Function | Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed. function refreshHeader(): void;
|
| Function | function flashCells(
params: FlashCellsParams<TData> = {}
): void;
interface FlashCellsParams<TData = any> {
flashDelay?: number;
fadeDelay?: number;
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
|
Rendering
| Function | Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer. function getRenderedNodes(): IRowNode<TData>[];
|
| Function | function getCellRendererInstances(
params: GetCellRendererInstancesParams<TData> = {}
): ICellRenderer[];
interface GetCellRendererInstancesParams<TData = any> {
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
interface ICellRenderer<TData = any> {
// Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
// then the grid will refresh the cell for you.
refresh(params: ICellRendererParams<TData>): boolean;
}
|
| Function | Gets the sizes that various UI elements will be rendered at with the current theme. If you override the row or header height using gridOptions , the override value you provided will be returned.
function getSizesForCurrentTheme(): void;
|
| Function | Tells the grid to recalculate the row heights. function resetRowHeights(): void;
|
| Function | Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight) . function onRowHeightChanged(): void;
|
Row Displayed
| Function | Returns the displayed RowNode at the given index . function getDisplayedRowAtIndex(index: number): IRowNode<TData> | undefined;
|
| Function | Returns the total number of displayed rows. function getDisplayedRowCount(): number;
|
| Function | Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer). function getFirstDisplayedRow(): number;
|
| Function | Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer). function getLastDisplayedRow(): number;
|
Row Drag and Drop
See Row Dragging for more information.
| Function | function setSuppressRowDrag(value: boolean): void;
|
| Function | function setSuppressMoveWhenRowDragging(value: boolean): void;
|
| Function | function addRowDropZone(
params: RowDropZoneParams
): void;
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
|
| Function | function removeRowDropZone(
params: RowDropZoneParams
): void;
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
|
| Function | function getRowDropZoneParams(
events?: RowDropZoneEvents
): RowDropZoneParams;
interface RowDropZoneEvents {
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
|
Row Grouping
See Row Grouping for more information.
| expandAll
Function | Expand all groups. function expandAll(): void;
|
| Function | Collapse all groups. function collapseAll(): void;
|
| setRowNodeExpanded
Function | Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes. function setRowNodeExpanded(
rowNode: IRowNode,
expanded: boolean,
expandParents?: boolean
): void;
|
| onGroupExpandedOrCollapsed
Function | Informs the grid that row group expanded state has changed and it needs to rerender the group nodes. Typically called after updating the row node expanded state explicitly, i.e rowNode.expanded = false , across multiple groups and you want to update the grid view in a single rerender instead of on every group change.
function onGroupExpandedOrCollapsed(): void;
|
Row Nodes
| Function | Returns the row node with the given ID. The row node ID is the one you provide from the callback getRowId(params) , otherwise the ID is a number (cast as string) auto-generated by the grid when the row data is set.
function getRowNode(id: string): IRowNode<TData> | undefined;
|
| Function | Iterates through each node (row) in the grid and calls the callback for each node. This works similar to the forEach method on a JavaScript array. This is called for every node, ignoring any filtering or sorting applied within the grid. If using the Infinite Row Model, then this gets called for each page loaded in the page cache. function forEachNode(
callback: (rowNode: IRowNode<TData>, index: number) => void,
includeFooterNodes?: boolean
): void;
|
| Function | Similar to forEachNode , except skips any filtered out data. function forEachNodeAfterFilter(
callback: (rowNode: IRowNode<TData>, index: number) => void
): void;
|
| forEachNodeAfterFilterAndSort
Function | Similar to forEachNodeAfterFilter , except the callbacks are called in the order the rows are displayed in the grid. function forEachNodeAfterFilterAndSort(
callback: (rowNode: IRowNode<TData>, index: number) => void
): void;
|
| Function | Similar to forEachNode , except lists all the leaf nodes. This effectively goes through all the data that you provided to the grid before the grid performed any grouping. If using tree data, goes through all the nodes for the data you provided, including nodes that have children, but excluding groups the grid created where gaps were missing in the hierarchy.
function forEachLeafNode(
callback: (rowNode: IRowNode<TData>) => void
): void;
|
Row Pinning
See Row Pinning for more information.
| Function | Set the top pinned rows. Call with no rows / undefined to clear top pinned rows. function setPinnedTopRowData(rows?: any[]): void;
|
| Function | Set the bottom pinned rows. Call with no rows / undefined to clear bottom pinned rows. function setPinnedBottomRowData(rows?: any[]): void;
|
| Function | Gets the number of top pinned rows. function getPinnedTopRowCount(): number;
|
| Function | Gets the number of bottom pinned rows. function getPinnedBottomRowCount(): number;
|
| Function | Gets the top pinned row with the specified index. function getPinnedTopRow(index: number): IRowNode | undefined;
|
| Function | Gets the top pinned row with the specified index. function getPinnedBottomRow(index: number): IRowNode | undefined;
|
RowModel
See Row Model for more information.
| Function | Returns the row model inside the table. From here you can see the original rows, rows after filter has been applied, rows after aggregation has been applied, and the final set of 'to be displayed' rows.
function getModel(): IRowModel;
interface IRowModel {
// Returns the rowNode at the given index.
getRow(index: number): RowNode | undefined;
// Returns the rowNode for given id.
getRowNode(id: string): RowNode | undefined;
// Returns the number of rows
getRowCount(): number;
getTopLevelRowCount(): number;
getTopLevelRowDisplayedIndex(topLevelIndex: number): number;
// Returns the row index at the given pixel
getRowIndexAtPixel(pixel: number): number;
// Returns true if the provided rowNode is in the list of rows to render
isRowPresent(rowNode: RowNode): boolean;
// Returns row top and bottom for a given row
getRowBounds(index: number): RowBounds | null;
// Returns true if this model has no rows, regardless of model filter. EG if rows present, but filtered
// out, this still returns false. If it returns true, then the grid shows the 'no rows' overlay - but we
// don't show that overlay if the rows are just filtered out.
isEmpty(): boolean;
// Returns true if no rows (either no rows at all, or the rows are filtered out). This is what the grid
// uses to know if there are rows to render or not.
isRowsToRender(): boolean;
// Returns all rows in range that should be selected. If there is a gap in range (non ClientSideRowModel) then
// then no rows should be returned
getNodesInRangeForSelection(first: RowNode, last: RowNode | null): RowNode[];
// Iterate through each node. What this does depends on the model type. For clientSide, goes through
// all nodes. For serverSide, goes through what's loaded in memory.
forEachNode(callback: (rowNode: RowNode, index: number) => void, includeFooterNodes?: boolean): void;
// The base class returns the type. We use this instead of 'instanceof' as the client might provide
// their own implementation of the models in the future.
getType(): RowModelType;
// It tells us if this row model knows about the last row that it can produce. This is used by the
// PaginationPanel, if last row is not found, then the 'last' button is disabled and the last page is
// not shown. This is always true for ClientSideRowModel. It toggles for InfiniteRowModel.
isLastRowIndexKnown(): boolean;
// Used by CSRM only - is makes sure there are now estimated row heights within the range.
ensureRowHeightsValid(startPixel: number, endPixel: number, startLimitIndex: number, endLimitIndex: number): boolean;
// Gets called after grid is initialised. What happens depends on row model. Client Side will take rowData
// from gridOptions, the other row models will start calling their datasources.
start(): void;
}
interface RowBounds {
rowTop: number;
rowHeight: number;
rowIndex?: number;
}
type RowModelType =
'infinite'
| 'viewport'
| 'clientSide'
| 'serverSide'
|
RowModel: Client-Side
See Client-Side Row Model for more information.
| Function | Set the row data. function setRowData(rowData: TData[]): void;
|
| Function | Update row data. Pass a transaction object with lists for add , remove and update . function applyTransaction(
rowDataTransaction: RowDataTransaction<TData>
): RowNodeTransaction<TData> | null | undefined;
interface RowDataTransaction<TData = any> {
// Index to add rows
addIndex?: number | null;
// Rows to add
add?: TData[] | null;
// Rows to remove
remove?: TData[] | null;
// Rows to update
update?: TData[] | null;
}
interface RowNodeTransaction<TData = any> {
// Row nodes added
add: IRowNode<TData>[];
// Row nodes removed
remove: IRowNode<TData>[];
// Row nodes updated
update: IRowNode<TData>[];
}
|
| Function | Same as applyTransaction except executes asynchronously for efficiency. function applyTransactionAsync(
rowDataTransaction: RowDataTransaction<TData>,
callback?: (res: RowNodeTransaction<TData>) => void
): void;
interface RowDataTransaction<TData = any> {
// Index to add rows
addIndex?: number | null;
// Rows to add
add?: TData[] | null;
// Rows to remove
remove?: TData[] | null;
// Rows to update
update?: TData[] | null;
}
interface RowNodeTransaction<TData = any> {
// Row nodes added
add: IRowNode<TData>[];
// Row nodes removed
remove: IRowNode<TData>[];
// Row nodes updated
update: IRowNode<TData>[];
}
|
| Function | Executes any remaining asynchronous grid transactions, if any are waiting to be executed. function flushAsyncTransactions(): void;
|
| Function | Refresh the Client-Side Row Model, executing the grouping, filtering and sorting again. Optionally provide the step you wish the refresh to apply from. Defaults to everything .
function refreshClientSideRowModel(
step?: ClientSideRowModelStep
): any;
type ClientSideRowModelStep =
'everything'
| 'group'
| 'filter'
| 'pivot'
| 'aggregate'
| 'sort'
| 'map'
|
See Infinite Row Model for more information.
| Function | Set new datasource for Infinite Row Model. function setDatasource(
datasource: IDatasource
): void;
interface IDatasource {
// If you know up front how many rows are in the dataset, set it here. Otherwise leave blank.
rowCount?: number;
// Callback the grid calls that you implement to fetch rows from the server.
getRows(params: IGetRowsParams): void;
// Optional destroy method, if your datasource has state it needs to clean up.
destroy?(): void;
}
interface IGetRowsParams {
// The first row index to get.
startRow: number;
// The first row index to NOT get.
endRow: number;
// Callback to call for the result when successful.
successCallback(rowsThisBlock: any[], lastRow?: number): void;
// Callback to call when the request fails.
failCallback(): void;
// If doing server side sorting, contains the sort model
sortModel: SortModelItem[];
// If doing server side filtering, contains the filter model
filterModel: any;
// The context as provided on `gridOptions.context`
context: any;
}
interface SortModelItem {
// Column Id to apply the sort to.
colId: string;
// Sort direction
sort: 'asc' | 'desc';
}
|
| Function | Marks all the currently loaded blocks in the cache for reload. If you have 10 blocks in the cache, all 10 will be marked for reload. The old data will continue to be displayed until the new data is loaded.
function refreshInfiniteCache(): void;
|
| Function | Purges the cache. The grid is then told to refresh. Only the blocks required to display the current data on screen are fetched (typically no more than 2). The grid will display nothing while the new blocks are loaded. Use this to immediately remove the old data from the user.
function purgeInfiniteCache(): void;
|
| Function | The row count defines how many rows the grid allows scrolling to. function getInfiniteRowCount(): number | undefined;
|
| Function | Returns true if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll. function isLastRowIndexKnown(): boolean | undefined;
|
| Function | Sets the rowCount and maxRowFound properties. The second parameter, maxRowFound , is optional and if left out, only rowCount is set. Set rowCount to adjust the height of the vertical scroll. Set maxRowFound to enable / disable searching for more rows. Use this method if you add or remove rows into the dataset and need to reset the number of rows or instruct the grid that the entire row count is no longer known.
function setRowCount(
rowCount: number,
maxRowFound?: boolean
): void;
|
| Function | Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working.
function getCacheBlockState(): any;
|
RowModel: Server-Side
See Server-Side Row Model for more information.
| Function | Set new datasource for Server-Side Row Model. function setServerSideDatasource(
datasource: IServerSideDatasource
): void;
interface IServerSideDatasource {
// Grid calls `getRows` when it requires more rows as specified in the params.
// Params object contains callbacks for responding to the request.
getRows(params: IServerSideGetRowsParams): void;
// Optional method, if your datasource has state it needs to clean up.
destroy?(): void;
}
interface IServerSideGetRowsParams<TData = any, TContext = any> {
// Details for the request. A simple object that can be converted to JSON.
request: IServerSideGetRowsRequest;
// The parent row node. The RootNode (level -1) if request is top level.
// This is NOT part fo the request as it cannot be serialised to JSON (a rowNode has methods).
parentNode: IRowNode;
// Success callback, pass the rows back to the grid that were requested.
success(params: LoadSuccessParams): void;
// Fail callback, tell the grid the call failed so it can adjust it's state.
fail(): void;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: TContext;
}
interface IServerSideGetRowsRequest {
// First row requested or undefined for all rows.
startRow: number | undefined;
// Index after the last row required row or undefined for all rows.
endRow: number | undefined;
// Columns that are currently row grouped.
rowGroupCols: ColumnVO[];
// Columns that have aggregations on them.
valueCols: ColumnVO[];
// Columns that have pivot on them.
pivotCols: ColumnVO[];
// Defines if pivot mode is on or off.
pivotMode: boolean;
// What groups the user is viewing.
groupKeys: string[];
// If filtering, what the filter model is.
filterModel: any;
// If sorting, what the sort model is.
sortModel: SortModelItem[];
}
interface ColumnVO {
id: string;
displayName: string;
field?: string;
aggFunc?: string;
}
interface SortModelItem {
// Column Id to apply the sort to.
colId: string;
// Sort direction
sort: 'asc' | 'desc';
}
interface LoadSuccessParams {
// Data retrieved from the server as requested by the grid.
rowData: any[];
// The last row, if known, to help Infinite Scroll.
rowCount?: number;
// Any extra information for the grid to associate with this load.
groupLevelInfo?: any;
}
|
| Function | Updates the cacheBlockSize when requesting data from the server if suppressServerSideInfiniteScroll is not enabled. Note this purges all the cached data and reloads all the rows of the grid. function setCacheBlockSize(blockSize: number): void;
|
| Function | Sets the rowCount and maxRowFound properties. The second parameter, maxRowFound , is optional and if left out, only rowCount is set. Set rowCount to adjust the height of the vertical scroll. Set maxRowFound to enable / disable searching for more rows. Use this method if you add or remove rows into the dataset and need to reset the number of rows or instruct the grid that the entire row count is no longer known.
function setRowCount(
rowCount: number,
maxRowFound?: boolean
): void;
|
| Function | Refresh a server-side store level. If you pass no parameters, then the top level store is refreshed. To refresh a child level, pass in the string of keys to get to the desired level. Once the store refresh is complete, the storeRefreshed event is fired.
See Purging Groups. function refreshServerSide(
params?: RefreshServerSideParams
): void;
interface RefreshServerSideParams {
// List of group keys, pointing to the level to refresh.
// For example, to purge two levels down under 'Canada'and then '2002', pass in the string array ['Canada','2002'].
// If no route is passed, or an empty array, then the top level is refreshed.
route?: string[];
// If true, then all rows at the level getting refreshed are immediately destroyed and 'loading' rows will appear.
// If false, then all rows at the level getting refreshed are kept until rows are loaded (no 'loading' rows appear).
purge?: boolean;
}
|
| Function | Returns info on all server side group levels. See Store State. function getServerSideGroupLevelState(): ServerSideGroupLevelState[];
interface ServerSideGroupLevelState {
// True if suppressing infinite scrolling and loading all the data at the current level
suppressInfiniteScroll: boolean;
// The route that identifies this level.
route: string[];
// How many rows the level has. This includes 'loading rows'.
rowCount: number;
// Infinite Scroll only.
// Whether the last row index is know.
//
lastRowIndexKnown?: boolean;
// Any extra info provided to the level, when data was loaded.
info?: any;
//Infinite Scroll only.
// Max blocks allowed in the infinite cache.
maxBlocksInCache?: number;
// Infinite Scroll only.
// The size (number of rows) of each infinite cache block.
cacheBlockSize?: number;
}
|
| Function | Gets all failed server side loads to retry. See Retry Loads. function retryServerSideLoads(): void;
|
| Function | Apply transactions to the server side row model. See Transactions. function applyServerSideTransaction(
transaction: ServerSideTransaction
): ServerSideTransactionResult | undefined;
interface ServerSideTransaction {
// The Row Store to apply the transaction to, ie what group level.
// eg ['Ireland','2002'] to update the child store found after expanding Ireland and 2002 groups.
// Passing in blank to empty applies the transaction to the top level.
route?: string[];
// Index position to add at. If missing, rows will be added to the end.
addIndex?: number;
// Rows to add
add?: any[];
// Rows to remove
remove?: any[];
// Rows to update
update?: any[];
}
interface ServerSideTransactionResult {
// The status of applying the transaction.
status: ServerSideTransactionResultStatus;
// If rows were added, the newly created Row Nodes for those rows.
add?: IRowNode[];
// If rows were removed, the deleted Row Nodes.
remove?: IRowNode[];
// If rows were updated, the updated Row Nodes.
update?: IRowNode[];
}
enum ServerSideTransactionResultStatus {
// Transaction was successfully applied
Applied = 'Applied'
// Store was not found, transaction not applied.
// Either invalid route, or the parent row has not yet been expanded.
StoreNotFound = 'StoreNotFound'
// Store is loading, transaction not applied.
StoreLoading = 'StoreLoading'
// Store is loading (as max loads exceeded), transaction not applied.
StoreWaitingToLoad = 'StoreWaitingToLoad'
// Store load attempt failed, transaction not applied.
StoreLoadingFailed = 'StoreLoadingFailed'
// Store is type Partial, which doesn't accept transactions
StoreWrongType = 'StoreWrongType'
// Transaction was cancelled, due to grid.
// Callback isApplyServerSideTransaction() returning false
Cancelled = 'Cancelled'
}
|
| Function | Batch apply transactions to the server side row model. See Transactions. function applyServerSideTransactionAsync(
transaction: ServerSideTransaction,
callback?: (res: ServerSideTransactionResult) => void
): void;
interface ServerSideTransaction {
// The Row Store to apply the transaction to, ie what group level.
// eg ['Ireland','2002'] to update the child store found after expanding Ireland and 2002 groups.
// Passing in blank to empty applies the transaction to the top level.
route?: string[];
// Index position to add at. If missing, rows will be added to the end.
addIndex?: number;
// Rows to add
add?: any[];
// Rows to remove
remove?: any[];
// Rows to update
update?: any[];
}
interface ServerSideTransactionResult {
// The status of applying the transaction.
status: ServerSideTransactionResultStatus;
// If rows were added, the newly created Row Nodes for those rows.
add?: IRowNode[];
// If rows were removed, the deleted Row Nodes.
remove?: IRowNode[];
// If rows were updated, the updated Row Nodes.
update?: IRowNode[];
}
enum ServerSideTransactionResultStatus {
// Transaction was successfully applied
Applied = 'Applied'
// Store was not found, transaction not applied.
// Either invalid route, or the parent row has not yet been expanded.
StoreNotFound = 'StoreNotFound'
// Store is loading, transaction not applied.
StoreLoading = 'StoreLoading'
// Store is loading (as max loads exceeded), transaction not applied.
StoreWaitingToLoad = 'StoreWaitingToLoad'
// Store load attempt failed, transaction not applied.
StoreLoadingFailed = 'StoreLoadingFailed'
// Store is type Partial, which doesn't accept transactions
StoreWrongType = 'StoreWrongType'
// Transaction was cancelled, due to grid.
// Callback isApplyServerSideTransaction() returning false
Cancelled = 'Cancelled'
}
|
| Function | Returns an object containing rules matching the selected rows in the SSRM. If groupSelectsChildren=false the returned object will be flat, and will conform to IServerSideSelectionState. If groupSelectsChildren=true the retuned object will be hierarchical, and will conform to IServerSideGroupSelectionState.
See Selection. function getServerSideSelectionState(): IServerSideSelectionState | IServerSideGroupSelectionState | null;
interface IServerSideSelectionState {
selectAll: boolean;
toggledNodes: string[];
}
interface IServerSideGroupSelectionState {
nodeId?: string;
selectAllChildren?: boolean;
toggledNodes?: IServerSideGroupSelectionState[];
}
|
| Function | Set the rules matching the selected rows in the SSRM. If groupSelectsChildren=false the param will be flat, and should conform to IServerSideSelectionState. If groupSelectsChildren=true the param will be hierarchical, and should conform to IServerSideGroupSelectionState.
See Selection. function setServerSideSelectionState(
state: IServerSideSelectionState | IServerSideGroupSelectionState
): void;
interface IServerSideSelectionState {
selectAll: boolean;
toggledNodes: string[];
}
interface IServerSideGroupSelectionState {
nodeId?: string;
selectAllChildren?: boolean;
toggledNodes?: IServerSideGroupSelectionState[];
}
|
| Function | Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working.
See Cache Block State. function getCacheBlockState(): any;
|
RowModel: Viewport
See Viewport Row Model for more information.
| Function | Set new datasource for Viewport Row Model. function setViewportDatasource(
viewportDatasource: IViewportDatasource
): void;
interface IViewportDatasource {
// Gets called exactly once before viewPort is used. Passes methods to be used to tell viewPort of data loads / changes.
init(params: IViewportDatasourceParams): void;
// Tell the viewport what the scroll position of the grid is, so it knows what rows it has to get.
setViewportRange(firstRow: number, lastRow: number): void;
// Gets called once when viewPort is no longer used. If you need to do any cleanup, do it here.
destroy?(): void;
}
interface IViewportDatasourceParams {
// Datasource calls this method when the total row count changes. This in turn sets the height of the grids vertical scroll.
setRowCount: (count: number, keepRenderedRows?: boolean) => void;
// Datasource calls this when new data arrives. The grid then updates the provided rows. The rows are mapped [rowIndex]=>rowData].
setRowData: (rowData: { [key: number]: any; }) => void;
// Datasource calls this when it wants a row node - typically used when it wants to update the row node.
getRow: (rowIndex: number) => IRowNode;
}
|
See Scrolling for more information.
| Function | If true , the horizontal scrollbar will always be present, even if not required. Otherwise, it will only be displayed when necessary. function setAlwaysShowHorizontalScroll(show: boolean): void;
|
| Function | If true , the vertical scrollbar will always be present, even if not required. Otherwise it will only be displayed when necessary. function setAlwaysShowVerticalScroll(show: boolean): void;
|
| Function | Vertically scrolls the grid until the provided row index is inside the visible viewport. If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport. This will have no effect before the firstDataRendered event has fired.
See firstDataRendered event. function ensureIndexVisible(
index: number,
position?: 'top' | 'bottom' | 'middle' | null
): void;
|
| Function | Vertically scrolls the grid until the provided row (or a row matching the provided comparator) is inside the visible viewport. If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport. This will have no effect before the firstDataRendered event has fired.
See firstDataRendered event. function ensureNodeVisible(
nodeSelector: TData | IRowNode<TData> | ((row: IRowNode<TData>) => boolean),
position: 'top' | 'bottom' | 'middle' | null = null
): void;
|
| Function | Ensures the column is visible by scrolling the table if needed. This will have no effect before the firstDataRendered event has fired.
key - The column to ensure visible
position - Where the column will be positioned. auto - Scrolls the minimum amount to make sure the column is visible. start - Scrolls the column to the start of the viewport. middle - Scrolls the column to the middle of the viewport. end - Scrolls the column to the end of the viewport.
See firstDataRendered event. function ensureColumnVisible(
key: string | Column,
position: 'auto' | 'start' | 'middle' | 'end' = 'auto'
): void;
|
| Function | Returns an object with two properties: left : The left pixel position of the current scroll in the grid right : The right pixel position of the current scroll in the grid
function getHorizontalPixelRange(): { left: number, right: number; };
|
| Function | Returns an object with two properties: top : The top pixel position of the current scroll in the grid bottom : The bottom pixel position of the current scroll in the grid
function getVerticalPixelRange(): { top: number, bottom: number; };
|
Selection
See Selection Overview for more information.
| Function | Select all rows, regardless of filtering and rows that are not visible due to grouping being enabled and their groups not expanded.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAll'
function selectAll(
source: SelectionEventSourceType = 'apiSelectAll'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Clear all row selections, regardless of filtering.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAll'
function deselectAll(
source: SelectionEventSourceType = 'apiSelectAll'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Select all filtered rows.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAllFiltered'
function selectAllFiltered(
source: SelectionEventSourceType = 'apiSelectAllFiltered'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Clear all filtered selections.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAllFiltered'
function deselectAllFiltered(
source: SelectionEventSourceType = 'apiSelectAllFiltered'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Select all rows on the current page.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAllCurrentPage'
function selectAllOnCurrentPage(
source: SelectionEventSourceType = 'apiSelectAllCurrentPage'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Clear all filtered on the current page.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAllCurrentPage'
function deselectAllOnCurrentPage(
source: SelectionEventSourceType = 'apiSelectAllCurrentPage'
): void;
type SelectionEventSourceType =
'api'
| 'apiSelectAll'
| 'apiSelectAllFiltered'
| 'apiSelectAllCurrentPage'
| 'checkboxSelected'
| 'rowClicked'
| 'rowDataChanged'
| 'rowGroupChanged'
| 'selectableChanged'
| 'spacePressed'
| 'uiSelectAll'
| 'uiSelectAllFiltered'
| 'uiSelectAllCurrentPage'
|
| Function | Returns an unsorted list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed.
function getSelectedNodes(): IRowNode<TData>[];
|
| Function | Returns an unsorted list of selected rows (i.e. row data that you provided). function getSelectedRows(): TData[];
|
| Function | Returns a list of all selected nodes at 'best cost', a feature to be used with groups / trees. If a group has all its children selected, then the group appears in the result, but not the children. Designed for use with 'children' as the group selection type, where groups don't actually appear in the selection normally.
function getBestCostNodeSelection(): IRowNode<TData>[] | undefined;
|
| Function | Returns the list of selected cell ranges. function getCellRanges(): CellRange[] | null;
interface CellRange {
id?: string;
type?: CellRangeType;
// The start row of the range
startRow?: RowPosition;
// The end row of the range
endRow?: RowPosition;
// The columns in the range
columns: Column[];
// The start column for the range
startColumn: Column;
}
enum CellRangeType {
VALUE
DIMENSION
}
interface RowPosition {
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | Adds the provided cell range to the selected ranges. function addCellRange(
params: CellRangeParams
): void;
interface CellRangeParams {
// Start row index
rowStartIndex: number | null;
// Pinned state of start row. Either 'top', 'bottom' or null
rowStartPinned?: RowPinnedType;
// End row index
rowEndIndex: number | null;
// Pinned state of end row. Either 'top', 'bottom' or null
rowEndPinned?: RowPinnedType;
// Starting column for range
columnStart?: string | Column;
// End column for range
columnEnd?: string | Column;
// Specify Columns to include instead of using `columnStart` and `columnEnd`
columns?: (string | Column)[];
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| Function | Clears the selected ranges. function clearRangeSelection(): void;
|
| Function | Sets the suppressRowClickSelection property. function setSuppressRowClickSelection(value: boolean): void;
|
| Function | function setEnableCellTextSelection(selectable: boolean): void;
|
| setFillHandleDirection
Function | Sets the preferred direction for the selection fill handle. See Fill Handle. function setFillHandleDirection(
direction: 'x' | 'y' | 'xy'
): void;
|
Sorting
See Row Sorting for more information.
| Function | Gets the grid to act as if the sort was changed. Useful if you update some values and want to get the grid to reorder them according to the new values.
function onSortChanged(): void;
|
| Function | function setDeltaSort(enable: boolean): void;
|
Undo / Redo
See Undo/Redo Edits for more information.
| Function | Reverts the last cell edit. function undoCellEditing(): void;
|
| Function | Re-applies the most recently undone cell edit. function redoCellEditing(): void;
|
| Function | Returns current number of available cell edit undo operations. function getCurrentUndoSize(): number;
|
| Function | Returns current number of available cell edit redo operations. function getCurrentRedoSize(): number;
|