Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Row Node

A rowNode is an ag-Grid representation of one row of data. The rowNode will contain a reference to the data item your application provided as well as other ag-Grid runtime information about the row. The rowNode contains attributes. Additional attributes are used if the node is a group.

All Node Attributes

  • id: Unique ID for the node. Either provided by the application, or generated by the grid if not.
  • data: The data as provided by the application.
  • parent: The parent node to this node, or empty if top level.
  • level: How many levels this node is from the top when grouping.
  • uiLevel: How many levels this node is from the top when grouping in the UI (only different to 'parent' when property groupRemoveSingleChildren=true.
  • group: True if this node is a group node (ie has children).
  • firstChild: True if this is the first child in this group
  • lastChild: True if this is the last child in this group
  • childIndex: The index of this node in the group.
  • rowPinned: 'top' or 'bottom' if pinned row, otherwise null or undefined.
  • canFlower: True if this node can flower (ie can be expanded, but has no direct children).
  • childFlower: The child flower of this node.
  • childIndex: Index of this row with respect to it's parent when grouping. Changes when data is sorted.
  • firstChild: True if this is the first child in this group. Changes when data is sorted.
  • lastChild: True if this is the last child in this group. Changes when data is sorted.
  • stub: Used by enterprise 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: The row height in pixels.
  • rowTop: The row top position in pixels.
  • quickFilterAggregateText: If using quick filter, stores a string representation of the row for searching against.

Group Node Attributes

  • groupData: If using grid grouping, contains the group values for this group.
  • aggData: If using grid grouping and aggregation, contains the aggregation data.
  • key: The key for the grouping eg Ireland, UK, USA.
  • field: The field (string) we are grouping on eg 'country'.
  • rowGroupColumn: The row group column used for this group, eg the Country column instance.
  • rowGroupIndex: If doing in memory 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 ie groupRemoveSingleChildren=true
  • expanded: True if group is expanded, otherwise false.
  • footer: 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 of children and grand children.
  • leafGroup: True if this node is a group and the group is the bottom level in the tree.
  • sibling: If doing footers, reference to the footer node for this group.

Row Node Methods

  • setSelected(newValue: boolean, clearSelection: boolean): Select (or deselect) the node. newValue=true for selection, newValue=false for deselection. If selecting, then passing true for clearSelection will select the node exclusively (ie NOT do multi select). If doing deselection, clearSelection has no impact.
  • isSelected(): Returns true if node is selected, otherwise false.
  • addEventListener(eventType: string, listener: Function): Add an event listener. Currently only rowSelected event supported.
  • removeEventListener(eventType: string, listener: Function) Remove event listener.
  • resetQuickFilterAggregateText(): First time quickFilter runs, the grid creates a one off string representation of the row. This one 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.
  • depthFirstSearch(callback): Do a tree search dept first search of this node and it's children.
  • setRowHeight(height): 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.
  • setData(newData): Sets the data for this item. Results in the entire row getting refreshed.

Events on Row Nodes

The following events can be listened to on rowNodes.

  • rowSelected: Row was selected or unselected.
  • mouseEnter: Mouse has entered the row.
  • mouseLeave: Mouse has left the row.
  • cellChanged: One cell value has changed. This can be result of any changes to data, data or data.
  • allChildrenCountChanged: allChildrenCount has changed.
  • dataChanged: rowData has changed.
  • heightChanged: rowHeight has changed.
  • topChanged: rowTop has changed.
  • firstChildChanged: firstChild has changed.
  • lastChildChanged: lastChild has changed.
  • childIndexChanged: childIndex has changed.
  • rowIndexChanged: rowIndex has changed.
  • expandedChanged: expanded has changed.
  • uiLevelChanged: uiLevel has changed.

All events fired by the rowNode are synchronous (events are normally asynchronous). The grid is also listening on these events internally. What that means is when you receive an event, the grid may still have some work to do (eg 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 put your logic into a timeout and call the grid in another VM turn.

When adding event listeners to a row, they will stay with the row until the row is destroyed. So 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 adding listeners to rowNodes in cellRenderers that you remove the listener when the rendered row in 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;
}