{"_id":"598622fbd09433000f1b97f6","category":{"_id":"598622f9d09433000f1b97e0","version":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":2,"slug":"documentation","title":"Guides"},"user":"54d742a80771980d0052f4b5","parentDoc":null,"project":"5707c6875309d117006948d4","version":{"_id":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-08-05T19:56:41.267Z","releaseDate":"2017-08-05T19:56:41.267Z","categories":["598622f9d09433000f1b97de","598622f9d09433000f1b97df","598622f9d09433000f1b97e0","598622f9d09433000f1b97e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.1.0","version":"4.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-11T13:03:42.933Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":13,"body":"Filtering on the tree is not trivial, since the filtering process needs the keep the tree structure.\nFor example, if one of the nodes is visible - we must display its parent, and grandparent etc.\nThis is being taken care of by the treeModel 'filterNodes' function.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Filter by function\"\n}\n[/block]\nThe function receives the node and returns true if the node should be hidden, false otherwise.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"tree.treeModel.filterNodes((node) => {\\n  return !node.data.name.startsWith(text);\\n});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Filter by string\"\n}\n[/block]\nThe function filters all nodes whose displayField ('name' by default) contains the given string. The comparison is done case insensitive.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"tree.treeModel.filterNodes(\\\"text\\\", true);\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNote the second field - true by default.\nThis flag makes sure all nodes are visible after searching (i.e. expand all relevant ancestors).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Manual filtering\"\n}\n[/block]\nIf you need a different behaviour than the above, you can traverse the tree and do your own magic, and call `hide()`, `show()`, or `setIsHidden(value)` on all nodes as you wish.","excerpt":"","slug":"filtering","type":"basic","title":"Filtering"}
Filtering on the tree is not trivial, since the filtering process needs the keep the tree structure. For example, if one of the nodes is visible - we must display its parent, and grandparent etc. This is being taken care of by the treeModel 'filterNodes' function. [block:api-header] { "type": "basic", "title": "Filter by function" } [/block] The function receives the node and returns true if the node should be hidden, false otherwise. [block:code] { "codes": [ { "code": "tree.treeModel.filterNodes((node) => {\n return !node.data.name.startsWith(text);\n});\n", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Filter by string" } [/block] The function filters all nodes whose displayField ('name' by default) contains the given string. The comparison is done case insensitive. [block:code] { "codes": [ { "code": "tree.treeModel.filterNodes(\"text\", true);\n", "language": "javascript" } ] } [/block] Note the second field - true by default. This flag makes sure all nodes are visible after searching (i.e. expand all relevant ancestors). [block:api-header] { "type": "basic", "title": "Manual filtering" } [/block] If you need a different behaviour than the above, you can traverse the tree and do your own magic, and call `hide()`, `show()`, or `setIsHidden(value)` on all nodes as you wish.