JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Menu & Tree › Issue/Question regarding Tree Widget
Tagged: angular tree, custom element, performance, react tree, smart elements, smart framework, tree, tree context menu, tree item hover, web component, web components
- This topic has 4 replies, 3 voices, and was last updated 3 years, 7 months ago by admin.
-
AuthorPosts
-
July 9, 2020 at 7:49 am #100887Tr12Member
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 thetree.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 ofTreeItem
/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 tofalse
for all child items except the last one, and set it totrue
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!July 9, 2020 at 2:56 pm #100890HristoforMemberHi 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.comJuly 10, 2020 at 11:00 am #100893Tr12MemberHi 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.
March 16, 2021 at 7:18 am #101622Tr12MemberHello,
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!March 16, 2021 at 8:31 am #101623adminKeymasterHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.