Hello, I’m currently working on replacing jQWidgets in our product (Tree, DataTable, Window, Button etc.) with Smart HTML Elements due to the better functionality and use of newer web technologies (we are using a developer license).
With the Tree widget, I have the following questions:
1) Performance when inserting a lot of nodes
When the user expands a tree-items-group, we need to dynamically add nodes to the tree (which we loaded from the server), similar to the “Load on Demand” demo. However, in our case sometimes we need to display a lot of items (e.g. 500), which is a bit slow when adding them to the tree. For example, see the following script:
let tree = new Smart.Tree();
tree.innerHTML = “<smart-tree-items-group>MyGroup1</smart-tree-items-group><smart-tree-items-group>MyGroup2</smart-tree-items-group><smart-tree-items-group>MyGroup3</smart-tree-items-group>”;
tree.animation = “none”;
tree.style.cssText = “width: 400px; height: 400px;”;
document.body.appendChild(tree);
tree.addEventListener(“expand”, function (event) {
if (event.detail.children.length > 0)
return;
// Create some child items.
for (let i = 0; i < 600; i++) {
const newItem = document.createElement(‘smart-tree-item’);
newItem.label = ‘Item ‘ + i;
tree.addTo(newItem, event.detail.item);
}
});
When expanding one of the tree items, it inserts 600 child items using the tree.addTo() method. However, it takes about 1-2 seconds until this is finished.
Is there any way to improve performance when adding such a number of nodes? E.g. to pass an array of TreeItem/TreeItemsGroup, instead of calling .addTo() for every item?
(In older jQWidgets Tree (jqxTree), there was an undocumented parameter “update” in the .addTo method, so that we could set that parameter to false for all child items except the last one, and set it to true for the last child item, which improved performance a bit.)
2) Select hovered item on right-click
Is there a way to select a hovered item when the user right-clicks on it? We want to show a context-menu on right-click, but the Tree doesn’t change its selection and may still have another node selected, rather than the one where the user clicked.
Thank you!