Row Model

You pass row data to the grid. The grid will not modify the array you pass it, ie the grid may apply sorting or filtering to the data, however this will be done outside of the array you provide the data in. The grid will also not attempt to modify any of the individual data items (unless you are using the editing features of the grid, in which case the grid will update the edited fields only). This guarantees no side effects to your data from the grid.

The data is 'managed' via the rowController. This section explains how the rowController works.

You do not need to know this. However it is helpful to understand what's going on inside the grid sometimes.

Row Models

There are three row row models used in the grid:

  • In Memory Row Model:
  • This is the most common. It allows the full set of filtering, sorting and grouping inside the grid. When doing pagination, this model is used to display one page at a time in the grid. The only times this is not used is when using virtual pagination or viewport.
  • Virtual Page Row Model:
  • This is used when doing virtual pagination.
  • Viewport Row Model:
  • This is used when doing viewport.
The virtual page row model is explained in the section Virtual Paging and Infinite Scrolling. The viewport row model is explained in the section Viewport. The remainder of this section of the documentation focuses on the In Memory Row Model.

In Memory Row Model

The in memory row model is responsible for working out how to display the rows inside the grid. It has a complex data structures, representing the data in difference states. The states are as follows:

  • State 1: Row Data: Row data the application provides.
  • State 2: All Rows: Each data item the application provides wrapped in a rowNode object.
  • State 3: Rows after Group: After grouping applied to the rowNodes.
  • State 4: Rows after Filter: After filtering applied to the rowNodes.
  • State 5: Rows after Sort: After sort applied to the rowNodes.
  • State 6: Rows after Map: After mapping applied to the rowNodes.

The following is an example to help explain each of these steps.

State 1: Row Data

The data as provided by the application. The grid never modifies this array. It just takes the rowData items from it. The examples is of three data items.

Example Row Data

API: There is no API to get this data. However it was provided by the application so you should already have it.

State 2: All Rows

allRows is similar to rowData except a new array is created which contains rowNodes, each rowNode pointing to exactly one data item. The length of the allRows array is the same as the rowData array.

Example All Rows

API: There is no API to get this data. However there is no benefit over the rowsAfterGroup data.

State 3: Rows After Group

rowsAfterGroup takes the allRows, and if grouping, groups the data. If no grouping is done, then rowsAfterGroup will be identical to allRows. The example shows grouping on the color field, creating two groups.

Example Rows After Group

API: Use api.forEachNode() to access this structure.

State 4: Rows After Filter

rowsAfterFilter goes through rowsAfterGroup and filters the data. The example shows filtering on the color black (thus removing the second group).

Example Rows After Filter

API: Use api.forEachNodeAfterFilter() to access this structure.

State 5: Rows After Sort

rowsAfterSort goes through rowsAfterFilter and sorts the data. The example shows sorting on car make.

Example Rows After Sort

API: Use api.forEachNodeAfterFilterAndSort() to access this structure.

State 6: Rows After Map

rowsAfterMap maps the data to what should be drawn inside the grid, taking into account what groups are open and closed. This list is what is iterated through when the grid draws the rows. Two examples are provided below. The first when open (so three rows in the grid, the group row plus two children),the second when closed (so one row in the grid, the closed group).

Example Rows After Map - Open Group

Example Rows After Map - Closed Group

API: Use api.getModel() and then model.getVirtualRowCount() and getVirtualRow() to get the nodes.

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 provided by and used internally by the grid.
  • 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.
  • 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.
  • floating: 'top' or 'bottom' if floating row, otherwise null or undefined.
  • quickFilterAggregateText: If using quick filter, stores a string representation of the row for searching against.

Group Node Attributes

  • footer: True if row is a footer. Footers have group = true and footer = true.
  • field: The field we are grouping on eg Country.
  • key: The key for the grouping eg Ireland, UK, USA.
  • childrenAfterGroup: Children of this group. If multi levels of grouping, shows only immediate children.
  • allLeafChildren: All lowest level nodes beneath this node, no groups.
  • childrenAfterFilter: Filtered children of this group.
  • childrenAfterSort: Sorted children of this group.
  • allChildrenCount: Number of children and grand children.
  • expanded: True if group is expanded, otherwise false.
  • sibling: If doing footers, reference to the footer node for this group.

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.
  • deptFirstSearch(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.

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 rowNods 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;
}

Example API

The example below shows the difference between the three forEach api methods.