Ag grid filter api

Ag grid filter api DEFAULT

Set Filter

A set filter, influenced by how filters work in Microsoft Excel. Set filters can be provided with additional options through the filterParams attribute.

Set Filter Parameters

An additional attribute on the column definition, filterParams, can be used to provide extra information to the set filter. Set the filterParams on the columnDefinition as follows:

The set filter params are specific to each filter and have the following meanings:

  • Similar to the cell renderer for the grid (you can use the same one in both locations). Setting it separately here allows for the value to be rendered differently in the filter. Note that the cell renderer for the set filter only receives the value as a parameter, as opposed to the cell renderer in the colDef that receives more information.
  • The height of the cell.
  • The values to display in the filter. If this is not set, then the filter will takes its values from what is loaded in the table. Setting it allows you to set values where a) the value may not be present in the list (for example, if you want to show all states in America so that the user is not confused by missing states, even though states are missing from the data set in the grid) and b) the list is not available (happens when doing server side filtering in pagination and infinite scrolling).
  • What to do when new rows are loaded. The default is to reset the filter, as the set of values to select from can have changed. If you want to keep the selection, then set this value to 'keep'. This can be useful if you are using values (above) or otherwise know that the list to select from will not change. If the list does change, then it can be confusing what to do with new values into the set (should they be selected or not??).
  • Set to true to include an 'Apply' button with the filter and not filter automatically as the selection changes.
  • Set to true to stop the filter from removing values that are no longer available (like what Excel does).
  • Comparator for sorting. If not provided, the colDef comparator is used. If colDef also not provided, the default (agGrid provided) comparator is used.
  • If true, sorting will not be done on the set filter values. Use this is providing your own values and don't want them sorted as you are providing in the order you want.
  • Set to false(default)/true to show/hide the input text box to filter the set entries displayed in the filter .
  • Set to false(default)/true so that the checkbox "select all" applies to: all the filters items/just the ones filtered by the mini filter .
  • If specified, formats the text before applying the mini filter compare logic, useful for instance if substituting accentuated characters or if you want to do case sensitive mini filtering. This matches the text formatter used for text filters
  • If specified, the filter will wait this amount of ms after the user stops selecting optoins in the mini filter before is triggered. If not specified there won't be any debounce.

Complex Objects - keyCreator

If you are providing complex objects as values, then you need to provide method in your object for the set filter to work, giving a unique value for the object. This is because the set filter needs a string key to identify the value. The example below demonstrates keyCreator with the country column by replacing the country name in the data with a complex object of country name and code. If the keyCreator was not provided on the colDef, the set filter would not work.

Set Filter - Search Field

The text box in the set filter is to allow filtering of displayed filter items, but doesn't actually change the applied filter.

The expected flow when using the search box would be uncheck "Select All", type what you're after in the search box and then finally select the filter entries you want to actually filter on.

Set Filters Example

The example below demonstrates the set filter. Notice that the athlete column is given the set of filters, providing some filter options for which no corresponding rows exist - this can be used if you are missing items in what would otherwise be a complete list, if listing days of the week, and no data for Wednesday exists, then presenting the filter to the user could give the impression that the filter is broken because it is missing Wednesday as an option.

The example also demonstrates using the class, which is applied to the header cell when the header is filtered. By default, no style is applied to this class, the example shows applying a different color background to this style.

The column sport has also the property set to true, hiding the text input box for the set filter in this column (compare this set filter with athlete which suppressMiniFilter is the default = false).

The column country has the property set to true, you can see how the select all only applies to the items filtered by the mini filter search box.

The column athlete has a debounce of ms before the selected options are filtered out

Asynchronous Values

In addition to being able to specify a hardcoded list of values for your setFilter, you can provide a callback to load the values asynchronously. The callback receives a parameter object. The interface for this parameter object is like this:

a callback function that you can callback as soon as the values for the setFilter are ready.

