{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/filter-set-filter-list/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section describes how Filter List values can be managed through custom sorting and formatting. Supplying filter values directly to the Set Filter is also discussed."}]},{"type":"element","tagName":"h2","properties":{"id":"sorting-filter-lists","style":"position:relative;"},"children":[{"type":"text","value":"Sorting Filter Lists"},{"type":"element","tagName":"a","properties":{"href":"#sorting-filter-lists","ariaLabel":"sorting filter lists permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Values inside a Set Filter will be sorted by default, where the values are converted to a string value and sorted in ascending order according to their UTF-16 codes."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a different sort order is required, a Comparator can be supplied to the set filter as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'age',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                comparator: (a, b) => {\n                    const valA = parseInt(a);\n                    const valB = parseInt(b);\n                    if (valA === valB) return 0;\n                    return valA > valB ? 1 : -1;\n                }\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Comparator used by the Set Filter is only provided the values in the first two parameters, whereas the Comparator for the Column Definition ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":") is also provided the row data as additional parameters. This is because when sorting rows, row data exists. For example, take 100 rows split across the colour values "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[white, black]"}]},{"type":"text","value":". The column will be sorting 100 rows, however the filter will be only sorting two values."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are providing a Comparator that depends on the row data and you are using the Set Filter, be sure to provide the Set Filter with an alternative Comparator that doesn't depend on the row data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates sorting Set Filter values using a comparator. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age (no Comparator)"}]},{"type":"text","value":" filter values are sorted using the default string order: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1, 10, 100..."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age (with Comparator)"}]},{"type":"text","value":" filter has a custom Comparator supplied in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams"}]},{"type":"text","value":" that sorts the ages by numeric value: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1, 2, 3..."}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sorting Filter Lists","name":"sorting-set-filter-values","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 720, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"formatting-values","style":"position:relative;"},"children":[{"type":"text","value":"Formatting Values"},{"type":"element","tagName":"a","properties":{"href":"#formatting-values","ariaLabel":"formatting values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers different ways to format the displayed Filter List values in the Set Filter."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Formatting Filter List values will not change the underlying value or Filter Model."}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"value-formatter","style":"position:relative;"},"children":[{"type":"text","value":"Value Formatter"},{"type":"element","tagName":"a","properties":{"href":"#value-formatter","ariaLabel":"value formatter permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/value-formatters/"},"children":[{"type":"text","value":"Value Formatter"}]},{"type":"text","value":" is a good choice when the string value displayed in the Filter List needs to\nbe modified, for example adding country codes in parentheses after a country name, as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const countryValueFormatter = params => {\n|     const country = params.value;\n|     return country + ' (' + COUNTRY_CODES[country].toUpperCase() + ')';\n| }\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows how to provide the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"countryValueFormatter"}]},{"type":"text","value":" to the Set Filter:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // column definition using the same value formatter to format cell and filter values\n        {\n            field: 'country',\n            valueFormatter: countryValueFormatter,\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                valueFormatter: countryValueFormatter,\n            },\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the code above, the same value formatter is supplied to the Column and Filter params, however separate Value Formatters can be used."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how Set Filter values are formatted using a Value Formatter. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"No Value Formatter"}]},{"type":"text","value":" does not have a Value Formatter supplied to the Set Filter. The column is supplied a Value Formatter through "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.valueFormatter = countryValueFormatter"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"With Value Formatter"}]},{"type":"text","value":" has the same Value Formatter supplied to the Column and Set Filter. The Set Filter is supplied the value formatter through "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.valueFormatter = countryValueFormatter"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Print Filter Model"}]},{"type":"text","value":" with a filter applied and note the logged Filter Model (dev console) has not been modified."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter List Value Formatters","name":"filter-list-value-formatter","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 745, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]},{"type":"text","value":" "}]},{"type":"element","tagName":"h3","properties":{"id":"cell-renderer","style":"position:relative;"},"children":[{"type":"text","value":"Cell Renderer"},{"type":"element","tagName":"a","properties":{"href":"#cell-renderer","ariaLabel":"cell renderer permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/cell-rendering/"},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"text","value":" is a good choice when the value displayed requires markup. For instance if a\ncountry flag image is to be shown alongside country names."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The same Cell Renderer can used to format the grid cells and filter values, or different renderers can be supplied to\neach. Note that the Cell Renderer will be supplied additional info when used to format cells inside the grid (as grid\ncells have row details that are not present for values inside a Filter List)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Assuming you have a customer Country Cell Renderer, the following snippet shows how to provide the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"countryCellRenderer"}]},{"type":"text","value":" to the Set Filter:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // column definition using the same cell renderer to format cell and filter values\n        {\n            field: 'country',\n            cellRenderer: countryCellRenderer,\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                cellRenderer: countryCellRenderer\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A custom "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-cell-renderer/#cell-renderer-component"},"children":[{"type":"text","value":"Cell Renderer Component"}]},{"type":"text","value":" can also be supplied to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.cellRenderer"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how Set Filter values are rendered using a Cell Renderer. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"No Cell Renderer"}]},{"type":"text","value":" does not have a Cell Renderer supplied to the Set Filter. The Column has a Cell Renderer supplied to the Column using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.cellRenderer = countryCellRenderer"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"With Cell Renderer"}]},{"type":"text","value":" uses the same Cell Renderer to format the cells and filter values. The Set Filter is supplied the Value Formatter using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.cellRenderer = countryCellRenderer"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Print Filter Model"}]},{"type":"text","value":" with a filter applied and note the logged filter model (dev console) has not been modified."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter List Cell Renderers","name":"filter-list-cell-renderer","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 745, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"supplying-filter-values","style":"position:relative;"},"children":[{"type":"text","value":"Supplying Filter Values"},{"type":"element","tagName":"a","properties":{"href":"#supplying-filter-values","ariaLabel":"supplying filter values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Set Filter will obtain the filter values from the row data by default. These are retrieved from the data based on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute. This can be overridden by providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterValueGetter"}]},{"type":"text","value":" in the Column Definition. This is similar to using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/value-getters"},"children":[{"type":"text","value":"Value Getter"}]},{"type":"text","value":", but is specific to the filter."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"filtering","names":"[\"filterValueGetter\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to provide values for the Filter List. This is necessary when using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/server-side-model/"},"children":[{"type":"text","value":"Server-Side Row Model"}]},{"type":"text","value":". This can be done either synchronously or asynchronously as described below."}]},{"type":"element","tagName":"h3","properties":{"id":"synchronous-values","style":"position:relative;"},"children":[{"type":"text","value":"Synchronous Values"},{"type":"element","tagName":"a","properties":{"href":"#synchronous-values","ariaLabel":"synchronous values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The simplest approach is to supply a list of values to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.values"}]},{"type":"text","value":" as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'days',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                // provide all days, even if days are missing in data!\n                values: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that if there are missing values in the row data, the filter list will display all provided values. This could give users the impression that filtering is broken."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When providing filter values which are already sorted it is often useful to disable the default filter list sorting using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.suppressSorting=true"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates providing filter values using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.values"}]},{"type":"text","value":". Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Days (Values Not Provided)"}]},{"type":"text","value":" set filter obtains values from the row data to populate the filter list and as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Saturday'"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Sunday'"}]},{"type":"text","value":" are not present in the data they do not appear in the filter list."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Days (Values Not Provided)"}]},{"type":"text","value":" filter values come from the row data they are sorted using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-filter-list/#sorting-filter-lists"},"children":[{"type":"text","value":"Custom Sort Comparator"}]},{"type":"text","value":" to ensure the days are ordered according to the week day."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Days (Values Provided)"}]},{"type":"text","value":" set filter is given values using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.values"}]},{"type":"text","value":". As all days are supplied the filter list also contains "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Saturday'"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Sunday'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Days (Values Provided)"}]},{"type":"text","value":" filter values are provided in the correct order, the default filter list sorting is turned off using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.suppressSorting=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Providing Filter Values","name":"providing-filter-values","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 720, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"asynchronous-values","style":"position:relative;"},"children":[{"type":"text","value":"Asynchronous Values"},{"type":"element","tagName":"a","properties":{"href":"#asynchronous-values","ariaLabel":"asynchronous values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to supply values asynchronously to the set filter. This is done by providing a callback function instead of a list of values as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                values: params => {\n                    // async update simulated using setTimeout()\n                    setTimeout(() => {\n                        // fetch values from server\n                        const values = getValuesFromServer();\n                        // supply values to the set filter\n                        params.success(values);\n                    }, 3000);\n                }\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above the values callback receives a parameter object which contains "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.success()"}]},{"type":"text","value":"which allows values obtained asynchronously to be supplied to the set filter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The interface for this parameter object is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SetFilterValuesFuncParams"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"SetFilterValuesFuncParams","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are providing values to the Set Filter asynchronously, when setting the model using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setModel"}]},{"type":"text","value":" you need to wait for changes to be applied before performing any further actions by waiting on the returned grid promise, e.g.:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"filter"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setModel"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" values"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'a'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'b'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" gridApi"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"onFilterChanged"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates loading set filter values asynchronously. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.values"}]},{"type":"text","value":" is assigned a callback function that loads the filter values after a 3 second delay using the callback supplied in the params: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.success(['value1', 'value2'])"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Opening the set filter shows a loading message before the values are set. See the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/localisation/"},"children":[{"type":"text","value":"Localisation"}]},{"type":"text","value":" section for details on how to change this message."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"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."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Callback/Async","name":"callback-async","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 510, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"refreshing-values","style":"position:relative;"},"children":[{"type":"text","value":"Refreshing Values"},{"type":"element","tagName":"a","properties":{"href":"#refreshing-values","ariaLabel":"refreshing values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, when values are passed to the set filter they are only loaded once when the set filter is initially created. It may be desirable to refresh the values at a later point, for example to reflect other filtering that has occurred in the grid. To achieve this, you can call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshFilterValues"}]},{"type":"text","value":" on the relevant filter that you would like to refresh. This will cause the values used in the filter to be refreshed from the original source, whether that is by looking at the provided "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"values"}]},{"type":"text","value":" array again, or by re-executing the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"values"}]},{"type":"text","value":" callback. For example, you might use something like the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    onFilterChanged: params => {\n        const setFilter = params.api.getFilterInstance('columnName');\n        setFilter.refreshFilterValues();\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using the grid as a source of values (i.e. you are not providing values yourself), calling this method will also refresh the filter values using values taken from the grid, but this should not be necessary as the values are automatically refreshed for you whenever any data changes in the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If instead you want to refresh the values every time the Set Filter is opened, you can configure that using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshValuesOnOpen"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                values: params => params.success(getValuesFromServer()),\n                refreshValuesOnOpen: true,\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you refresh the values, any values that were selected in the filter that still exist in the new values will stay selected, but any other selected values will be discarded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates refreshing values. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Values Array column has values provided as an array. Clicking the buttons to change the values will update the values in the array provided to the filter and call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshFilterValues()"}]},{"type":"text","value":" to immediately refresh the filter for the column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Values Callback column has values provided as a callback and is configured with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'refreshValuesOnOpen = true'"}]},{"type":"text","value":". Clicking the buttons to change the values will update the values that will be returned the next time the callback is called. Note that the values are not updated until the next time the filter is opened."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you select "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Elephant'"}]},{"type":"text","value":" and change the values, it will stay selected as it is present in both lists."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you select any of the other options, that selection will be lost when you change to different values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A filter is re-applied after values have been refreshed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Refreshing Values","name":"refreshing-values","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 755, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-value-case-sensitivity","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Value Case-Sensitivity"},{"type":"element","tagName":"a","properties":{"href":"#enabling-value-case-sensitivity","ariaLabel":"enabling value case sensitivity permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the Set Filter treats values as case-insensitive. Practically this means that cell values of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Black"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"black"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"BLACK"}]},{"type":"text","value":" are all treated as identical for matching purposes, and the first encountered value is used as the value displayed in the Filter List."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Case-sensitivity can be enabled by using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"caseSensitive"}]},{"type":"text","value":" filter parameter:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'colour',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                caseSensitive: true\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"caseSensitive"}]},{"type":"text","value":" option also affects "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-mini-filter/#enabling-case-sensitive-searches"},"children":[{"type":"text","value":"Mini-Filter"}]},{"type":"text","value":" searches and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-api/#enabling-case-sensitivity"},"children":[{"type":"text","value":"API"}]},{"type":"text","value":" behaviours."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates the difference in behaviour between "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"caseSensitive: false"}]},{"type":"text","value":" (the default) and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"caseSensitive: true"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The case insensitive column's Filter List has seven distinct values with unique colours."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Typing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"black"}]},{"type":"text","value":" into the Mini Filter will match "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Black"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The case sensitive column's Filter List has 21 distinct values, although there are only seven distinct colours ignoring case."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Typing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"black"}]},{"type":"text","value":" into the Mini Filter will match only "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"black"}]},{"type":"text","value":", but not "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Black"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"BLACK"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling SetFilter Case-Sensitivity","name":"case-sensitive-set-filter-list","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 720, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If case differences need to be normalised to remove redundant values from the data-source for filtering, a "},{"type":"element","tagName":"a","properties":{"href":"#value-formatter"},"children":[{"type":"text","value":"Value Formatter"}]},{"type":"text","value":" should be used."}]},{"type":"element","tagName":"h2","properties":{"id":"missing-values","style":"position:relative;"},"children":[{"type":"text","value":"Missing Values"},{"type":"element","tagName":"a","properties":{"href":"#missing-values","ariaLabel":"missing values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there are missing / empty values in the row data of the grid, or missing values in the list of "},{"type":"element","tagName":"a","properties":{"href":"#supplying-filter-values"},"children":[{"type":"text","value":"Supplied Values"}]},{"type":"text","value":", the Filter List will contain an entry called "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(Blanks)"}]},{"type":"text","value":" which can be used to select / deselect all of these values. If this not the desired behaviour, provide a "},{"type":"element","tagName":"a","properties":{"href":"#value-formatter"},"children":[{"type":"text","value":"Formatter"}]},{"type":"text","value":" to present blank values in a different way."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"''"}]},{"type":"text","value":", as well as an empty array if using "},{"type":"element","tagName":"a","properties":{"href":"#multiple-values-per-cell"},"children":[{"type":"text","value":"Multiple Values Per Cell"}]},{"type":"text","value":", are all treated as missing values. These will appear within the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-api/#set-filter-model"},"children":[{"type":"text","value":"Set Filter Model"}]},{"type":"text","value":" as a single entry of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":". This also applies to supplied Filter List values (e.g. if you supply "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"''"}]},{"type":"text","value":" it will appear in the filter model as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":")."}]},{"type":"element","tagName":"h2","properties":{"id":"filter-value-types","style":"position:relative;"},"children":[{"type":"text","value":"Filter Value Types"},{"type":"element","tagName":"a","properties":{"href":"#filter-value-types","ariaLabel":"filter value types permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Set Filter internally maintains the original type of the cell values, but always uses strings for the keys. E.g. if the cell contains a number, the Filter Model will contain those numbers converted to strings, but if you specified a value formatter, that would use the values with type number. Note that in AG Grid versions prior to 29.0, the Filter Model values were converted to strings for everything. This behaviour can be replicated by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.convertValuesToStrings = true"}]},{"type":"text","value":", but the setting is deprecated."}]},{"type":"element","tagName":"h3","properties":{"id":"complex-objects","style":"position:relative;"},"children":[{"type":"text","value":"Complex Objects"},{"type":"element","tagName":"a","properties":{"href":"#complex-objects","ariaLabel":"complex objects permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are providing complex objects as values, then you need to provide both a Key Creator function and a Value Formatter function when using the Set Filter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Key Creator generates a unique string key from the complex object (note that if the key is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"''"}]},{"type":"text","value":" it will be converted to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":", the same as for "},{"type":"element","tagName":"a","properties":{"href":"#missing-values"},"children":[{"type":"text","value":"Missing Values"}]},{"type":"text","value":"). This key is used within the Filter Model, and to compare objects. You can either provide a Key Creator within the filter params, which will be specific to the Set Filter, or you can provide one in the Column Definition that is shared with other features such as grouping."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Value Formatter is used to generate the label that is displayed to the user within the Filter List. You can provide the Value Formatter in the filter params."}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'country',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                keyCreator: params => params.value.code,\n                valueFormatter: params => params.value.name,\n            },\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet above shows a Key Creator function that returns the country code from the complex object, and a Value Formatter that returns the name. If the Key Creator or Value Formatter were not provided at all, the Set Filter would not work."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"a","properties":{"href":"#supplying-filter-values"},"children":[{"type":"text","value":"Supplied Values"}]},{"type":"text","value":" are used for the Filter List, these must be the full complex objects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In AG Grid versions prior to 29.0, the value generated by the Key Creator was used as both the key and display value. This behaviour can still be replicated by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.convertValuesToStrings = true"}]},{"type":"text","value":". This will use the Key Creator to generate a string value that is used for both. Values provided to the Filter List should be the string values when this setting is on. Note that this behaviour is deprecated."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows the Key Creator handling complex objects for the Set Filter. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country (Complex Object as Value)"}]},{"type":"text","value":" column is supplied a complex object through "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.field"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Key Creator is supplied to the filter using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.filterParams.keyCreator = countryCodeKeyCreator"}]},{"type":"text","value":" which extracts the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" property for the Set Filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A value formatter is supplied to the filter using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.filterParams.valueFormatter = countryValueFormatter"}]},{"type":"text","value":" which extracts the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" property for the Filter List."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A value formatter is supplied to the column using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.valueFormatter = countryValueFormatter"}]},{"type":"text","value":" which extracts the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" property for the cell values."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country (Complex Object as String)"}]},{"type":"text","value":" column is supplied the same complex object through "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.field"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.filterParams.convertValuesToStrings = true"}]},{"type":"text","value":" is set, which means the complex object will be converted to a string, and the same value used for both key and display purposes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A Key Creator is supplied to the filter using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.filterParams.keyCreator = countryNameKeyCreator"}]},{"type":"text","value":" which extracts the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" property for the Set Filter."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Print Filter Model"}]},{"type":"text","value":" with a filter active on "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country (Complex Object as Value)"}]},{"type":"text","value":" and note the logged Filter Model (dev console) uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"code"}]},{"type":"text","value":" property from the complex object."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Print Filter Model"}]},{"type":"text","value":" with a filter active on "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country (Complex Object as String)"}]},{"type":"text","value":" and note the logged Filter Model (dev console) uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" property from the complex object."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Complex Objects","name":"complex-objects","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 720, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"multiple-values-per-cell","style":"position:relative;"},"children":[{"type":"text","value":"Multiple Values Per Cell"},{"type":"element","tagName":"a","properties":{"href":"#multiple-values-per-cell","ariaLabel":"multiple values per cell permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes you might wish to support multiple values in a single cell, for example when using tags. In this case, the Set Filter can extract each of the individual values from the cells, creating an entry in the Filter List for each individual value. Selecting a value will then show rows where any of the values in the cell match the selected value."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates this in action. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (array)"}]},{"type":"text","value":" column uses an array in the data containing multiple values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (string)"}]},{"type":"text","value":" column uses a single string in the data to represent multiple values, with a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/value-getters/"},"children":[{"type":"text","value":"Value Getter"}]},{"type":"text","value":" used to extract an array of values from the data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (objects)"}]},{"type":"text","value":" column retrieves values from an array of objects, using a "},{"type":"element","tagName":"a","properties":{"href":"#complex-objects"},"children":[{"type":"text","value":"Key Creator"}]},{"type":"text","value":". The Key Creator is applied to the elements within the array (as is the Value Formatter). Note that if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"convertValuesToStrings"}]},{"type":"text","value":" is set in the filter params, the Key Creator will be applied to the raw value in the cell, and is expected to return an array of strings."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"For all scenarios, the Set Filter displays a list of all the individual, unique values present from the data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting values in the Set Filter will show rows where the data for that row contains "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"any"}]},{"type":"text","value":" of the selected values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first row contains empty arrays for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (array)"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (objects)"}]},{"type":"text","value":" columns, and an empty string for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Animals (string)"}]},{"type":"text","value":" column which is converted to an empty array. These all appear in the Filter List as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(Blanks)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Multiple Values","name":"multiple-values","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"default-state","style":"position:relative;"},"children":[{"type":"text","value":"Default State"},{"type":"element","tagName":"a","properties":{"href":"#default-state","ariaLabel":"default state permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, when the Set Filter is created all values are selected. If you would prefer to invert this behaviour and have everything de-selected by default, you can use the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'country',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                defaultToNothingSelected: true,\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this case, no filtering will occur until at least one value is selected."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that the default state cannot be changed if "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-excel-mode/"},"children":[{"type":"text","value":"Excel Mode"}]},{"type":"text","value":" is enabled."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates different default states. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Athlete column has everything selected when the Set Filter is first opened, which is the default"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Country column has nothing selected by default, as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultToNothingSelected = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the Set Filter for the Country column is opened, the grid is not filtered until at least one value has been selected."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Default State","name":"default-state","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filter-value-tooltips","style":"position:relative;"},"children":[{"type":"text","value":"Filter Value Tooltips"},{"type":"element","tagName":"a","properties":{"href":"#filter-value-tooltips","ariaLabel":"filter value tooltips permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set filter values that are too long to be displayed are truncated by default with ellipses. To allow users to see the full filter value, tooltips can be enabled as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'country',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                showTooltips: true,\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default tooltip component will be used unless a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-tooltip/"},"children":[{"type":"text","value":"Custom Tooltip Component"}]},{"type":"text","value":" is provided."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates tooltips in the Set Filter. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Filter values are automatically truncated with ellipses when the values are too long."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Col A"}]},{"type":"text","value":" does not have Set Filter Tooltips enabled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Col B"}]},{"type":"text","value":" has Set Filter Tooltips enabled via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.showTooltips=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Col C"}]},{"type":"text","value":" has Set Filter Tooltips enabled and is supplied a Custom Tooltip Component."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter Value Tooltips","name":"filter-value-tooltips","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 500, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/filter-set-data-updates/"},"children":[{"type":"text","value":"Data Updates"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Set Filter - Filter List","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"sorting-filter-lists","depth":2,"value":"Sorting Filter Lists"},{"id":"formatting-values","depth":2,"value":"Formatting Values"},{"id":"value-formatter","depth":3,"value":"Value Formatter"},{"id":"cell-renderer","depth":3,"value":"Cell Renderer"},{"id":"supplying-filter-values","depth":2,"value":"Supplying Filter Values"},{"id":"synchronous-values","depth":3,"value":"Synchronous Values"},{"id":"asynchronous-values","depth":3,"value":"Asynchronous Values"},{"id":"refreshing-values","depth":3,"value":"Refreshing Values"},{"id":"enabling-value-case-sensitivity","depth":2,"value":"Enabling Value Case-Sensitivity"},{"id":"missing-values","depth":2,"value":"Missing Values"},{"id":"filter-value-types","depth":2,"value":"Filter Value Types"},{"id":"complex-objects","depth":3,"value":"Complex Objects"},{"id":"multiple-values-per-cell","depth":2,"value":"Multiple Values Per Cell"},{"id":"default-state","depth":2,"value":"Default State"},{"id":"filter-value-tooltips","depth":2,"value":"Filter Value Tooltips"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/filter-set-filter-list","pageName":"filter-set-filter-list"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}