JavaScript Data Grid: Grid Callbacks

All of these grid callbacks are available through the GridOptions interface.

Rows

	`getBusinessKeyForNode` Function	Return a business key for the node. If implemented, each row in the DOM will have an attribute `row-id='abc'` where `abc` is what you return as the business key. This is useful for automated testing, as it provides a way for your tool to identify rows based on unique business keys. `getBusinessKeyForNode = (node: RowNode) => string;`
	`getRowNodeId` Function	Allows you to set the ID for a particular row node based on the data. Useful for selection and server side sorting and filtering for paging and virtual pagination. `getRowNodeId = (data: any) => string;`
	`processRowPostCreate` Function	Allows you to process rows after they are created, so you can do final adding of custom attributes etc. processRowPostCreate = ( params: ProcessRowParams ) => void; interface ProcessRowParams { eRow: HTMLElement; ePinnedLeftRow: HTMLElement; ePinnedRightRow: HTMLElement; rowIndex: number; node: RowNode; api: GridApi; columnApi: ColumnApi; addRenderedRowListener: (eventType: string, listener: Function) => void; // The context as provided on `gridOptions.context` context: any; }
	`isRowSelectable` Function	Callback to be used to determine which rows are selectable. By default rows are selectable, so return `false` to make a row un-selectable. See Specify Selectable Rows. `isRowSelectable = (node: RowNode) => boolean;`
	`isRowMaster` Function	Callback to be used with Master Detail to determine if a row should be a master row. If `false` is returned no detail row will exist for this row. `isRowMaster = (dataItem: any) => boolean;`

Rendering and Styling

	`getRowClass` Function	Callback version of property `rowClass`. Function should return a string or an array of strings. getRowClass = (params: RowClassParams) => string \| string[] \| undefined; interface RowClassParams { // The data associated with this row from rowData data: any; // The RowNode associated with this row node: RowNode; // The index of the row rowIndex: number; api: GridApi; columnApi: ColumnApi; // The context as provided on `gridOptions.context` context: any; // If using AngularJs, is the row's child scope, otherwise null $scope: any; }
	`getRowStyle` Function	Callback version of property `rowStyle`. Function should return an object of CSS values. getRowStyle = (params: RowClassParams) => { [cssProperty: string]: string; }; interface RowClassParams { // The data associated with this row from rowData data: any; // The RowNode associated with this row node: RowNode; // The index of the row rowIndex: number; api: GridApi; columnApi: ColumnApi; // The context as provided on `gridOptions.context` context: any; // If using AngularJs, is the row's child scope, otherwise null $scope: any; }
	`getRowHeight` Function	Callback version of property `rowHeight`. Function should return a positive number of pixels, or return `null`/`undefined` to use the default row height. getRowHeight = ( params: RowHeightParams ) => number \| undefined \| null; interface RowHeightParams { data: any; node: RowNode; api: GridApi; // The context as provided on `gridOptions.context` context: any; }
	`isFullWidthCell` Function	Tells the grid if this row should be rendered as full width. `isFullWidthCell = (rowNode: RowNode) => boolean;`

Sort and Filter

	`isExternalFilterPresent` Function	Grid calls this method to know if an external filter is present. See External Filter. `isExternalFilterPresent = () => boolean;`
	`doesExternalFilterPass` Function	Should return `true` if external filter passes, otherwise `false`. See External Filter. `doesExternalFilterPass = (node: RowNode) => boolean;`
	`postSort` Function	Callback to perform additional sorting after the grid has sorted the rows. See Post Sort. `postSort = (nodes: RowNode[]) => void;`

Row Grouping and Pivoting

	`groupRowAggNodes` Function	Callback for grouping. See Row Grouping. `groupRowAggNodes = (nodes: RowNode[]) => any;`
	`isGroupOpenByDefault` Function	(Client-side Row Model only) Allows groups to be open by default. `isGroupOpenByDefault = ( params: IsGroupOpenByDefaultParams ) => boolean; interface IsGroupOpenByDefaultParams { rowNode: RowNode; rowGroupColumn: Column; level: number; field: string; key: string; }`
	`defaultGroupOrderComparator` Function	Allows default sorting of groups. See Default Group Order. `defaultGroupOrderComparator = ( nodeA: RowNode, nodeB: RowNode ) => number;`
	`processSecondaryColDef` Function	Callback to be used with pivoting, to allow changing the second column definition. `processSecondaryColDef = (colDef: ColDef) => void;`
	`processSecondaryColGroupDef` Function	Callback to be used with pivoting, to allow changing the second column group definition. `processSecondaryColGroupDef = ( colGroupDef: ColGroupDef ) => void;`

Popup / Menus

getContextMenuItems

Function

For customising the context menu. See Context Menu.

getContextMenuItems = (
    params: GetContextMenuItemsParams
) => (string | MenuItemDef)[];

interface GetContextMenuItemsParams {
  defaultItems: string[] | undefined;
  column: Column;
  node: RowNode;
  value: any;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface MenuItemDef {
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[] | IComponent<any>;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}

getMainMenuItems

Function

For customising the main 'column header' menu. See Column Menu.

getMainMenuItems = (
    params: GetMainMenuItemsParams
) => (string | MenuItemDef)[];

interface GetMainMenuItemsParams {
  // The column that was clicked 
  column: Column;
  // List of the items that would be displayed by default 
  defaultItems: string[];
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context` 
  context: any;
}

interface MenuItemDef {
  // Name of the menu item 
  name: string;
  // It the item should be enabled / disabled 
  disabled?: boolean;
  // Shortcut (just display text, saying the shortcut here does nothing) 
  shortcut?: string;
  // Function that gets executed when item is chosen 
  action?: () => void;
  // Set to true to provide a check beside the option 
  checked?: boolean;
  // The icon to display, either a DOM element or HTML string 
  icon?: HTMLElement | string;
  // If this item is a sub menu, contains a list of menu item definitions 
  subMenu?: (MenuItemDef | string)[] | IComponent<any>;
  // CSS classes to apply to the menu item 
  cssClasses?: string[];
  // Tooltip for the menu item 
  tooltip?: string;
}

postProcessPopup

Function

Allows user to process popups after they are created. Applications can use this if they want to, for example, reposition the popup.

postProcessPopup = (
    params: PostProcessPopupParams
) => void;

interface PostProcessPopupParams {
  // If popup is for a column, this gives the Column 
  column?: Column | null;
  // If popup is for a row, this gives the RowNode 
  rowNode?: RowNode;
  // The popup we are showing 
  ePopup: HTMLElement;
  // The different types are:
  // 'contextMenu', 'columnMenu', 'aggFuncSelect', 'popupCellEditor' 
  type: string;
  // If the popup is as a result of a button click (eg menu button),
  // this is the component that the user clicked 
  eventSource?: HTMLElement | null;
  // If the popup is as a result of a click or touch,
  // this is the event - eg user showing context menu 
  mouseEvent?: MouseEvent | Touch | null;
}

Clipboard

See Clipboard

	`processCellForClipboard` Function	Allows you to process cells for the clipboard. Handy if for example you have `Date` objects that need to have a particular format if importing into Excel. processCellForClipboard = ( params: ProcessCellForExportParams ) => any; interface ProcessCellForExportParams { value: any; accumulatedRowIndex?: number; node?: RowNode \| null; column: Column; api: GridApi; columnApi: ColumnApi; // The context as provided on `gridOptions.context` context: any; type: string; }
	`processHeaderForClipboard` Function	Allows you to process header values for the clipboard. processHeaderForClipboard = ( params: ProcessHeaderForExportParams ) => any; interface ProcessHeaderForExportParams { column: Column; api: GridApi; columnApi: ColumnApi; // The context as provided on `gridOptions.context` context: any; }
	`processCellFromClipboard` Function	Allows you to process cells from the clipboard. Handy if for example you have number fields, and want to block non-numbers from getting into the grid. processCellFromClipboard = ( params: ProcessCellForExportParams ) => any; interface ProcessCellForExportParams { value: any; accumulatedRowIndex?: number; node?: RowNode \| null; column: Column; api: GridApi; columnApi: ColumnApi; // The context as provided on `gridOptions.context` context: any; type: string; }
	`sendToClipboard` Function	Allows you to get the data that would otherwise go to the clipboard. To be used when you want to control the 'copy to clipboard' operation yourself. `sendToClipboard = ( params: SendToClipboardParams ) => void; interface SendToClipboardParams { data: string; }`
	`processDataFromClipboard` Function	Allows complete control of the paste operation, including cancelling the operation (so nothing happens) or replacing the data with other data. `processDataFromClipboard = ( params: ProcessDataFromClipboardParams ) => string[][] \| null; interface ProcessDataFromClipboardParams { // 2D array of all cells from the clipboard data: string[][]; }`

Keyboard Navigation

See Keyboard Navigation

	`navigateToNextHeader` Function	Allows overriding the default behaviour for when user hits navigation (arrow) key when a header is focused. navigateToNextHeader = ( params: NavigateToNextHeaderParams ) => HeaderPosition; interface NavigateToNextHeaderParams { // The key for the arrow key pressed, // left = 'ArrowLeft', up = 'ArrowUp', right = 'ArrowRight', down = 'ArrowDown' key: string; // The header that currently has focus previousHeaderPosition: HeaderPosition \| null; // The header the grid would normally pick as the next header for this navigation nextHeaderPosition: HeaderPosition \| null; // The number of header rows present in the grid headerRowCount: number; event: KeyboardEvent; } interface HeaderPosition { // A number from 0 to n, where n is the last header row the grid is rendering headerRowIndex: number; // The grid column or column group column: Column \| ColumnGroup; }
	`tabToNextHeader` Function	Allows overriding the default behaviour for when user hits `Tab` key when a header is focused. tabToNextHeader = ( params: TabToNextHeaderParams ) => HeaderPosition; interface TabToNextHeaderParams { // True if the Shift key is also down backwards: boolean; // The header that currently has focus previousHeaderPosition: HeaderPosition \| null; // The header the grid would normally pick as the next header for this navigation nextHeaderPosition: HeaderPosition \| null; // The number of header rows present in the grid headerRowCount: number; } interface HeaderPosition { // A number from 0 to n, where n is the last header row the grid is rendering headerRowIndex: number; // The grid column or column group column: Column \| ColumnGroup; }
	`navigateToNextCell` Function	Allows overriding the default behaviour for when user hits navigation (arrow) key when a cell is focused. navigateToNextCell = ( params: NavigateToNextCellParams ) => CellPosition; interface NavigateToNextCellParams { // The keycode for the arrow key pressed: // left = 37, up = 38, right = 39, down = 40 key: number; // The cell that currently has focus previousCellPosition: CellPosition; // The cell the grid would normally pick as the next cell for navigation nextCellPosition: CellPosition \| null; event: KeyboardEvent \| null; } interface CellPosition { // 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 undefined/null (for not pinned) rowPinned: string \| null; // The grid column column: Column; }
	`tabToNextCell` Function	Allows overriding the default behaviour for when user hits `Tab` key when a cell is focused. tabToNextCell = ( params: TabToNextCellParams ) => CellPosition; interface TabToNextCellParams { // True if the Shift key is also down backwards: boolean; // True if the current cell is editing // (you may want to skip cells that are not editable, as the grid will enter the next cell in editing mode also if tabbing) editing: boolean; // The cell that currently has focus previousCellPosition: CellPosition; // The cell the grid would normally pick as the next cell for navigation nextCellPosition: CellPosition; } interface CellPosition { // 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 undefined/null (for not pinned) rowPinned: string \| null; // The grid column column: Column; }

Pagination

See Row Pagination

paginationNumberFormatter

Function

Allows user to format the numbers in the pagination panel, i.e. 'row count' and 'page number' labels. This is for pagination panel only, to format numbers inside the grid's cells (i.e. your data), then use valueFormatter in the column definitions.

paginationNumberFormatter = (
    params: PaginationNumberFormatterParams
) => string;

interface PaginationNumberFormatterParams {
  value: number;
}

Row Model: Server-Side

Callbacks for Server-Side Row Model only.

	`getChildCount` Function	Allows setting the child count for a group row. `getChildCount = (dataItem: any) => number;`
	`getServerSideStoreParams` Function	Allows providing different params for different levels of grouping. `getServerSideStoreParams = ( params: GetServerSideStoreParamsParams ) => ServerSideStoreParams; interface GetServerSideStoreParamsParams { level: number; parentRowNode?: RowNode; rowGroupColumns: Column[]; pivotColumns: Column[]; pivotMode: boolean; } interface ServerSideStoreParams { storeType?: ServerSideStoreType; maxBlocksInCache?: number; cacheBlockSize?: number; }`
	`isServerSideGroupOpenByDefault` Function	Allows groups to be open by default. `isServerSideGroupOpenByDefault = ( params: IsServerSideGroupOpenByDefaultParams ) => boolean; interface IsServerSideGroupOpenByDefaultParams { data: any; rowNode: RowNode; }`
	`isApplyServerSideTransaction` Function	Allows cancelling transactions. `isApplyServerSideTransaction = ( params: IsApplyServerSideTransactionParams ) => boolean; interface IsApplyServerSideTransactionParams { transaction: ServerSideTransaction; parentNode: RowNode; storeInfo: any; }`
	`isServerSideGroup` Function	(SSRM Tree Data) Allows specifying which rows are expandable. `isServerSideGroup = (dataItem: any) => boolean;`
	`getServerSideGroupKey` Function	(SSRM Tree Data) Allows specifying group keys. `getServerSideGroupKey = (dataItem: any) => string;`

Charts

getChartToolbarItems

Function

Callback to be used to customise the chart toolbar items. See Configuring Toolbar Items.

getChartToolbarItems = (
    params: GetChartToolbarItemsParams
) => ChartMenuOptions[];

interface GetChartToolbarItemsParams {
  defaultItems?: ChartMenuOptions[];
  api: GridApi;
  columnApi: ColumnApi;
}

type ChartMenuOptions = 
      'chartSettings' 
    | 'chartData' 
    | 'chartFormat' 
    | 'chartLink' 
    | 'chartUnlink' 
    | 'chartDownload'

Miscellaneous

getDocument

Function

Allows overriding what document is used. Currently used by Drag and Drop (may extend to other places in the future). Use this when you want the grid to use a different document than the one available on the global scope. This can happen if docking out components (something which Electron supports).

getDocument = () => Document;