{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-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":"element","tagName":"a","properties":{"href":"#enabling-tree-lists","ariaLabel":"enabling tree lists 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":"Enabling Tree Lists"}]},{"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.1.0/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":"element","tagName":"a","properties":{"href":"#sorting-tree-lists","ariaLabel":"sorting tree lists 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":"Sorting Tree Lists"}]},{"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.1.0/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.1.0/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":"element","tagName":"a","properties":{"href":"#formatting-values","ariaLabel":"formatting values 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":"Formatting Values"}]},{"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.1.0/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 child value 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":"element","tagName":"a","properties":{"href":"#complex-objects","ariaLabel":"complex objects 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":"Complex Objects"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/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":"element","tagName":"a","properties":{"href":"#mini-filter-behaviour","ariaLabel":"mini filter behaviour 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":"Mini Filter Behaviour"}]},{"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":"element","tagName":"a","properties":{"href":"#filter-value-tooltips","ariaLabel":"filter value tooltips 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 Value Tooltips"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using Tree List with a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/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":"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":"Continue to the next section: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/filter-set-mini-filter/"},"children":[{"type":"text","value":"Mini Filter"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Set Filter - Tree List","version":null,"enterprise":true,"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":"react","srcPath":"/filter-set-tree-list","pageName":"filter-set-tree-list"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}