JavaScript 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 | 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. |
displayed | 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 | 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 groupRemoveSingleChildren=true ). |
group | true if this node is a group node (i.e. has children). |
rowPinned | 'top' or 'bottom' if pinned row, otherwise null or undefined . |
childIndex | Index of this row with respect to its 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 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 | The row height in pixels. |
rowIndex | The current row index. If the row is filtered out or in a collapsed group, this value will be null . |
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 e.g. Ireland, UK, USA. |
field | The field (string) we are grouping on e.g. 'country' . |
rowGroupColumn | The row group column used for this group, e.g. the Country column instance. |
rowGroupIndex | 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 | 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 grandchildren. |
leafGroup | 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(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 (i.e. NOT do multi select). If doing deselection, clearSelection has no impact. |
isSelected() | Returns true if node is selected, false if the not isn't selected or undefined if it's partially selected (group where not all children are selected). |
addEventListener(eventType: string, listener: Function) | Add an event listener. Currently only rowSelected event supported. |
removeEventListener(eventType: string, listener: Function) | Remove event listener. |
resetQuickFilterAggregateText() | 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 . |
depthFirstSearch(callback) | Perform a depth-first search of this node and its 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. |
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. |
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;
}
Row Node IDs
Each Row Node is identified by a unique ID. The ID of the Row Node is used by the grid to identify the row and can be used by your application to look up the Row Node using the grid API getRowNode(id)
.
Grid Assigned IDs
By default IDs are assigned by the grid when data is set into the grid. The grid uses a sequence starting at 0 and incrementing by 1 to assign row IDs, so if for example there are three rows they will have IDs of 0
, 1
and 2
. The row ID is constant for as long as the data item lives in the grid.
When using Row Grouping the grid assigns IDs to the row groups as the row groups are created. It uses another sequence again starting at 0 and incrementing by 1 and also prefixes the sequence number with row-group-
. So if for example there are three groups they will have IDs of row-group-0
, row-group-1
and row-group-2
. If the groups are destroyed (eg the user removes the grouping) and recreated again (the user groups by a column) then new ID's will be created e.g. row-group-3
, row-group-4
and row-group-5
. As with normal rows, the ID's for group rows do not change for as long as the row group exists, however removing and re-adding the grouping will result in new row group ID's even if the row group represents the same group as before.
Application Assigned IDs
In some applications it is useful to tell the grid what IDs to use for particular rows. For example, if you are showing employees, you could configure the grid to use the Employee ID as the row node ID. That would then enable the grid API getRowNode(id)
to be called with the Employee ID.
To get the grid to use application assigned IDs, implement the grid callback getRowNodeId()
. The callback should return back the ID for a particular piece of row data. For example, the following code snippet returns back the value of attribute 'id'
for the supplied data item:
function getRowNodeId(data) {
return data.id;
}
When providing IDs the following rules must be obeyed:
- IDs must be unique
- IDs must not change
If the attribute you are intending to use as an ID is either not unique or changes, it will cause unspecified behaviour in the grid. In other words, don't use a field that is not unique or can change.
If using Row Grouping, the grid will always assign IDs for the group level (as there is not a one-to-one mapping with application-supplied row data). The callback getRowNodeId()
is only used for non-group level rows.