This can be observed in the next example. Note that:

  • specifies the values for the set filter in a callback and introduces a 5 second delay
  • While the data is obtained, (the 5s delay), the setFilter is showing a loading message
  • The loading message can be configured, check our internationalisation docs. The key for this string is
  • The callback is only invoked the first time the filter is opened. The next time the filter is opened the values are not loaded again.

Sorting And Formatting Set Filter Values List

Values inside a set filter will be sorted by their string value by default. If you want a different sort order than the natural string sort order, you need to provide a comparator.

The example below shows sorting on the age columns. The age column is repeated with one difference, the first instance has a comparator, the second has not. The second iteration has the numbers ordered by the default string ordering which is not correct (ie the sequence is 0,1,10,11,2 instead of 0,1,2,).

It also shows the athlete column using a text formatter so that 'o' will match 'Bjørk' in the mini filter. You can check this by searching for 'bjo'in the mini-filter box.

Refresh After Edit

The set filter does NOT refresh after you edit the data. If the data is changing and you want the set filter values to also change, it is up to your application to get the filter to change.

The grid does not update the filters for you as the as there are two many use cases that are open to different interpretation. For example, different users will have different requirements on how to hand new values or how to handle row refresh (eg if a filter is active, should the data be filtered again after the value is added).

The example below shows different approaches on handling data changes for set filters. From the example, the following can be noted:

  • All 4 columns have set filter with different responses to data changing.
  • All four columns have their filters initialised when the grid is loaded by calling when the event is received. This means when you edit, the filter is already created.
  • Column 1 has no special handling of new values.
  • Column 2 after an update: a) gets the filter to update.
  • Column 3 after an update: a) gets the filter to update and b) makes sure the new value is selected.
  • Column 4 after an update: a) gets the filter to update and b) makes sure the new value is selected and c) refreshes the rows based on the new filter value. So for example if you first set the filter on Col 4 to 'A' (notice that 'B' rows are removed), then change a value from 'A' to 'B', then the other rows that were previously removed are added back in again.
  • Click 'Add C Row' to add a new row. Columns 3 and 4 will have their filters updated. Columns 1 and 2 will not have their filters updated.

Why do we do this? The reason is if the filters were changing as the editing was happening, then this would cause the following issues:

  • Rows could disappear while editing if there was a filter set and the edit make a row fail a filter that was previously passing the filter.
  • Values could be split, eg if

New Rows Action and Values Example

Below demonstrates using New Rows Action and Values. The example is not meant to make business sense, it just demonstrates the filters with random unrelated data. The example has the columns configured as follows:

  • Column Fruit - Normal
  • Column Animal - Using newRowsAction = Keep
  • Column Color - Using values
  • Column Location - Using values and using newRowsAction = Keep

The 'Set New Data' button sets new data into the grid. It is suggested you set the filters and then observe what happens when you hit 'Set New Data'.

Set Filter Model

Get and set the state of the set filter by getting and setting the model on the filter instance.

The filter model contains an array of string values where each item in the array corresponds to an element to be selected from the set:

Set Filter API

The set filter has on top of the getModel and setModel methods common to all the filters the following API:

  • setMiniFilter(newMiniFilter): Sets the filter at the top of the filter (the 'quick search' in the popup)
  • getMiniFilter(): Gets the mini filter text.
  • selectEverything(): Selects everything
  • selectNothing(): Clears the selection
  • isFilterActive(): Returns true if anything except 'everything selected'
  • unselectValue(value): Unselects a value
  • selectValue(value): Selects a value
  • isValueSelected(value): Returns true if a value is selected
  • isEverythingSelected(): Returns true if everything selected (inverse of isFilterActive())
  • isNothingSelected(): Returns true if nothing is selected
  • getUniqueValueCount(): Returns number of unique values. Useful for iterating with getUniqueValue(index)
  • getUniqueValue(index): Returns the unique value at the given index
  • setFilterValues(arrayOfStringOptions): Useful if you want to change on the fly the available options
  • resetFilterValues(): Useful if you want to rebuild the filter options based on the underlying data
  • setLoading(loading): Useful if you want to show/hide the loading overlay in the set filter.

