Issue/Question regarding Tree Widget

[Tr12]

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!

[Hristofor]

Hi Tr12,
1) Currently there is no way to add more than 1 item at a time. However we will consider adding such functionality.
2) The Smart.Tree does not throw any specfic events regarding context menus, so you will have to add your own. Here’s how to do it:

window.onload = function () {
const tree= document.querySelector('smart-tree');
tree.addEventListener('contextmenu', function (event) {
const target = event.target;
//Get the target item
const item = target.closest('smart-tree-item'),
itemGroup = target.closest('smart-tree-items-group');
if (!item && !itemGroup) {
return;
}
//Prevent browser's context menu
event.preventDefault();
//Open a Smart.Menu
})
}

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Tr12]

Hi Hristofor,

1) Currently there is no way to add more than 1 item at a time. However we will consider adding such functionality.

OK. I think it would be great if a functionality to add multiple items at once can be added, as it seems the tree component of a competitor has such a functionality to insert lots of items with good performance.

2) The Smart.Tree does not throw any specfic events regarding context menus, so you will have to add your own. Here’s how to do it:

OK, thank you, I will try it.

[Tr12]

Hello,
are there any updates regarding adding a lot of tree items at once? We add child items to the tree when a tree item is expanded, but it is really a bad user experience when the user has to wait 10 seconds for the tree to add all the child nodes. With the older jqxTree, this worked a bit better, because we could set the (undocumented) “update” parameter to false for the first n-1 items, and set it to true for the last item, which improved performance.
Thank you!

[admin]

Hi Tr12,
For Tree with large data source, use Table or Grid in Tree mode. Smart.Tree purpose is to be SEO friendly navigation component and its not designed to support large data sets.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts