JavaScript Data GridSet Filter - Data Updates

This section describes how changing data through Cell Editing and the application Updating Data impacts the Set Filter's values. This is only applicable when the Set Filter is taking its values from the grid's data.

Row / Cell Updates

Row / Cell updates refers to any of the following:

• All edits via the grid's UI such as Cell Editing and Clipboard Operations.
• Using the grid's Single Row / Cell Update API i.e. rowNode.setData(data) and rowNode.setDataValue(col,value) API methods.

Filter Values will be refreshed when data is updated through any of these methods.

Here are the rules that determine how Filter Values are selected:

• Filter Inactive: Before the update 'all' values in the filter were selected (as the filter was inactive). The filter list will be updated reflecting the data change and all values will remain selected leaving the filter inactive
• Filter Active: Before the update 'some' values in the filter were selected (as the filter was active). The filter list will be updated reflecting the data change, however previous selections will remain intact as long as the filter value still exists after any transaction(s). If the update resulted in a new filter value, the new filter value will not be selected.

Cell editing does not re-execute filtering by default, so the row will not be filtered out even though the value in the cell is not selected in the filter. This default behaviour mimics how Excel works.

To execute filtering on cell edits, listen to CellValueChanged events and trigger filtering as shown below:

const gridOptions = {
    onCellValueChanged: params => {
        // trigger filtering on cell edits
        params.api.onFilterChanged();
    },

    // other grid options ...
}

The following example demonstrates Cell Editing with the Set Filter. Try the following:

Without selecting any Filter Values:

• Change (Cell Edit) a 'B' cell value to 'X' and note it gets added to the filter list and is selected.

Click 'Reset' and deselect 'C' in the Filter List:

• Change (Cell Edit) a 'B' cell value to 'X' and notice it gets added to the Filter List but it is not selected.
• Note that although 'X' is not selected in the filter the row still appears in the grid. This is because grid filtering is not triggered for cell edits.

Transaction Updates

Transaction Updates refers to any of the following:

• Updating data via Transactions API.
• Updating data via Async Transactions API.
• Changes to Row Data and providing Row ID (as this uses Transactions underneath the hood).

Filter values are refreshed when data is updated using any of these methods.

Here are the rules that determine how filter values are selected:

• Filter Inactive: Before the update 'all' values in the filter were selected (as the filter was inactive). The filter list will be updated reflecting the data change and all values will remain selected leaving the filter inactive.

• Filter Active: Before the update 'some' values in the filter were selected (as the filter was active). The filter list will be updated reflecting the data change, however previous selections will remain intact as long as the filter value still exists after any transaction(s). If the update resulted in a new filter value, the new filter value will not be selected.

Unlike Cell Editing, transaction updates will execute filtering in the grid.

The following example demonstrates these rules. Try the following:

Without selecting any filter values:

• Click Update First Displayed Row: this calls api.applyTransaction() and updates the value in the first row. Note 'AX' now appears in the filter list and is selected.
• Click Add New 'D' Row: this calls api.applyTransaction() and adds a new row to the grid. Note 'D' has been added to the filter list and is selected.

Click 'Reset' and deselect 'C' in the Filter List:

• Click Update First Displayed Row: this calls api.applyTransaction() and updates the value in the first row. Note 'AX' now appears in the filter list and is not selected.
• Note that as 'AX' is unselected in the filter list it has also been filtered out of the grid. This is because transaction updates also triggers grid filtering.
• Click Add New 'D' Row: this calls api.applyTransaction() and adds a new row to the grid. Note 'D' has been added to the filter list and is not selected.

Setting New Data

When api.setGridOption('rowData', data) is called existing filter selections are kept when new rows are added. However it is possible to clear filter selections using: api.setFilterModel([]).

The following example demonstrates how api.setGridOption('rowData', data) affects filter selections. Try the following:

• Deselect value 'A' from the set filter list and click the Apply Data Update 1 button which calls api.setGridOption('rowData', newData) to add new data with extra rows to the grid.

• Notice 'A' remains deselected after new data is supplied to the grid.

• Clicking Reset invokes api.setGridOption('rowData', origData) to restore the original data but also clears any selections using api.setFilterModel([]).

• Apply the filters so only 'B' is selected and click Apply Data Update 1. Notice how 'B' is no longer a filter value and therefore no longer in the filter list. Click Apply Data Update 2 and notice how 'B' returns to the filter list but remains unselected.

Next Up

Continue to the next section to learn about the Tree List.