Is important to note that when updating the set filter through the API is up to the developer to call gridOptions.api.onFilterChanged() at the end of the interaction with the filter. If no call to gridOptions.api.onFilterChanged() is provided the grid will still show the data relevant to the filter before it was updated through the API. In the example below, you can see how the filter for the Athlete column is modified through the API and how at the end of the interaction a call to gridOptions.api.onFilterChanged() is performed.

Floating Set Filter

If your grid has floatingFilter enabled, your columns with set filter will automatically show below the header a new column that will show two elements:

  • Filter input box: It reflects any change made to the set filtering from anywhere within the application. This includes changes on the rich filter for this column made by the user directly or changes made to the filter through a call to setModel or the API to this filter component
  • Filter button: This button is a shortcut to show the rich filter editor

Common Column Filtering Functionality And Examples

The following can be found in the column filtering documentation page

  • Common filtering params
  • Enabling/Disabling filtering in a column
  • Enabling/Disabling floating filter
  • Adding apply and clear button to a column filter
  • Filtering animation
  • Examples
Sours: http:///javascript-grid-filter-set/

ag-grid / ag-grid Public

Two problems here: 1) example is wrong (should be calling instance.applyModel) and 2) Set Filter was incorrectly using the un-applied model.

Both fixed now and will be included in a patch release later this week.

Further info:

  1. example is wrong

The provided filters have a new method applyModel(). It is explained on the Set Filter page here:
https://www.ag-grid.com/javascript-grid-filter-set/#set-filter-api

"Is important to note that when updating the set filter through the API is up to the developer to call filterInstance.applyModel() and then gridOptions.api.onFilterChanged() at the end of the interaction with the filter."

This method was introduced as the wrong model was getting used in filters. For example imagine two filters A and B. Both filters have 'apply button' active. User goes in an updates filter A but does NOT hit apply. Then user opens up filter B and updates it and hits 'apply' on filter B only. Result: The grid was running the filter and using the latest UI changes for both filter A and filter B.

The fix (in a previous release) was to have filters make a copy of the model when apply is pressed, so when the grid is filtering, the filters can use the copy of the filter made last time the filter was applied.

The impact of this is the Apply action needs to be done, regardless of the apply button used in the UI or not.

So for the set filter API methods, once done changing the UI state, then applyModel() needs to be called.

The example referred to above is now updated, so that applyModel() is called in the right place. The documentation is also updated to explain what applyModel() is and when it should be called. The website will be updated when the patch release is released.

  1. Set Filter incorrectly using wrong model.

On implementing 1 above, a bug is in ag-Grid Set Filter. The filter is currently using the UI state rather than the applied model.

This is now fixed, the set filter makes a copy of the model when apply is pressed.

Sours: https://github.com/ag-grid/ag-grid/issues/
  1. Ashley lauren fun fashion
  2. Auto clicker download mac
  3. Track top adidas firebird
  4. Henry schein ems
  5. Aatv digital

JavaScript Data Grid: Provided Filters

This section describes the functionality common to all filters that are provided by the grid.

The grid provides four filters out of the box: three Simple Filters (Text, Number and Date), and an advanced Set Filter which is available in the Enterprise version of the grid.

Follow the links below to learn more about each specific filter:

The rest of this section will cover concepts that are common to every provided filter.

Structure of Provided Filters

The diagram below outlines the structure of the filters. Each box represents a filter type with the functions listed in it. For example, all provided filters have button logic, but only the Date filter has a Date Comparator or a Date Picker.

Provided Filters

Provided Filter UI

Each provided filter is displayed in a UI with optional buttons at the bottom.

Filter Content

Provided Filter Params

