{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/filter-api/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can access and set the models for filters through the grid API, or access individual filter instances directly for more control. This page details how to do both."}]},{"type":"element","tagName":"h2","properties":{"id":"get--set-all-filter-models","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#get--set-all-filter-models","ariaLabel":"get  set all filter models permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Get / Set All Filter Models"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to get the state of all filters using the grid API method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getFilterModel()"}]},{"type":"text","value":", and to set the state using\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterModel()"}]},{"type":"text","value":". These methods manage the filters states via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModel()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setModel()"}]},{"type":"text","value":" methods of the\nindividual filters."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"filter","names":"[\"getFilterModel\", \"setFilterModel\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// Gets filter model via the grid API\n|const model = gridOptions.api.getFilterModel();\n|\n|// Sets the filter model via the grid API\n|gridOptions.api.setFilterModel(model);\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The filter model represents the state of filters for all columns and has the following structure:"}]},{"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":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Sample filter model via getFilterModel()"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    athlete"},{"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":"text","value":"\n        filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'text'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'startsWith'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'mich'"}]},{"type":"text","value":"\n    "},{"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    age"},{"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":"text","value":"\n        filterType"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'number'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        type"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'lessThan'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"30"}]},{"type":"text","value":"\n    "},{"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":"p","properties":{},"children":[{"type":"text","value":"This is useful if you want to save the global filter state and apply it at a later stage. It is also useful for server-side filtering, where you want to pass the filter state to the server."}]},{"type":"element","tagName":"h3","properties":{"id":"reset-all-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#reset-all-filters","ariaLabel":"reset all filters permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Reset All Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can reset all filters by doing the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\ngridOptions.api.setFilterModel(null);\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-get--set-all-filter-models","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-get--set-all-filter-models","ariaLabel":"example get  set all filter models permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Get / Set All Filter Models"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows getting and setting all the filter models in action."}]},{"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":"Save Filter Model"}]},{"type":"text","value":" saves the current filter state, which will then be displayed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Restore Saved Filter Model"}]},{"type":"text","value":" restores the saved filter state back into the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Set Custom Filter Model"}]},{"type":"text","value":" takes a custom hard-coded filter model and applies it to the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Reset Filters"}]},{"type":"text","value":" will clear all active filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Destroy Filter"}]},{"type":"text","value":" destroys the filter for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.destroyFilter('athlete')"}]},{"type":"text","value":". This removes any active filter from that column, and will cause the filter to be created with new initialisation values the next time it is interacted with."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"(Note: the example uses the Enterprise-only "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":")."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter Model","name":"filter-model","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 587, \"modules\": [\"clientside\", \"menu\", \"filterpanel\", \"columnpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"accessing-individual-filter-component-instances","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#accessing-individual-filter-component-instances","ariaLabel":"accessing individual filter component instances permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Accessing Individual Filter Component Instances"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to access the filter components directly if you want to interact with a specific filter. This also works for your own custom filters, where you can get a reference to the underlying filtering instance (i.e. what was created when AG Grid called "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" on your filter). Calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getFilterInstance(colKey)"}]},{"type":"text","value":" will return a reference to the filter instance for the column with key "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colKey"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"filter","names":"[\"getFilterInstance\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// Get a reference to the 'name' filter instance\nconst filterInstance = gridOptions.api.getFilterInstance('name');\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All of the methods of the filter are available on the instance. If using a custom filter, any other methods you have added will also be present, allowing bespoke behaviour to be added to your filter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For filters that are created asynchronously, including React 16+ components, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getFilterInstance"}]},{"type":"text","value":" will return "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" if the filter has not already been created. If your app uses asynchronous components, use the optional "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"callback"}]},{"type":"text","value":" function which will be invoked with the filter instance when it is available."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// Get a reference to an asynchronously created filter instance\ngridOptions.api.getFilterInstance('name', filterInstance => {\n    // ... use filterInstance here\n});\n"}]},{"type":"element","tagName":"h3","properties":{"id":"re-running-grid-filtering","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#re-running-grid-filtering","ariaLabel":"re running grid filtering permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Re-running Grid Filtering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After filters have been changed via their API, you must ensure the method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.onFilterChanged()"}]},{"type":"text","value":" is called to tell the grid to filter the rows again. If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.onFilterChanged()"}]},{"type":"text","value":" is not called, the grid will still show the data relevant to the filters before they were updated through the API."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// Get a reference to the filter instance\n|const filterInstance = gridOptions.api.getFilterInstance('name');\n|\n|// Set the filter model\n|filterInstance.setModel({\n|    filterType: 'text',\n|    type: 'startsWith',\n|    filter: 'abc',\n|});\n|\n|// Tell grid to run filter operation again\n|gridOptions.api.onFilterChanged();\n"}]},{"type":"element","tagName":"h3","properties":{"id":"reset-individual-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#reset-individual-filters","ariaLabel":"reset individual filters permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Reset Individual Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can reset a filter to its original state by getting the filter instance and setting the model to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// Get a reference to the filter instance\n|const filterInstance = gridOptions.api.getFilterInstance('name');\n|\n|// Set the model to null\n|filterInstance.setModel(null);\n|\n|// Tell grid to run filter operation again\n|gridOptions.api.onFilterChanged();\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-accessing-individual-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-accessing-individual-filters","ariaLabel":"example accessing individual filters permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Accessing Individual Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows how you can interact with an individual filter instance, using the Set Filter as an example."}]},{"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":"Get Mini Filter Text"}]},{"type":"text","value":" will print the text from the Set Filter's Mini Filter to the console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Save Mini Filter Text"}]},{"type":"text","value":" will save the Mini Filter text."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Restore Mini Filter Text"}]},{"type":"text","value":" will restore the Mini Filter text from the saved state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Reset Filter"}]},{"type":"text","value":" will reset the filter."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"(Note: the example uses the Enterprise-only "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":")."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Accessing Individual Filters","name":"filter-api","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 624, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"read-only-filter-ui","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#read-only-filter-ui","ariaLabel":"read only filter ui permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Read-only Filter UI"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes it maybe useful to strictly control the filters used by the grid via API, whilst still exposing filter settings in-use to users. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"readOnly"}]},{"type":"text","value":" filter parameter changes the behaviour of all provided column filters so their UI is read-only. In this mode, API filter changes are still honoured and reflected in the UI:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'age',\n            filter: true,\n            filterParams: {\n                readOnly: true\n            }\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates all of the provided filters with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"readOnly: true"}]},{"type":"text","value":" enabled:"}]},{"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":"a","properties":{"href":"/archive/28.2.1/filter-provided-simple/"},"children":[{"type":"text","value":"Simple Column Filters"}]},{"type":"text","value":" have a read-only display with no buttons; if there is no 2nd condition set then the join operator and 2nd condition are hidden:"}]},{"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":"athlete"}]},{"type":"text","value":" column demonstrates "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-text/"},"children":[{"type":"text","value":"Text Filter"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"year"}]},{"type":"text","value":" columns demonstrate "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-number/"},"children":[{"type":"text","value":"Number Filter"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"date"}]},{"type":"text","value":" column demonstrates "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-date/"},"children":[{"type":"text","value":"Date Filter"}]},{"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":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":" allows Mini Filter searching of values, but value inclusion/exclusion cannot be toggled; buttons are also hidden, and pressing enter in the Mini Filter input has no effect:"}]},{"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":"country"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gold"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"silver"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"bronze"}]},{"type":"text","value":" columns demonstrate "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"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":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-multi/"},"children":[{"type":"text","value":"Multi Filter"}]},{"type":"text","value":" has no direct behaviour change, sub-filters need to be individually made read-only. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"readOnly: true"}]},{"type":"text","value":" is needed to affect any associated "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/floating-filters/"},"children":[{"type":"text","value":"Floating Filters"}]},{"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":"sport"}]},{"type":"text","value":" column demonstrates "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-multi/"},"children":[{"type":"text","value":"Multi Filter"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/floating-filters/"},"children":[{"type":"text","value":"Floating Filters"}]},{"type":"text","value":" are enabled and inherit "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"readOnly: true"}]},{"type":"text","value":" from their parent, disabling any UI input."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Buttons above the grid provide API interactions to configure the filters."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Read-only Filter UI","name":"filter-api-readonly","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 624, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"multifilter\"] }"},"children":[]}]}]},"frontmatter":{"title":"Filter API","version":null,"enterprise":null,"description":null},"headings":[{"id":"get--set-all-filter-models","depth":2,"value":"Get / Set All Filter Models"},{"id":"reset-all-filters","depth":3,"value":"Reset All Filters"},{"id":"example-get--set-all-filter-models","depth":3,"value":"Example: Get / Set All Filter Models"},{"id":"accessing-individual-filter-component-instances","depth":2,"value":"Accessing Individual Filter Component Instances"},{"id":"re-running-grid-filtering","depth":3,"value":"Re-running Grid Filtering"},{"id":"reset-individual-filters","depth":3,"value":"Reset Individual Filters"},{"id":"example-accessing-individual-filters","depth":3,"value":"Example: Accessing Individual Filters"},{"id":"read-only-filter-ui","depth":2,"value":"Read-only Filter UI"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/filter-api","pageName":"filter-api"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}