{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/floating-filters/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Floating Filters are an additional row under the column headers where the user will be able to see and optionally edit the filters associated with each column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Floating filters are activated by setting the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"floatingFilter = true"}]},{"type":"text","value":" on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // column definition with floating filter enabled\n        {\n            field: 'country',\n            filter: true,\n            floatingFilter: true\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To have floating filters on for all columns by default, you should set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"floatingFilter"}]},{"type":"text","value":" on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef"}]},{"type":"text","value":". You can then disable floating filters on a per-column basis by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"floatingFilter = false"}]},{"type":"text","value":" on an individual "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Floating filters depend on and co-ordinate with the main column filters. They do not have their own state, but rather display the state of the main filter and set state on the main filter if they are editable. For this reason, there is no API for getting or setting state of the floating filters."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Every floating filter takes a parameter to show/hide automatically a button that will open the main filter."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To see how floating filters work see "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/component-floating-filter/"},"children":[{"type":"text","value":"Floating Filter Components"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows the following features of floating filters:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Text filter: has out of the box read/write floating filter (Sport column)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set filter: has out of the box read-only floating filter (Country column)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Date and Number filter: have out of the box read/write floating filters for all filters except when switching to in-range filtering, where the floating filter is read-only (Age and Date columns)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"buttons"}]},{"type":"text","value":" containing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'apply'"}]},{"type":"text","value":" require the user to press "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" on the floating filter for the filter to take effect (Gold column). ("},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" this does not apply to floating Date Filters, which are always applied as soon as a valid date is entered.)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Changes made directly to the main filter are reflected automatically in the floating filters (change any main filter)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns with a custom filter have an automatic read-only floating filter if the custom filter implements the method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getModelAsString()"}]},{"type":"text","value":" (Athlete column)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The user can configure when to show/hide the button that shows the full filter (Silver and Bronze columns)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Year column has a filter, but has the floating filter disabled"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Total column has no filter and therefore no floating filter either"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Combining "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMenu = true"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filter = false"}]},{"type":"text","value":" lets you control where the user can access the full filter. In this example "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMenu = true"}]},{"type":"text","value":" for all the columns except Year, Silver and Bronze"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Floating Filter","name":"floating-filter","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 615, \"modules\": [\"clientside\", \"setfilter\", \"menu\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"provided-floating-filters","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#provided-floating-filters","ariaLabel":"provided floating 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":"Provided Floating Filters"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All the default filters provided by the grid provide their own implementation of a floating filter. All you need to do to enable these floating filters is set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"floatingFilter = true"}]},{"type":"text","value":" column property. The features of the provided floating filters are as follows:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Editable"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Text"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Sometimes"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Provides a text input field to display the filter value, or a read-only label if read-only."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Number"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Sometimes"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Provides a text input field to display the filter value, or a read-only label if read-only."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Sometimes"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Provides a date input field to display the filter value, or a read-only label if read-only."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Set"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"No"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Provides a read-only label by concatenating all selected values."}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The floating filters for Text, Number and Date (the simple filters) are editable when the filter has one condition and one value. If the floating filter has a) two conditions or b) zero (custom option) or two ('In Range') values, the floating filter is read-only."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The screen shots below show example scenarios where the provided Number floating filter is editable and read-only."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"One Value and One Condition - Editable"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"image-caption","properties":{"src":"floating-filters/resources/oneValueOneCondition.png","alt":"One Value One Condition","width":"24rem"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"One Value and Two Conditions - Read-Only"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"image-caption","properties":{"src":"floating-filters/resources/oneValueTwoConditions.png","alt":"One Value Two Conditions","width":"24rem"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Two Values and One Condition - Read-Only"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"image-caption","properties":{"src":"floating-filters/resources/twoValuesOneCondition.png","alt":"Two Values One Condition","width":"24rem"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"frontmatter":{"title":"Floating Filters","version":null,"enterprise":null,"description":null},"headings":[{"id":"provided-floating-filters","depth":2,"value":"Provided Floating Filters"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/floating-filters","pageName":"floating-filters"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}