JavaScript Data GridSet Filter - Data Updates
javascript logo
Enterprise

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:

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. 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:

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. 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 'B' from the set filter list and click the Set New Data button which calls api.setGridOption('rowData', newData) to add new data with extra rows to the grid.

  • Notice 'B' 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([]).

Next Up

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