All of the provided filters have the following parameters:

string[]

Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are:
  • : If the Apply button is present, the filter is only applied after the user hits the Apply button.
  • : The Clear button will clear the (form) details of the filter without removing any active filters on the column.
  • : The Reset button will clear the details of the filter and any active filters on that column.
  • : The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model.

boolean

If the Apply button is present, the filter popup will be closed immediately when the Apply or Reset button is clicked if this is set to .

Default:

number

By default the Text and Number filters will debounce by ms. This is because these filters have text field inputs, so time is given to the user to type items in before the input is formatted and the filtering applied. The Set and Date will execute immediately (no debounce). To override these defaults, set to the number of milliseconds to debounce by.

string

This property is for when using the Client Side Row Model only. When set to , updating the data in the grid by calling (or updating the property if bound by a framework) will clear (reset) the filter. If you instead set this to , the grid will keep its currently set filter when the data is updated.

Default:

Options: ,

Provided Filter API

Provided Filters provide the following methods:

Function

Returns if the filter is currently active, otherwise .

Function

Returns a model representing the current state of the filter, or if the filter is not active.

Function

Sets the state of the filter using the supplied model. Providing as the model will de-activate the filter.

Function

Returns the filter model from the UI. If changes have been made to the UI but not yet applied, this model will reflect those changes.

Function

Applies the model shown in the UI (so that will now return what was in the UI when was called).

Apply, Clear, Reset and Cancel Buttons

Each of the provided filters can optionally include Apply, Clear, Reset and Cancel buttons.

When the Apply button is used, the filter is only applied once the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if using server-side filtering (thus preventing unnecessary calls to the server).

The Clear button clears just the filter UI, whereas the Reset button clears the filter UI and removes any active filters for that column.

The Cancel button will discard any changes that have been made in the UI, restoring the state of the filter to match the applied model.

The buttons will be displayed in the order they are specified in the array.

The example below demonstrates using the different buttons. It also demonstrates the relationship between the buttons and filter events. Note the following:

  • The Athlete and Age columns have filters with Apply and Reset buttons, but different orders.
  • The Country column has a filter with Apply and Clear buttons.
  • The Year column has a filter with Apply and Cancel buttons.
  • The Age and Year columns have set to , so the filter popup will be closed immediately when the filter is applied, reset or cancelled.
  • is called when the filter is opened.
  • is called when the filter changes regardless of whether the Apply button is present.
  • is called only after a new filter is applied.
  • Looking at the console, it can be noted when a filter is changed, the result of and are different. The first reflects the active filter, while the second reflects what is in the UI (and not yet applied).

Applying the UI Model

Provided filters maintain a separate model representing what is shown in the UI, which might change without having yet been applied, for example when an Apply button is present and the user has made changes in the UI but not yet clicked Apply. Calling will always return a model representing the current UI, whereas will return the applied model that is currently being used for filtering.

If any changes are made in the UI when the Apply button is active, or via other API methods whether the Apply button is active or not, you must call if you want to ensure the UI is applied.

Applying the model is then typically followed by calling to tell the grid to re-run the filtering.

If no call is made to then the filter UI will show any changes that have been made, but they won't be reflected in the filter model and therefore won't be reflected in the filtering. This will appear as if the user never hit the Apply button (regardless of whether the Apply button is active or not).

Sours: https://www.ag-grid.com/javascript-data-grid/filter-provided/

In this video, we'll use the filter API in conjunction with the grid API to programatically set and modify filters.

We're going to create a button that does the following:

  • Sets the amount filter to "less than "
  • Sets the last name filter to "contains 'Mo'"
  • Sorts the grid by amount descending

First, let's add a button between the quick filter input and the Component:

Then, we'll create the function we're using in our event handler. This function needs to:

  1. Get the instances of the filters,
  2. Set each filter model,
  3. Sort the grid by amount descending, and
  4. Tell ag-Grid to update the filters.

