Forums

For large amounts of data, you would use dynamic loading. Trees, unlike datatables, don't need all the tree expanded at once so instead of rendering all of it in batches, like DataTables do, you render it on demand, only when a branch gets expanded, if it does.

See:

http://developer.yahoo.com/yui/treeview/#dynamicloading

Basically, that is what renderLoopSize does, it uses setTimeout to release the UI to the user every once in a while. It actually takes longer to draw the whole thing but the user feels the interface more responsive than otherwise so it feels faster, though it isn't really so.

You would need to call the callback to tell the TreeView your dynamically loaded branch has been loaded the first time. This does not prevent you from further adding nodes on subsequent batches, but it will make sure the parent node displays properly. In other words, you don't need to wait for the whole branch to be added to call the callback, do it on the first batch and then keep adding nodes.

You will have to fine tune how many you add in each batch. Releasing control of the UI and take it back takes some time so you don't want to add a single node in each batch. renderLoopSize had to be at least 50, preferably more, to make any difference in DataTable, less than that it was slower.

If those child nodes are terminal nodes and they are all at the same depth, you might want to rethink it and display them like a file explorer, where the directory structure is on the left panel and the files are on the right panel displayed as a simple list, or even as a DataTable.