Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridRow Object (aka Row Node)

A Row Node represents one row of data.

The Row Node will contain a reference to the data item your application provided as well as other runtime information about the row. The Row Node contains attributes, methods and emits events. Additional attributes are used if the Row Node is a group.

If using Typescript, Row Nodes' support a generic data type via IRowNode<TData>. If not set TData defaults to any. See Typescript Generics for more details.

All Row Node Attributes

id
string | undefined
Unique ID for the node. Either provided by the application, or generated by the grid if not.
data
TData | undefined
The data as provided by the application. Can be undefined when using row grouping or during grid initialisation.
displayed
boolean
This will be true if it has a rowIndex assigned, otherwise false.
rowPinned
RowPinnedType
Either 'top' or 'bottom' if row pinned, otherwise undefined or null. 
rowPinned: RowPinnedType;

type RowPinnedType = 
      'top' 
    | 'bottom' 
    | null 
    | undefined
selectable
boolean
Is this row selectable.
master
boolean
true if this row is a master row, part of master / detail (ie row can be expanded to show detail).
detail
boolean
true if this row is a detail row, part of master / detail (ie child row of an expanded master row).
rowHeight
number | null | undefined
The height, in pixels, of this row.
rowTop
number | null
The row top position in pixels.
group
boolean | undefined
true if this node is a group node (i.e. it has children)
parent
IRowNode | null
The parent node to this node, or empty if top level.
firstChild
boolean
true if this is the first child in this group. Changes when data is sorted.
lastChild
boolean
true if this is the last child in this group. Changes when data is sorted.
childIndex
number
Index of this row with respect to its parent when grouping. Changes when data is sorted.
level
number
How many levels this node is from the top when grouping.
uiLevel
number
How many levels this node is from the top when grouping in the UI (only different to parent when groupRemoveSingleChildren=true).
rowIndex
number | null
The current row index. If the row is filtered out or in a collapsed group, this value will be null.
stub
boolean
Used by server-side row model. true if this row node is a stub. A stub is a placeholder row with loading icon while waiting from row to be loaded.
failedLoad
boolean
Used by server side row model, true if this row node failed a load.
quickFilterAggregateText
string | null
If using quick filter, stores a string representation of the row for searching against.

Group Node Attributes

groupData
{ [key: string]: any | null; } | null
If using row grouping, contains the group values for this group.
aggData
any
If using row grouping and aggregation, contains the aggregation data.
key
string | null
The key value for this group.
field
string | null
The field we are grouping on from our row data.
rowGroupColumn
Column | null
The row group column used for this group.
rowGroupIndex
number | null
If doing in-memory (client-side) grouping, this is the index of the group column this cell is for. This will always be the same as the level, unless we are collapsing groups, i.e. groupRemoveSingleChildren=true.
expanded
boolean
true if group is expanded, otherwise false.
boolean
true if row is a footer. Footers have group = true and footer = true.
allLeafChildren
IRowNode[]
All lowest level nodes beneath this node, no groups.
childrenAfterGroup
IRowNode[] | null
Children of this group. If multi levels of grouping, shows only immediate children.
childrenAfterFilter
IRowNode[] | null
Filtered children of this group.
childrenAfterSort
IRowNode[] | null
Sorted children of this group.
allChildrenCount
number | null
Number of children and grand children.
leafGroup
boolean
true if this node is a group and the group is the bottom level in the tree.
sibling
IRowNode
If using footers, reference to the footer node for this group.

Row Node Methods

setSelected
Function
Select (or deselect) the node.
  • newValue - true for selection, false for deselection.
  • clearSelection - If selecting, then passing true will select the node exclusively (i.e. NOT do multi select). If doing deselection, clearSelection has no impact.
  • suppressFinishActions - Pass true to prevent the selectionChanged from being fired. Note that the rowSelected event will still be fired. 
function setSelected(
    newValue: boolean,
    clearSelection?: boolean,
    suppressFinishActions?: boolean,
    source?: SelectionEventSourceType
): void;

