HTML Elements Forums Navigation Menu & Tree Issue/Question regarding Tree Widget

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Tr12 4 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100887
    Avatar
    Tr12
    Participant

    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!

    #100890
    Avatar
    Hristofor
    Participant

    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

    #100893
    Avatar
    Tr12
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.