Here's the finished function:

If you run and navigate to localhost, you should be able to click the "Mo Filter" button and watch in amazement as two filters are adjusted and the grid is sorted instantaneously! Pretty cool, right?

Being able to programatically update filters is insanely powerful. I hope you'll check out the docs and explore.

For our last filter feature, let's learn about set filters in the next video.

Go Pro to unlock all content & remove ads

Sours: https://thinkster.io/tutorials/using-ag-grid-with-react-filters/filter-api

Grid api ag filter

Column Filter

Data in ag-Grid can be filtered in the following ways:

  1. Column Filter: A column filter is associated with a column and filters data based on the value of that column only. The column filter is accessed via the column's menu and may also have a element if floating filters are turned on.
  2. Quick Filter: The quick filter is a simple text filter that filters across all columns.
  3. External Filter: External filters is a way for your application to apply bespoke filtering with no restriction to the columns.

Column filters are tied to a column. Quick filter and external filter are not tied to a column. This section of the documentation talks about column filters only. For quick filter and external filter, see the relevant sections of the documentation.

You have two options for filtering, one is use one of the default built-in filters (easy but restricted to what's provided), or bake your own custom filters (no restrictions, build what you want, but takes more time).

Enable Filtering

Enable filtering by setting grid property . This turns on filtering on all columns. To turn off filtering for particular columns, set on the individual column definition.

When a filter is active on a column, the filter icon appears before the column name in the header.

Filter Types

The following filter options can be set for a column definition:

FilterDescription
agNumberColumnFilterA Number Filter for number comparisons.
agTextColumnFilterA Text Filter for string comparisons.
agDateColumnFilterA Date Filter for date comparisons.
agSetColumnFilterA Set Filter, influenced by how filters work in Microsoft Excel. This is an ag-Grid-Enterprise feature.
-custom-A Filter Component where you can provide you own filter written in a framework of your choice.

If no filter type is specified, the default is 'text' for ag-Grid (free versions) and 'set' for ag-Grid Enterprise.

Filter Parameters

Each filter can take additional filter params by setting . What parameters each filter type takes is explained in the section on each filter. As an example, the following sets parameters for the text filter.

Built In Filters Example

The example below demonstrates:

  • Three filter types 1) text filter, 2) number filter and 3) date filter.
  • Using the class, which is applied to the header cell when the header is filtered. By default, no style is applied to this class, the example shows applying a different color background to this style.
  • 'suppressFilter' is set on Total to hide the filter on this column

Remember Filtering works with all frameworks eg Angular and React as well as plain JavaScript.

Apply Function

If you want the user to hit an 'Apply' button before the filter is actioned, add to the filter parameters. The example below shows this in action for the first three columns.

