Accessing Data
Each time you pass data to the grid, the grid wraps each data item
with a rowNode object.
For example if your data has 20 rows, then the grid creates 20 rowNode
objects, each rowNode wrapping one item of your data.
It is sometimes handy to access these rowNodes. One example where it is handy
is if you want to select a row, you can call rowNode.setSelected(true)
to select it.
This section details the different ways a rowNode can be accessed.
The following methods are provided for accessing the individual rowNodes.
A deeper explanation of these methods, along with examples, are provided
further down.
Accessing Row Node API Methods
| getRowNode(id) |
Returns the row node with the given ID. The row node id is the one you provide with the callback getRowNodeId(data), otherwise the id is a number auto generated by the grid when the row data is set.
|
| forEachNode((node, index)) |
Iterates through each node (row) in the grid and calls the callback for each node. This works similar to the 'forEach' method on a Javascript array. This is called for every node, ignoring any filtering or sorting applied within the grid. If using infinite row model, then gets called for each page loaded in the page cache.
|
| forEachNodeAfterFilter((node, index)) |
Similar to forEachNode, except skips any filtered out data.
|
| forEachNodeAfterFilterAndSort((node, index)) |
Similar to forEachNode, except skips any filtered out data and each the callback is called in the order the rows are displayed in the grid.
|
| forEachLeafNode((node, index)) |
Similar to forEachNode, except lists all the leaf nodes. This effectively goes through all the data that you provided the grid before the grid did any grouping. If doing tree data, then goes through all the nodes for data you provided, including nodes that have children, but excluding groups the grid created where gaps were missing in the hierarchy.
|
| getDisplayedRowAtIndex(index) |
Returns the displayed rowNode at the given index.
|
| getDisplayedRowCount() |
Returns the total number of displayed rows.
|
| getFirstDisplayedRow() |
Get the index of the first displayed row due to scrolling (includes not visible rendered rows in the buffer)
|
| getLastDisplayedRow() |
Get the index of the last displayed row due to scrolling (includes not visible rendered rows in the buffer)
|
Accessing RowNode by ID
The easiest way to get a rowNode is by its ID.
The ID is either provided by you using the grid callback getRowNodeId(),
or generated by the grid using an internal sequence.
// callback tells the grid to use the 'id' attribute for id's
// id's should always be strings
gridOptions.getRowNodeId = function(data) {
return data.id;
};
// get the row node with ID 55
var rowNode = api.getRowNode('55');
// do something with the row, eg select it
rowNode.setSelected(true);
Accessing the rowNode by ID is available in the Client-side
Row Model only.
Iterating Rows
Sometimes you may want to iterate through all the rowNodes in the grid.
This can be done using the grid's iteration APIs. The iteration APIs
go through every rowNode, regardless of whether the rowNode is displayed
or not. For example if grouping and the group is closed, the group's children
are not displayed by the grid, however the children are included in the
iteration 'for-each' methods.
// iterate through every node in the grid
api.forEachNode( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' is in the grid');
});
// iterate only nodes that pass the filter
api.forEachNodeAfterFilter( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' passes the filter');
});
// iterate only nodes that pass the filter and ordered by the sort order
api.forEachNodeAfterFilterAndSort( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' passes the filter and is in this order');
});
// iterate through every leaf node in the grid
api.forEachLeafNode( function(rowNode, index) {
console.log('node ' + rowNode.data.athlete + ' is not a group!');
});
All of the methods above work with the Client-side
Row Model. For all the other row models (Viewport,
Infinite and
Server-side) the only method that is supported
is api.forEachNode() and that will return back row nodes that are loaded into
browser memory only (as each of these row models use a data source to lazy load rows).
Example Using For-Each Methods
The example below shows the different for-Each API methods as follows:
- For-Each Node: Prints out every row in the grid. It ignores filtering and sorting.
- For-Each Node After Filter: Prints out every row in the grid, except those filtered out.
- For-Each Node After Filter and Sort: Prints our every row in the grid, except those filtered,
and is the same order they appear in the screen if sorting is applied.
- For-Each Leaf Node: Prints out every row in the grid except group rows.
In the example, try applying some sorts and filters, and see how this impacts the different operations.
Accessing Displayed Rows
Displayed rows are rows that the grid tries to render. For example, if you have a group
that is closed, the children of that group will not appear in the displayed rows.
The grid renders the displayed rows onto the screen.
The displayed rows have indexes. For example, if the grid is rendering 20 rows, then will have
indexes 0 to 19.
You can look up the rows by index. This is dependent on anything that changes the index.
For example, if you apply a sort or filter, then the rows and corresponding indexes will change.
Accessing displayed rows works with all row models.
Accessing Displayed Rows Example
The example below demonstrates the following:
- Get Displayed Row 0: Returns back the first row in the grid. This is not impacted
by what page you are one, eg if you navigate to the second page, this method will still
return the first row on the first page. If you sort, the first row will be changed.
- Get Displayed Row Count: Returns back the total number of rows across all pages. If
you filter, this number will change accordingly.
- Print All Displayed Rows: Demonstrates looping through all rows on the screen across
all pages.
- Print Page Displayed Rows: Demonstrates looping through all rows on the screen on
one page.