Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Row 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.

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
any
The data as provided by the application.
displayed
boolean
This will be true if it has a rowIndex assigned, otherwise false.
parent
The parent node to this node, or empty if top level
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)
group
boolean | undefined
true if this node is a group node (ie has children)
rowPinned
string
Either 'top' or 'bottom' if row pinned, otherwise undefined or null.
childIndex
number
Index of this row with respect to its parent when grouping. Changes when data is sorted.
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.
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.
rowHeight
number | null | undefined
The height, in pixels, of this row
rowIndex
number | null
The current row index. If the row is filtered out or in a collapsed group, this value will be null.
rowTop
number | null
The row top position in pixels.
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 for the group eg Ireland, UK, USA
field
string | null
The field we are grouping on eg 'country'.
rowGroupColumn
The row group column used for this group, e.g. the Country column instance.
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
All lowest level nodes beneath this node, no groups.
childrenAfterGroup
Children of this group. If multi levels of grouping, shows only immediate children.
childrenAfterFilter
Filtered children of this group.
childrenAfterSort
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
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 = false,
    suppressFinishActions: boolean = false
): void;
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;
    addEventListener
    Function
    Add an event listener.
    function addEventListener(
        eventType: string,
        listener: Function
    ): void;
    removeEventListener
    Function
    Remove event listener.
    function removeEventListener(
        eventType: string,
        listener: Function
    ): void;
    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: RowNode) => 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.
    function setRowHeight(
        rowHeight: number | undefined | null,
        estimated: undefined = false
    ): void;
    setData
    Function
    Replaces the data on the rowNode. When complete, the grid will refresh the the entire rendered row if it is showing. See Client-Side Single Row Update.
    function setData(data: any): 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.
    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:

    var renderer = function(params) {
        // add listener
        var selectionChangedCallback = function () {
            // some logic on selection changed here
            console.log('node selected = ' + params.node.isSelected());
        };
    
        params.node.addEventListener(RowNode.EVENT_ROW_SELECTED, selectionChangedCallback);
    
        // remove listener on destroy
        params.addRenderedRowEventListener('renderedRowRemoved', function() {
            params.node.removeEventListener(RowNode.EVENT_ROW_SELECTED, selectionChangedCallback);
        }
    
        return params.value;
    }

    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 {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    mouseEnter
    RowNodeEvent
    Mouse has entered the row.
    mouseEnter = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    mouseLeave
    RowNodeEvent
    Mouse has left the row.
    mouseLeave = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    cellChanged
    CellChangedEvent
    One cell value has changed.
    cellChanged = (
        event: CellChangedEvent
    ) => void;
    
    interface CellChangedEvent {
      column: Column;
      newValue: any;
      oldValue: any;
      node: RowNode;
      // Event identifier 
      type: string;
    }
    allChildrenCountChanged
    RowNodeEvent
    allChildrenCount has changed.
    allChildrenCountChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    dataChanged
    DataChangedEvent
    rowData has changed.
    dataChanged = (
        event: DataChangedEvent
    ) => void;
    
    interface DataChangedEvent {
      oldData: any;
      newData: any;
      update: boolean;
      node: RowNode;
      // Event identifier 
      type: string;
    }
    heightChanged
    RowNodeEvent
    rowHeight has changed.
    heightChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    topChanged
    RowNodeEvent
    rowTop has changed.
    topChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    firstChildChanged
    RowNodeEvent
    firstChild has changed.
    firstChildChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    lastChildChanged
    RowNodeEvent
    lastChild has changed.
    lastChildChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    childIndexChanged
    RowNodeEvent
    childIndex has changed.
    childIndexChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    rowIndexChanged
    RowNodeEvent
    rowIndex has changed.
    rowIndexChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    expandedChanged
    RowNodeEvent
    expanded has changed.
    expandedChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }
    uiLevelChanged
    RowNodeEvent
    uiLevel has changed.
    uiLevelChanged = (event: RowNodeEvent) => void;
    
    interface RowNodeEvent {
      node: RowNode;
      // Event identifier 
      type: string;
    }