type SelectionEventSourceType = 
      'api' 
    | 'apiSelectAll' 
    | 'apiSelectAllFiltered' 
    | 'apiSelectAllCurrentPage' 
    | 'checkboxSelected' 
    | 'rowClicked' 
    | 'rowDataChanged' 
    | 'rowGroupChanged' 
    | 'selectableChanged' 
    | 'spacePressed' 
    | 'uiSelectAll' 
    | 'uiSelectAllFiltered' 
    | 'uiSelectAllCurrentPage'
isSelected
Function
Returns:
  • true if node is selected.
  • false if the node isn't selected.
  • undefined if it's partially selected (group where not all children are selected). 
    • function isSelected(): boolean | undefined;
    isRowPinned
    Function
    Returns:
  • true if node is either pinned to the top or bottom.
  • false if the node isn't pinned. 
    • function isRowPinned(): boolean;
    isExpandable
    Function
    Returns:
  • true if the node can be expanded, i.e it is a group or master row.
  • false if the node cannot be expanded. 
    • function isExpandable(): boolean;
    setExpanded
    Function
    Set the expanded state of this rowNode. Pass true to expand and false to collapse. 
    function setExpanded(
    expanded: boolean,
    e?: MouseEvent | KeyboardEvent
): void;
    isHovered
    Function
    Returns:
  • true if the node is currently hovered.
  • false if the node is not hovered. 
    • function isHovered(): boolean;
    isFullWidthCell
    Function
    Returns:
  • true if the node is a full width cell.
  • false if the node is not a full width cell. 
    • function isFullWidthCell(): boolean;
    addEventListener
    Function
    Add an event listener. 
    function addEventListener(
    eventType: RowNodeEventType,
    listener: Function
): void;

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    removeEventListener
    Function
    Remove event listener. 
    function removeEventListener(
    eventType: RowNodeEventType,
    listener: Function
): void;

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    resetQuickFilterAggregateText
    Function
    The first time quickFilter runs, the grid creates a one-off string representation of the row. This string is then used for the quick filter instead of hitting each column separately. When you edit, using grid editing, this string gets cleared down. However if you edit without using grid editing, you will need to clear this string down for the row to be updated with the new values. Otherwise new values will not work with the quickFilter. 
    function resetQuickFilterAggregateText(): void;
    depthFirstSearch
    Function
    Perform a depth-first search of this node and its children. 
    function depthFirstSearch(
    callback: (rowNode: IRowNode<TData>) => void
): void;
    setRowHeight
    Function
    Sets the row height. Call if you want to change the height initially assigned to the row. After calling, you must call api.onRowHeightChanged() so the grid knows it needs to work out the placement of the rows.
    rowHeight - new height of the row
    estimated - is this an estimated height.
    Default: false 
    function setRowHeight(
    rowHeight: number | undefined | null,
    estimated?: boolean
): void;
    updateData
    Function
    Updates the data on the rowNode. When this method is called, the grid will refresh the entire rendered row if it is displayed. 
    function updateData(data: TData): void;
    setData
    Function
    Replaces the data on the rowNode. When this method is called, the grid will refresh the entire rendered row if it is displayed. See Client-Side Single Row Update.
    function setData(data: TData): void;
    setDataValue
    Function
    Replaces the value on the rowNode for the specified column. When complete, the grid will refresh the rendered cell on the required row only. Note: This method on fires onCellEditRequest when the Grid is on Read Only mode.
    colKey The column where the value should be updated
    newValue The new value
    eventSource The source of the event
    Returns: True if the value was changed, otherwise False. See Client-Side Single Cell Update.
    function setDataValue(
    colKey: string | Column,
    newValue: any,
    eventSource?: string
): boolean;
    getRoute
    Function
    Returns the route of the row node. If the Row Node is a group, it returns the route to that Row Node. If the Row Node is not a group, it returns undefined. See Server-Side Model: Open by Default.
    function getRoute(): string[] | undefined;

    Row Node Events

    All events fired by the rowNode are synchronous (events are normally asynchronous). The grid is also listening for these events internally. This means that when you receive an event, the grid may still have some work to do (e.g. if rowTop changed, the grid UI may still have to update to reflect this change). It is also best you do not call any grid API functions while receiving events from the rowNode (as the grid is still processing). Instead, it is best to put your logic into a timeout and call the grid in another VM tick.

    When adding event listeners to a row, they will stay with the row until the row is destroyed. This means if the row is taken out of memory (pagination or virtual paging) then the listener will be removed. Likewise, if you set new data into the grid, all listeners on the old data will be removed.

    Be careful when adding listeners to rowNodes in cell renderers that you remove the listener when the rendered row is destroyed due to row virtualisation. You can cater for this as follows:

    init(params: ICellRendererParams) {
    // add listener
    var selectionChangedCallback = () => {
        // some logic on selection changed here
        console.log('node selected = ' + params.node.isSelected());
    };

    params.node.addEventListener('rowSelected', selectionChangedCallback);

    // remove listener on destroy
    params.api.addRenderedRowListener('virtualRowRemoved', params.rowIndex, () => {
        params.node.removeEventListener('rowSelected', selectionChangedCallback);
    }
}

    Events on Row Nodes

    The following events can be listened to on rowNodes:

    rowSelected
    RowNodeEvent
    Row was selected or unselected.
    rowSelected = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    mouseEnter
    RowNodeEvent
    Mouse has entered the row.
    mouseEnter = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    mouseLeave
    RowNodeEvent
    Mouse has left the row.
    mouseLeave = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    cellChanged
    CellChangedEvent
    One cell value has changed.
    cellChanged = (
    event: CellChangedEvent
) => void;

interface CellChangedEvent<TData = any> {
  column: Column;
  newValue: TData | undefined;
  oldValue: TData | undefined;
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    allChildrenCountChanged
    RowNodeEvent
    allChildrenCount has changed.
    allChildrenCountChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    dataChanged
    DataChangedEvent
    rowData has changed.
    dataChanged = (
    event: DataChangedEvent
) => void;

interface DataChangedEvent<TData = any> {
  oldData: TData | undefined;
  newData: TData | undefined;
  update: boolean;
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    heightChanged
    RowNodeEvent
    rowHeight has changed.
    heightChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    topChanged
    RowNodeEvent
    rowTop has changed.
    topChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    firstChildChanged
    RowNodeEvent
    firstChild has changed.
    firstChildChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    lastChildChanged
    RowNodeEvent
    lastChild has changed.
    lastChildChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    childIndexChanged
    RowNodeEvent
    childIndex has changed.
    childIndexChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    rowIndexChanged
    RowNodeEvent
    rowIndex has changed.
    rowIndexChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    expandedChanged
    RowNodeEvent
    expanded has changed.
    expandedChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'
    uiLevelChanged
    RowNodeEvent
    uiLevel has changed.
    uiLevelChanged = (event: RowNodeEvent) => void;

interface RowNodeEvent<TData = any> {
  // Event identifier 
  type: RowNodeEventType;
  node: IRowNode<TData>;
}

type RowNodeEventType = 
      'rowSelected' 
    | 'selectableChanged' 
    | 'displayedChanged' 
    | 'dataChanged' 
    | 'cellChanged' 
    | 'masterChanged' 
    | 'heightChanged' 
    | 'topChanged' 
    | 'groupChanged' 
    | 'allChildrenCountChanged' 
    | 'firstChildChanged' 
    | 'lastChildChanged' 
    | 'childIndexChanged' 
    | 'rowIndexChanged' 
    | 'expandedChanged' 
    | 'hasChildrenChanged' 
    | 'uiLevelChanged' 
    | 'rowHighlightChanged' 
    | 'mouseEnter' 
    | 'mouseLeave' 
    | 'draggingChanged'