{"_id":"598622fbd09433000f1b97fa","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","project":"5707c6875309d117006948d4","parentDoc":null,"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":"2017-03-19T08:12:19.399Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":17,"body":"When having a large amount of nodes and experiencing performance issues, it is recommended to use the virtual scroll option.\n\nTo use this option, one must supply the height of the container, and the height of each node in the tree.\n\nYou can also specify height for the dropSlot which is located between nodes.\n\nExample:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div style=\\\"height: 400px\\\">\\n  <tree-root [nodes]=\\\"nodes\\\" [options]=\\\"options\\\"></tree-root>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Fixed node height\\noptions = {\\n  useVirtualScroll: true,\\n  nodeHeight: 22\\n}\\n\\n// Or using a function\\noptions = {\\n  useVirtualScroll: true,\\n  nodeHeight: (node: TreeNode) => node.myHeight,\\n  dropSlotHeight: 3\\n}\\n\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Hidden trees\"\n}\n[/block]\nIf the tree is hidden (for example inside tab or modal), it will not be rendered when it becomes visible.\nAfter it becomes visible (preferably using setTimeout) - you need to call `tree.sizeChanged()`, which recalculates the rendered nodes according to the actual viewport size.","excerpt":"","slug":"large-trees","type":"basic","title":"Large Trees & Virtual Scroll"}

Large Trees & Virtual Scroll


When having a large amount of nodes and experiencing performance issues, it is recommended to use the virtual scroll option. To use this option, one must supply the height of the container, and the height of each node in the tree. You can also specify height for the dropSlot which is located between nodes. Example: [block:code] { "codes": [ { "code": "<div style=\"height: 400px\">\n <tree-root [nodes]=\"nodes\" [options]=\"options\"></tree-root>\n</div>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// Fixed node height\noptions = {\n useVirtualScroll: true,\n nodeHeight: 22\n}\n\n// Or using a function\noptions = {\n useVirtualScroll: true,\n nodeHeight: (node: TreeNode) => node.myHeight,\n dropSlotHeight: 3\n}\n\n", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Hidden trees" } [/block] If the tree is hidden (for example inside tab or modal), it will not be rendered when it becomes visible. After it becomes visible (preferably using setTimeout) - you need to call `tree.sizeChanged()`, which recalculates the rendered nodes according to the actual viewport size.