{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/filter-set-tree-list/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section describes the behaviour of the Set Filter Tree List and shows how it can be configured."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Tree List allows the user to display the values in the Filter List grouped in a tree structure."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"filter-set-tree-list/resources/set-filter-tree-list.png","alt":"Filter Tree List","constrained":"true","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-tree-lists","style":"position:relative;"},"children":[{"type":"text","value":"Enabling Tree Lists"},{"type":"element","tagName":"a","properties":{"href":"#enabling-tree-lists","ariaLabel":"enabling tree lists permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tree List is enabled by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":". There are four different ways the tree structure can be created:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column values are of type "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":", in which case the tree will be year -> month -> day."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tree Data mode is enabled and the column is a group column. The Filter List will match the tree structure. A Key Creator must be supplied to convert the array of keys."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Grouping is enabled and the column is the group column. The Filter List will match the group structure. A Key Creator must be supplied to convert the array of keys."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeListPathGetter"}]},{"type":"text","value":" is provided to get a custom tree path for the column values. If the column values are "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-filter-list/#complex-objects"},"children":[{"type":"text","value":"Complex Objects"}]},{"type":"text","value":", a Key Creator will also be required."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ISetFilterParams","names":"[\"treeListPathGetter\",\"keyCreator\"]","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'date',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                treeList: true,\n            }\n        }\n    ],\n    autoGroupColumnDef: {\n        field: 'athlete',\n        filter: 'agSetColumnFilter',\n        filterParams: {\n            treeList: true,\n            keyCreator: params => params.value.join('#')\n        },\n    },\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates enabling different types of Tree List in the Set Filter. 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":"Group"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":" columns all have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column Filter List matches the format of the Row Grouping. A Key Creator is specified to convert the path into a string."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column is grouped by year -> month -> day."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":" column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeListPathGetter"}]},{"type":"text","value":" provided which groups the values into a tree of >2 and <=2."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filter Tree List","name":"filter-tree-list","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"sorting-tree-lists","style":"position:relative;"},"children":[{"type":"text","value":"Sorting Tree Lists"},{"type":"element","tagName":"a","properties":{"href":"#sorting-tree-lists","ariaLabel":"sorting tree lists permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sorting values for Tree Lists is similar to "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-filter-list/#sorting-filter-lists"},"children":[{"type":"text","value":"Sorting Filter Lists"}]},{"type":"text","value":", with the exception that if the column values are of type "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":", they will instead be sorted based on the raw date values."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A Comparator can be used to change the sort order of Tree Lists just like with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-filter-list/#sorting-filter-lists"},"children":[{"type":"text","value":"Sorting Filter Lists"}]},{"type":"text","value":", with the same conditions applying. For Tree Lists, the Comparator is applied to the child values, sorting the entire tree in one pass rather than for each level. The Comparator will be provided the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column value for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" objects and custom tree paths."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The tree path ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string[]"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":") for Tree Data and Grouping."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates changing the sorting of the Tree List. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tree Data is turned on via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"treeData = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Employee"}]},{"type":"text","value":" column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":" and the Filter List matches the format of the Tree Data. A Key Creator is specified to convert the path into a string."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Employee"}]},{"type":"text","value":" column has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.comparator"}]},{"type":"text","value":" supplied which displays the Filter List in reverse alphabetical order."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":". It also has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.comparator"}]},{"type":"text","value":" supplied which displays the Filter List in reverse date order."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sorting Tree Lists","name":"sorting-tree-lists","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"formatting-values","style":"position:relative;"},"children":[{"type":"text","value":"Formatting Values"},{"type":"element","tagName":"a","properties":{"href":"#formatting-values","ariaLabel":"formatting values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The values can be formatted in the Filter List via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeListFormatter"}]},{"type":"text","value":". This allows a different format to be used for each level of the tree."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ISetFilterParams","names":"[\"treeListFormatter\"]","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'date',\n            filter: 'agSetColumnFilter',\n            filterParams: {\n                treeList: true,\n                treeListFormatter: (pathKey, level, parentPathKeys) => {\n                    if (level === 0 && pathKey) {\n                        return `Year ${pathKey}`;\n                    }\n                    return pathKey;\n                }\n            }\n        }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If a formatter is provided, it will also need to handle "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-filter-list/#missing-values"},"children":[{"type":"text","value":"Missing Values"}]},{"type":"text","value":", which will have a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pathKey"}]},{"type":"text","value":" of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":". Without a formatter, these are displayed as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(Blanks)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.valueFormatter"}]},{"type":"text","value":" is not used in the Filter List when "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":". However, it is still used to format the values displayed in the Floating Filter. The value provided to the Value Formatter is the original value, e.g. a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" object for dates, the path for Tree Data or Grouping, or the column value for a custom tree path."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates formatting the Tree List. 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":"Group"}]},{"type":"text","value":" column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group"}]},{"type":"text","value":" column has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeListFormatter"}]},{"type":"text","value":" provided which formats the country values in the Filter List to add a two letter country code. Missing values are formatted as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(Blanks)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeListFormatter"}]},{"type":"text","value":" provided which formats the numerical month value to display as the name of the month. Missing values are formatted as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"(Blanks)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a date is filtered in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" column , "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.valueFormatter"}]},{"type":"text","value":" is used to format the value displayed in the Floating Filter."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Formatting Tree List Values","name":"formatting-tree-list-values","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"complex-objects","style":"position:relative;"},"children":[{"type":"text","value":"Complex Objects"},{"type":"element","tagName":"a","properties":{"href":"#complex-objects","ariaLabel":"complex objects permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-filter-list/#complex-objects"},"children":[{"type":"text","value":"Complex Objects"}]},{"type":"text","value":" can be used with Tree List in the same way as with a normal Set Filter List."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates complex objects being used with Tree Data and the Tree List. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tree Data is turned on via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"treeData = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Employee"}]},{"type":"text","value":" column contains complex objects and has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterParams.treeList = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The data path returned by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDataPath"}]},{"type":"text","value":" does not have unique IDs at each level. The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Employee"}]},{"type":"text","value":" column has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"treeListFormatter"}]},{"type":"text","value":" defined which uses the parent path keys to get the full route to the node, so that the correct value can be displayed in the Tree List."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Tree List Complex Objects","name":"tree-list-complex-objects","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"setfilter\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"mini-filter-behaviour","style":"position:relative;"},"children":[{"type":"text","value":"Mini Filter Behaviour"},{"type":"element","tagName":"a","properties":{"href":"#mini-filter-behaviour","ariaLabel":"mini filter behaviour permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" When searching in the Mini Filter, all children will be included when a parent matches the search value. A parent will be included if it has any children that match the search value, or it matches itself."}]},{"type":"element","tagName":"h2","properties":{"id":"filter-value-tooltips","style":"position:relative;"},"children":[{"type":"text","value":"Filter Value Tooltips"},{"type":"element","tagName":"a","properties":{"href":"#filter-value-tooltips","ariaLabel":"filter value tooltips permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using Tree List with a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-tooltip/"},"children":[{"type":"text","value":"Custom Tooltip Component"}]},{"type":"text","value":", the tooltip params will be of type "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ISetFilterTreeListTooltipParams"}]},{"type":"text","value":" which extends the Custom Tooltip params to include the level of the item within the tree."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Additional property available on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ISetFilterTreeListTooltipParams"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ISetFilterTreeListTooltipParams","names":"[\"level\"]","config":"{\"description\":\"\"}"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/filter-set-mini-filter/"},"children":[{"type":"text","value":"Mini Filter"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Set Filter - Tree List","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"enabling-tree-lists","depth":2,"value":"Enabling Tree Lists"},{"id":"sorting-tree-lists","depth":2,"value":"Sorting Tree Lists"},{"id":"formatting-values","depth":2,"value":"Formatting Values"},{"id":"complex-objects","depth":2,"value":"Complex Objects"},{"id":"mini-filter-behaviour","depth":2,"value":"Mini Filter Behaviour"},{"id":"filter-value-tooltips","depth":2,"value":"Filter Value Tooltips"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/filter-set-tree-list","pageName":"filter-set-tree-list"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}