{"_id":"5a2ea78e840974003263a497","category":{"_id":"5a2ea78d840974003263a486","version":"5a2ea78d840974003263a484","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":1,"slug":"documentation","title":"Guides"},"user":"54d742a80771980d0052f4b5","project":"5707c6875309d117006948d4","parentDoc":null,"version":{"_id":"5a2ea78d840974003263a484","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-12-11T15:43:09.776Z","releaseDate":"2017-12-11T15:43:09.776Z","categories":["5a2ea78d840974003263a485","5a2ea78d840974003263a486","5a2ea78d840974003263a487","5a2ea78d840974003263a488"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"7.0.0","version":"7.0.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":5,"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.\n[block:api-header]\n{\n  \"title\": \"Demo\"\n}\n[/block]\nInitializing 100,000 nodes, please be patient...\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/virtual\\\" width=\\\"520px\\\" height=\\\"862px\\\"></iframe>\\n\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a href=\\\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/virtualscroll/virtualscroll.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\n}\n[/block]","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. [block:api-header] { "title": "Demo" } [/block] Initializing 100,000 nodes, please be patient... [block:html] { "html": "<iframe src=\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/virtual\" width=\"520px\" height=\"862px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/virtualscroll/virtualscroll.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/block]