{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/tool-panel-filters/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filters Tool Panel"}]},{"type":"text","value":" allows accessing the grid's filters without needing to open up the column menu."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the filters tool panel. The following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns Athlete, Age, Country, Year and Date appear in the filter tool panel as they have filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns Gold, Silver, Bronze and Total do not appear in the filter tool panel as they have no filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking on a column in the filter tool panel will show the filter below the column name. Clicking a second time will hide the filter again."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns with filters active will have the filter icon appear beside the filter name in the tool panel."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter Tool Panel","name":"simple","type":"mixed","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"setfilter\", \"filterpanel\"]}"},"children":[]},{"type":"text","value":" "}]},{"type":"element","tagName":"h2","properties":{"id":"suppress-options","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#suppress-options","ariaLabel":"suppress options 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":"Suppress Options"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to remove items from the Filters Tool Panel. Items are suppressed by setting one or more of the following "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toolPanelParams"}]},{"type":"text","value":" whenever you are using the agFiltersToolPanel component properties to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ToolPanelFiltersCompParams","exclude":"[\"api\", \"columnApi\"]","config":"{\"overrideBottomMargin\":\"1rem\"}"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To remove a particular column / filter from the tool panel, set the column property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressFiltersToolPanel"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"filtering","names":"[\"suppressFiltersToolPanel\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the suppress options described above. 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":"Expand / Collapse All"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filter Search"}]},{"type":"text","value":" are hidden as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressExpandAll"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressFilterSearch"}]},{"type":"text","value":" are both set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The date column / filter is hidden from the tool panel using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.suppressFiltersToolPanel=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Suppress Options","name":"suppress-options","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"setfilter\", \"filterpanel\"], \"exampleHeight\": 610 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filter-instances","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filter-instances","ariaLabel":"filter 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":"Filter Instances"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The filters provided in the tool panel are the same instances as the filter in the column menu. This has the following implications:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Configuration relating to filters equally applies when the filters appear in the tool panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The filter behaves exactly as when it appears in the column menu. E.g. the Apply button will have the same meaning when used in the tool panel. Also the relationship with the Floating Filter (if active) will be the same."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If the filter is open on the tool panel and then the user subsequently opens the column menu, the tool panel filter will be closed. Because the filter is the same filter instance, it will only appear at one location at any given time."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"expand--collapse-filter-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#expand--collapse-filter-groups","ariaLabel":"expand  collapse filter groups 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":"Expand / Collapse Filter Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to expand and collapse filter groups in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"IFiltersToolPanel"}]},{"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","function"]},"children":[{"type":"text","value":"expandFilterGroups"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"groupIds"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"void"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"collapseFilterGroups"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"groupIds"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"void"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other methods"}]},{"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":"The code snippet below shows how to expand and collapse filter groups using the Filters Tool Panel instance:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// lookup Filters Tool Panel instance by id, in this case using the default filter instance id\n|const filtersToolPanel = gridOptions.api.getToolPanelInstance('filters');\n|\n|// expands all filter groups in the Filters Tool Panel\n|filtersToolPanel.expandFilterGroups();\n|\n|// collapses all filter groups in the Filters Tool Panel\n|filtersToolPanel.collapseFilterGroups();\n|\n|// expands the 'athlete' and 'competition' filter groups in the Filters Tool Panel\n|filtersToolPanel.expandFilterGroups(['athleteGroupId', 'competitionGroupId']);\n|\n|// collapses the 'competition' filter group in the Filters Tool Panel\n|filtersToolPanel.collapseFilters(['competitionGroupId']);\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice in the snippet above that it's possible to target individual filter groups by supplying "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":"s."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates these methods in action. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the grid is initialised, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseFilterGroups()"}]},{"type":"text","value":" is invoked in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"onGridReady"}]},{"type":"text","value":" callback to collapse all filter groups in the tool panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Expand Athlete & Competition"}]},{"type":"text","value":" just expands the 'Athlete' and 'Competition' filter groups using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandFilterGroups(['athleteGroupId', 'competitionGroupId'])"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Collapse Competition"}]},{"type":"text","value":" just collapses the 'Competition' filter group using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseFilterGroups(['competitionGroupId'])"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Expand All"}]},{"type":"text","value":" expands all filter groups using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandFilterGroups()"}]},{"type":"text","value":". Note that 'Sport' is not expanded as it is not a filter group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Collapse All"}]},{"type":"text","value":" collapses all filter groups using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseFilterGroups()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Expand / Collapse Groups","name":"expand-collapse-groups","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"setfilter\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"expand--collapse-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#expand--collapse-filters","ariaLabel":"expand  collapse 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":"Expand / Collapse Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to expand and collapse the filters in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"IFiltersToolPanel"}]},{"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","function"]},"children":[{"type":"text","value":"expandFilters"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"colIds"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"void"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"collapseFilters"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"colIds"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"string"}]},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"void"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other methods"}]},{"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":"The code snippet below shows how to expand and collapse filters using the Filters Tool Panel instance:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// lookup Filters Tool Panel instance by id, in this case using the default filter instance id\n|const filtersToolPanel = gridOptions.api.getToolPanelInstance('filters');\n|\n|// expands all filters in the Filters Tool Panel\n|filtersToolPanel.expandFilters();\n|\n|// collapses all filters in the Filters Tool Panel\n|filtersToolPanel.collapseFilters();\n|\n|// expands 'year' and 'sport' filters in the Filters Tool Panel\n|filtersToolPanel.expandFilters(['year', 'sport']);\n|\n|// collapses the 'year' filter in the Filters Tool Panel\n|filtersToolPanel.expandFilters(['year']);\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice in the snippet above that it's possible to target individual filters by supplying "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":"s."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates these methods in action. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the grid is initialised all filters are collapsed by default"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Expand Year & Sport"}]},{"type":"text","value":" just expands the 'year' and 'sport' filters by invoking: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandFilters(['year', 'sport'])"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Collapse Year"}]},{"type":"text","value":" just collapses the 'year' filter using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseFilters(['year'])"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Expand All"}]},{"type":"text","value":" expands all filters using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandFilters()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Collapse All"}]},{"type":"text","value":" collapses all filters using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"collapseFilters()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Expand / Collapse Filters","name":"expand-collapse-filters","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"setfilter\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-filters-layout","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-filters-layout","ariaLabel":"custom filters layout 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":"Custom Filters Layout"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The order of columns in the Filters Tool Panel is derived from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":" supplied in the grid options, and is kept in sync with the grid when columns are moved by default. However custom filter layouts can also be defined by invoking the following method on the Filters Tool Panel Instance:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"interface"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"IFiltersToolPanel"}]},{"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","function"]},"children":[{"type":"text","value":"setFilterLayout"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"colDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" ColDef"},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"void"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other methods"}]},{"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":"Notice that the same "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/column-definitions/"},"children":[{"type":"text","value":"Column Definitions"}]},{"type":"text","value":" that are supplied in the grid options are also passed to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterLayout(colDefs)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The code snippets below show how to set custom filter layouts using the Filters Tool Panel instance:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // original column definitions supplied to the grid\n    columnDefs: [\n        { field: 'a' },\n        { field: 'b' },\n        { field: 'c' },\n    ]\n}\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// lookup Filters Tool Panel instance by id, in this case using the default columns instance id\n|const filtersToolPanel = gridOptions.api.getToolPanelInstance('filters');\n|\n|// set custom Filters Tool Panel layout\n|filtersToolPanel.setFilterLayout([\n|    {\n|        headerName: 'Group 1', // group doesn't appear in grid\n|        children: [\n|            { field: 'c' }, // custom column order with column \"b\" omitted\n|            { field: 'a' }\n|        ]\n|    }\n|]);\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice from the snippet above that it's possible to define groups in the tool panel that don't exist in the grid. Also note that filters can be omitted or positioned in a different order however note that all referenced columns (that contain filters) must already exist in the grid."}]},{"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 a custom layout it is recommend to enable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSyncLayoutWithGrid"}]},{"type":"text","value":" in the\ntool panel params to prevent users changing the layout when moving columns in the grid."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows two custom layouts for the Filters Tool Panel. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the grid is initialised the filter layout in the Filters Tool Panel matches what is supplied to the grid in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.columnDefs"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Custom Sort Layout"}]},{"type":"text","value":" invokes "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterLayout(colDefs)"}]},{"type":"text","value":" with a list of column definitions arranged in ascending order."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Custom Group Layout"}]},{"type":"text","value":" invokes "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setFilterLayout(colDefs)"}]},{"type":"text","value":" with a list of column definitions containing groups that don't appear in the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Moving columns in the grid won't affect the custom layouts as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSyncLayoutWithGrid"}]},{"type":"text","value":" is enabled."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Custom Filters Layout","name":"custom-layout","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"setfilter\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up 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":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that we covered the provided Tool Panels, learn how to create "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/component-tool-panel/"},"children":[{"type":"text","value":"Custom Tool Panel Components"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Filters Tool Panel","version":null,"enterprise":true,"description":null},"headings":[{"id":"suppress-options","depth":2,"value":"Suppress Options"},{"id":"filter-instances","depth":2,"value":"Filter Instances"},{"id":"expand--collapse-filter-groups","depth":2,"value":"Expand / Collapse Filter Groups"},{"id":"expand--collapse-filters","depth":2,"value":"Expand / Collapse Filters"},{"id":"custom-filters-layout","depth":2,"value":"Custom Filters Layout"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/tool-panel-filters","pageName":"tool-panel-filters"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}