Expand Arrow now working when children dynamically loaded

[Nigel]

We have large trees that contains multiple levels like:

Root

  Item 1

    Item1-A

    Item1-B

  Item 2

    Item2-A

    Item2-B

The children are loaded dynamically using the onselect event for the item, so using the above example, Item1-A has children, but they have not yet been loaded when the tree is created. Item1-A will display with the expand arrow.

Clicking on the Item1-A (text in the tree), expands to show the children, however when clicking on the expand arrow next to Item1-A, the expand arrow disappears, the Item1-A text is selected, but the onselect event is not fired so the children are not displayed.

We don't want to load the next level children (which does resolve the problem) due to performance requirements.

Is there any way we can either

a) Disable the expand arrow action (i.e. we are happy if the user consistently just clicks on the item text and the expand arrow is for display only)

or

b) Fire a select event when clicking on the expand arrow so that it performs the same action as clicking on the text in the tree.

Thanks.

[Ivan Danchev]

Hello Nigel,

You can handle the TreeView's Expand event, in its handler check the level of the node that is about to be expanded and if it it higher than level 1 (0 is the root level, 1 is "Item 1"'s level, etc.) prevent the event:

function onExpand(e) {
    if ($(e.node).parentsUntil(".k-treeview", ".k-item").length > 1) {
        e.preventDefault();
    }
}

Regards,
Ivan Danchev
Telerik by Progress

[Nigel]

Hi,

The e.preventDefault() function seems to disable both the expand action on the arrow and the expand action when selecting on the node text itself.

The expand action on the node text is working as required and we need to keep this working. Ideally we want the expand arrow to work the same way as the node text when using the onselect event, but being able to disable just the expand arrow action would be OK as well.

Would it be possible to extend your answer to only select the expand arrow in the onExpand event and disable just the arrow and not the node text? ... or is there some other approach we can take?

Thanks,

Nigel

 

[Ivan Danchev]

Hello Nigel,

The following could be a workaround that would allow the node expansion on click of its text but prevent the expansion on the expand arrow click:

$(document).ready(function() {
    var arrowClicked = false;
    $("#treeview").delegate( ".k-icon", "click", function() {
        arrowClicked = true;
    });
});

function onExpand(e) {
    if (arrowClicked) {
        if ($(e.node).parentsUntil(".k-treeview", ".k-item").length > 0) {
            arrowClicked = false;
            e.preventDefault();
        }
    }
}

Regards,
Ivan Danchev
Telerik by Progress

[Nigel]

Excellent. Thank you - that is working for us.

 

Nigel.

[Ivan Danchev]

Hello Nigel,

We are glad we were able to assist you.

Regards,
Ivan Danchev
Telerik by Progress