{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/filter-provided/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section describes the functionality common to all filters that are provided by the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid provides four filters out of the box: three "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-provided-simple/"},"children":[{"type":"text","value":"Simple Filters"}]},{"type":"text","value":" (Text, Number and Date), and an advanced "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":" which is available in the Enterprise version of the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Follow the links below to learn more about each specific filter:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-text/"},"children":[{"type":"text","value":"Text"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-number/"},"children":[{"type":"text","value":"Number"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-date/"},"children":[{"type":"text","value":"Date"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"element","tagName":"enterprise-icon","properties":{},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The rest of this section will cover concepts that are common to every provided filter."}]},{"type":"element","tagName":"h2","properties":{"id":"structure-of-provided-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#structure-of-provided-filters","ariaLabel":"structure of provided 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":"Structure of Provided Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The diagram below outlines the structure of the filters. Each box represents a filter type with the functions listed in it. For example, all provided filters have button logic, but only the Date filter has a Date Comparator or a Date Picker."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-provided/resources/provided-filters.png","alt":"Provided Filters","width":"52rem","centered":"true","constrained":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"provided-filter-ui","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#provided-filter-ui","ariaLabel":"provided 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":"Provided Filter UI"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each provided filter is displayed in a UI with optional buttons at the bottom."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-provided/resources/filter-content.png","alt":"Filter Content","width":"18rem","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"provided-filter-params","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#provided-filter-params","ariaLabel":"provided filter params 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":"Provided Filter Params"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All the provided filters have the following parameters:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IProvidedFilterParams","names":"[\"buttons\",\"closeOnApply\",\"debounceMs\",\"readOnly\"]","config":"{\"description\":\"\"}","overridesrc":"filter-provided/resources/provided-filters.json"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"provided-filter-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#provided-filter-api","ariaLabel":"provided filter api 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":"Provided Filter API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provided Filters provide the following methods:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"IProvidedFilter","names":"[\"isFilterActive\",\"getModel\",\"setModel\",\"getModelFromUi\",\"applyModel\"]","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"apply-clear-reset-and-cancel-buttons","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#apply-clear-reset-and-cancel-buttons","ariaLabel":"apply clear reset and cancel buttons 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":"Apply, Clear, Reset and Cancel Buttons"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each of the provided filters can optionally include Apply, Clear, Reset and Cancel buttons."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the Apply button is used, the filter is only applied once the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if using server-side filtering (thus preventing unnecessary calls to the server)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Clear button clears just the filter UI, whereas the Reset button clears the filter UI and removes any active filters for that column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Cancel button will discard any changes that have been made in the UI, restoring the state of the filter to match the applied model."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The buttons will be displayed in the order they are specified in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"buttons"}]},{"type":"text","value":" array."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates using the different buttons. It also demonstrates the relationship between the buttons and filter events. 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":"Athlete"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" columns have filters with Apply and Reset buttons, but different orders."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column has a filter with Apply and Clear buttons."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column has a filter with Apply and Cancel buttons."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"closeOnApply"}]},{"type":"text","value":" set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", so the filter popup will be closed immediately when the filter is applied, reset or cancelled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onFilterOpened"}]},{"type":"text","value":" is called when the filter is opened."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onFilterModified"}]},{"type":"text","value":" is called when the filter changes regardless of whether the Apply button is present."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onFilterChanged"}]},{"type":"text","value":" is called only after a new filter is applied."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Looking at the console, it can be noted when a filter is changed, the result of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModel()"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModelFromUi()"}]},{"type":"text","value":" are different. The first reflects the active filter, while the second reflects what is in the UI (and not yet applied)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Buttons and Filter Events","name":"buttons-and-filter-events","type":"generated","options":"{ \"enterprise\": false, \"exampleHeight\": 560, \"modules\": [\"clientside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"applying-the-ui-model","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#applying-the-ui-model","ariaLabel":"applying the ui model 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":"Applying the UI Model"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Provided filters maintain a separate model representing what is shown in the UI, which might change without having yet been applied, for example when an Apply button is present and the user has made changes in the UI but not yet clicked Apply. Calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModelFromUi()"}]},{"type":"text","value":" will always return a model representing the current UI, whereas "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModel()"}]},{"type":"text","value":" will return the applied model that is currently being used for filtering."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If any changes are made in the UI when the Apply button is active, or via other API methods whether the Apply button is active or not, you must call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterInstance.applyModel()"}]},{"type":"text","value":" if you want to ensure the UI is applied."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Applying the model is then typically followed by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridApi.onFilterChanged()"}]},{"type":"text","value":" to tell the grid to re-run the filtering."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// Get a reference to the 'name' filter instance\n|const filterInstance = gridOptions.api.getFilterInstance('name');\n|\n|// Apply the model to ensure any changes in the UI or via API methods are recognised\n|filterInstance.applyModel();\n|\n|// Tell grid to run filter operation again\n|gridOptions.api.onFilterChanged();\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If no call is made to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterInstance.applyModel()"}]},{"type":"text","value":" then the filter UI will show any changes that have been made, but they won't be reflected in the filter model and therefore won't be reflected in the filtering. This will appear as if the user never hit the Apply button (regardless of whether the Apply button is active or not)."}]}]},"frontmatter":{"title":"Provided Filters","version":null,"enterprise":null,"description":null},"headings":[{"id":"structure-of-provided-filters","depth":2,"value":"Structure of Provided Filters"},{"id":"provided-filter-ui","depth":2,"value":"Provided Filter UI"},{"id":"provided-filter-params","depth":2,"value":"Provided Filter Params"},{"id":"provided-filter-api","depth":2,"value":"Provided Filter API"},{"id":"apply-clear-reset-and-cancel-buttons","depth":2,"value":"Apply, Clear, Reset and Cancel Buttons"},{"id":"applying-the-ui-model","depth":2,"value":"Applying the UI Model"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/filter-provided","pageName":"filter-provided"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}