{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/filter-set-mini-filter/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section describes the behaviour of the Mini Filter and shows how it can be configured."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Mini Filter allows the user to search for particular values in the Filter List. Entering text into the Mini Filter will narrow down the presented list of values shown inside the Set Filter, but by default will not filter the data inside the grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-set-mini-filter/resources/mini-filter.gif","alt":"Mini Filter","constrained":"true","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"keyboard-shortcuts","style":"position:relative;"},"children":[{"type":"text","value":"Keyboard Shortcuts"},{"type":"element","tagName":"a","properties":{"href":"#keyboard-shortcuts","ariaLabel":"keyboard shortcuts 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":"When the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key is pressed while on the Mini Filter, the Set Filter will exclusively select all values in the Filter List that pass the Mini Filter and apply the filter immediately (note that even if an Apply Button is used, hitting "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" applies the filter)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Alternatively, you can choose to have the Mini Filter applied as the user is typing, i.e. as the Filter List is filtered, the Set Filter will be applied as described above so that the results in the grid will also be filtered at the same time. To enable this behaviour, 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                applyMiniFilterWhileTyping: true,\n            },\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates this behaviour. 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's Set Filter shows the Mini Filter with default behaviour. Try typing in the Mini Filter to search the Filter List, and then hit the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" key and notice how the grid is filtered using the displayed values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Country column's Set Filter applies the Mini Filter as you type because "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.applyMiniFilterWhileTyping = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Mini Filter Keyboard Shortcuts","name":"mini-filter-keyboard-shortcuts","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 565, \"modules\": [\"clientside\", \"setfilter\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-searches","style":"position:relative;"},"children":[{"type":"text","value":"Custom Searches"},{"type":"element","tagName":"a","properties":{"href":"#custom-searches","ariaLabel":"custom searches 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 it is necessary to provide custom handling for Mini Filter searches, for example to substitute accented characters."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As with the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-text/#text-formatter"},"children":[{"type":"text","value":"Text Filter"}]},{"type":"text","value":" it is possible to supply a Text Formatter to the Set Filter which formats the text before applying the Mini Filter compare logic. The snippet below shows how this can be configured:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'athlete',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                textFormatter: value => {\n                    return value\n                        .replace(/\\s/g, '')\n                        .replace(/[àáâãäå]/g, 'a')\n                        .replace(/æ/g, 'ae')\n                        .replace(/ç/g, 'c')\n                        .replace(/[èéêë]/g, 'e')\n                        .replace(/[ìíîï]/g, 'i')\n                        .replace(/ñ/g, 'n')\n                        .replace(/[òóôõö]/g, 'o')\n                        .replace(/œ/g, 'oe')\n                        .replace(/[ùúûü]/g, 'u')\n                        .replace(/[ýÿ]/g, 'y')\n                        .replace(/\\W/g, '');\n                }\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates searching when there are accented characters. 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's Set filter is supplied a text formatter via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.textFormatter"}]},{"type":"text","value":" to ignore accents."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Searching using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'bjorn'"}]},{"type":"text","value":" will return all values containing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'björn'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Mini Filter Text Formatter","name":"mini-filter-text-formatter","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 565, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-case-sensitive-searches","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Case-Sensitive Searches"},{"type":"element","tagName":"a","properties":{"href":"#enabling-case-sensitive-searches","ariaLabel":"enabling case sensitive searches 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 Mini Filter is case-insensitive. Practically this means that searching for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bl"}]},{"type":"text","value":" would match Filter List values of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Black"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"blue"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"BLONDE"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Case-sensitive searches 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 the values presented in the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-set-filter-list/#enabling-value-case-sensitivity"},"children":[{"type":"text","value":"Filter List"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-set-api/#enabling-case-sensitivity"},"children":[{"type":"text","value":"API"}]},{"type":"text","value":" behaviours."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-set-filter-list/#example-case-sensitive-set-filter-list"},"children":[{"type":"text","value":"Example: Filter List Case-Sensitivity"}]},{"type":"text","value":" for a demonstration of the change in behaviour."}]},{"type":"element","tagName":"h2","properties":{"id":"text-customisation","style":"position:relative;"},"children":[{"type":"text","value":"Text Customisation"},{"type":"element","tagName":"a","properties":{"href":"#text-customisation","ariaLabel":"text customisation 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":"Text used in the Mini Filter can be customised using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/localisation/"},"children":[{"type":"text","value":"Localisation"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The text shown as a placeholder in the Mini Filter textbox can be customised by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'searchOoo'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When no matching values are found when typing in the Mini Filter, a message is displayed. This can be customised by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'noMatches'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows this text being customised:"}]},{"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":"searchOOO"}]},{"type":"text","value":" is set so that the Mini Filter textbox displays "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Search values...'"}]},{"type":"text","value":" instead of the default text "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'Search...'"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"noMatches"}]},{"type":"text","value":" is set so that when no matches are found for the Mini Filter search, the message displays "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'No matches could be found.'"}]},{"type":"text","value":" instead of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'No matches.'"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Text Customisation","name":"text-customisation","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"hiding-the-mini-filter","style":"position:relative;"},"children":[{"type":"text","value":"Hiding the Mini Filter"},{"type":"element","tagName":"a","properties":{"href":"#hiding-the-mini-filter","ariaLabel":"hiding the mini filter 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 Mini Filter is shown whenever the Set Filter is used. If you would like to hide it, 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                suppressMiniFilter: true,\n            },\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates hiding the mini filter. 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's Set Filter shows the Mini Filter by default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Country column's Set Filter does not have a Mini Filter as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.suppressMiniFilter = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Hiding the Mini Filter","name":"mini-filter-hiding","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 565, \"modules\": [\"clientside\", \"setfilter\", \"menu\"] }"},"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.3/filter-set-excel-mode/"},"children":[{"type":"text","value":"Excel Mode"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Set Filter - Mini Filter","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"keyboard-shortcuts","depth":2,"value":"Keyboard Shortcuts"},{"id":"custom-searches","depth":2,"value":"Custom Searches"},{"id":"enabling-case-sensitive-searches","depth":2,"value":"Enabling Case-Sensitive Searches"},{"id":"text-customisation","depth":2,"value":"Text Customisation"},{"id":"hiding-the-mini-filter","depth":2,"value":"Hiding the Mini Filter"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/filter-set-mini-filter","pageName":"filter-set-mini-filter"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}