This is handy if the filtering operation is taking a long time (usually it doesn't), or if doing server side filtering (thus preventing unnecessary calls to the server).

Filter Events

Filtering results in the following events getting emitted:

filterChanged Filter has changed.
filterModified Gets called when filter has been modified but not necessarily called. This is useful when using an apply button inside the filter, as this event fires when the filter is modified, and then is fired when the apply button is pressed.

Example: Apply Button and Filter Events

The example below also demonstrates using the apply button and filter events as follows:

  • onFilterModified gets called when the filter changes regardless of the apply button.
  • onFilterChanged gets called after a new filter is applied.

Filtering Animation

To enable animation of the rows after filtering, set grid property .

Accessing Filter Component Instances

It is possible to access the filter components directly if you want to interact with the specific filter. This also works for your own custom filters, where you can get a reference to the underlying filtering instance (ie what was created after ag-Grid called 'new' on your filter). You get a reference to the filter instance by calling .

All of the methods of the IFilter interface are present, assuming the underlying filter implements the method. Your custom filters can add their own methods here that ag-Grid will not use but your application can use. What these extra methods do is up to you and between your customer filter and your application.

Example Filter API

The example below shows controlling the country and age filters via the API.

The example also shows 'gridApi.destroyFilter(col)' which completely destroys a filter. Use this is if you want a filter to be created again with new initialisation values.

(Note: the example uses the enterprise set filter).

Reset Individual Filters

You can reset a filter to its original state by getting the filter instance and then performing the action that makes sense for the filter type.

For all the filter types the sequence would be:

  • perform reset action for filter type

The following are the appropriate methods for the corresponding filter types:

Filter TypeAction
number
text
set

Reset All Filters

You can reset all filters by doing the following:

Get / Set All Filter Models

It is possible to get and set the state of all the filters via the api methods and . These methods manage the filters states via the and methods of the individual filters.

This is useful if you want to save the filter state and apply it at a later state. It is also useful for server side filtering, where you want to pass the filter state to the server.

Example - Get / Set All Filter Models

The example below shows getting and setting all the filter models in action. The 'save' and 'restore' buttons mimic what you would do to save and restore the state of the filters. The big button (Name = 'Mich%' etc) shows how you can hand craft a model and then set that into the filters.

(Note: the example uses the enterprise set filter).

Floating filters

Floating Filters are an additional row under the column headers where the user will be able to see and optionally edit the filters associated to each column.

Floating filters are activated by setting grid property :

Floating filters are an accessory to the main column filters. They do not contain their own state, rather they display the state of the main filter, and if editable they set state on the main filter. Underneath the hood this is done by using the main filters and methods. For this reason, there is no api for getting or setting state of the floating filters.

All the default filters provided by ag-Grid provide their own implementation of a floating filter. All you need to do to enable these floating filters is set the grid property.

Every floating filter also takes a parameter to show/hide automatically a button that will open the main filter.

To see the specifics on what are all the parameters and the interface for a floating filter check out the docs for floating filter components.

The following example shows the following features of floating filters:

  • Text filter: Have out of the box read/write floating filters (Sport column)
  • Set filter: Have out of the box read floating filters (Country column)
  • Date and number filter: Have out of the box read/write floating filters for all filter except when switching to in range filtering, then the floating filter is read only (Age and date columns)
  • Columns with the applyButton require the user to press enter on the floating filter for the filter to take effect (Gold column)
  • Changes made from the outside are reflected automatically in the floating filters (Press any button)
  • Columns with custom filter have automatic read only filter if the custom filter implements the method getModelAsString. (Athlete column)
  • The user can configure when to show/hide the button that shows the rich filter (Silver and Bronze columns)
  • Columns with suppressFilter=true don't have floating filters (Total column)
  • Combining suppressMenu and suppressFilter lets you control where the user access to the rich filter. In this example suppressMenu = true for all the columns except Silver and Bronze

Server Side Filtering

Some of the row models (pagination and infinite scrolling) have further information on how to implement server side filtering. For details on this, see the the sections pagination and infinite scrolling.

Filtering null values in Date and Number filters

If your underlying data representation for a row contains it won't be included in the filter results. If you want to change this behaviour, you can configure the property The null comparator is an object used to tell if nulls should be included when filtering data, its interface it's like this:

If any of this properties is specified as true, the grid will include values when doing the according filtering.

In the following example you can filter by age or date and see how values are included in the filter based on the combination of filter type and your

Note that will never include .

Sours: http:///javascript-grid-filtering/
ReactJS How to load data API in AG Grid React with loading content and Pagination

JavaScript Data Grid: Filter API

You can access and set the models for filters through the grid API, or access individual filter instances directly for more control. This page details how to do both.

Get / Set All Filter Models

It is possible to get the state of all filters using the grid API method , and to set the state using . These methods manage the filters states via the and methods of the individual filters.

Function

Gets the current state of all the advanced filters. Used for saving filter state.

Function

Sets the state of all the advanced filters. Provide it with what you get from to restore filter state.

The filter model represents the state of filters for all columns and has the following structure:

This is useful if you want to save the global filter state and apply it at a later stage. It is also useful for server-side filtering, where you want to pass the filter state to the server.

Reset All Filters

You can reset all filters by doing the following:

Example: Get / Set All Filter Models

The example below shows getting and setting all the filter models in action.

  • saves the current filter state, which will then be displayed.
  • restores the saved filter state back into the grid.
  • takes a custom hard-coded filter model and applies it to the grid.
  • will clear all active filters.
  • destroys the filter for the Athlete column by calling . This removes any active filter from that column, and will cause the filter to be created with new initialisation values the next time it is interacted with.

(Note: the example uses the Enterprise-only Set Filter).

Accessing Individual Filter Component Instances

It is also possible to access the filter components directly if you want to interact with a specific filter. This also works for your own custom filters, where you can get a reference to the underlying filtering instance (i.e. what was created when AG Grid called on your filter). Calling will return a reference to the filter instance for the column with key .

Function

Returns the filter component instance for a column. can be a string field name or a ColDef object (matches on object reference, useful if field names are not unique).

All of the methods of the filter are available on the instance. If using a custom filter, any other methods you have added will also be present, allowing bespoke behaviour to be added to your filter.

For filters that are created asynchronously, including React 16+ components, will return if the filter has not already been created. If your app uses asynchronous components, use the optional function which will be invoked with the filter instance when it is available.

Re-running Grid Filtering

After filters have been changed via their API, you must ensure the method is called to tell the grid to filter the rows again. If is not called, the grid will still show the data relevant to the filters before they were updated through the API.

Reset Individual Filters

You can reset a filter to its original state by getting the filter instance and setting the model to .

Example: Accessing Individual Filters

The example below shows how you can interact with an individual filter instance, using the Set Filter as an example.

  • will print the text from the Set Filter's Mini Filter to the console.
  • will save the Mini Filter text.
  • will restore the Mini Filter text from the saved state.
  • will reset the filter.

(Note: the example uses the Enterprise-only Set Filter).

Sours: https://www.ag-grid.com/javascript-data-grid/filter-api/

Similar news:

JavaScript Data Grid: Set Filter - API

This section describes how the Set Filter can be controlled programmatically using API calls.

Set Filter Model

Get and set the state of the Set Filter by getting and setting the model on the filter instance.

The filter model contains an array of string values where each item in the array corresponds to an element to be selected from the set.

Set Filter API

The Set Filter has the following API:

Function

Returns if the filter is currently active, otherwise .

Function

Returns a model representing the current state of the filter, or if the filter is not active.

Function

Sets the state of the filter using the supplied model. Providing as the model will de-activate the filter.

Note: if you are providing values asynchronously to the Set Filter, you need to wait for these changes to be applied before performing any further actions by waiting on the returned grid promise, e.g.

Function

Returns the full list of unique values used by the Set Filter.

Function

Sets the text in the Mini Filter at the top of the filter (the 'quick search' in the popup).

Function

Gets the Mini Filter text.

Function

Refreshes the values shown in the filter from the original source. For example, if a callback was provided, the callback will be executed again and the filter will refresh using the values returned. See Refreshing Values.

Function

Sets the values used in the Set Filter on the fly.

Function

Resets the Set Filter to use values from the grid, rather than any values that have been provided directly.

It is important to note that when updating the Set Filter through the API, it is up to the developer to call to apply the changes that have been made to the model and then at the end of the interaction with the filter.

If no call is made to then the filter UI will show any changes, but they won't be reflected in the filter model. This will appear as if the user never hit the Apply Button (regardless of whether the Apply Button is active or not).

If no call to is provided the grid will still show the data relevant to the filter before it was updated through the API.

In the example below, you can see how the filter for the Athlete column is modified through the API and how at the end of the interaction a call to is performed.

Sours: https://www.ag-grid.com/javascript-data-grid/filter-set-api/


43287 43288 43289 43290 43291