devExtreme TreeView Expand, ScrollTo and Focus

Question

is it possible to expand a treeview, scroll to a node and focus it on one function?

    $("#buttonTest").dxButton({
    text: "Test",
    onClick: function () {

        editTreeView.expandItem(editTreeView.element().find(".dx-treeview-item")[0])

        var currentNode = $("#editTreeView").find("[data-item-id=" + 80 + "]");
        var scrollable = $("#editTreeView").find(".dx-scrollable").dxScrollable("instance");

        scrollable.scrollToElement(currentNode);

        $("#editTreeView").find(".dx-treeview-node").removeClass("dx-state-focused");

        var currentNode = $("#editTreeView").find("[data-item-id=" + 80 + "]");
        currentNode.focus().addClass("dx-state-focused");

    }
});

In this example, the tree is opened at the first click and scrolled/focused on the second click. But I want it with one click :)

Thanks.

Answer 1

Seems like there is an issue connected with scrollable height calculation. You can fix it using the setTimeout function like below:

$("#buttonTest").dxButton({
    text: "Test",
    onClick: function () {
        //...
        setTimeout(function() {
            scrollable.scrollToElement(currentNode);
        }, 300); 
    }
});

This solution looks like a hack, but still))

I've created the fiddle as well.

Answer 2

In Angular for scrollTo can do as follows:

 onItemClick(e) {
    setTimeout(() => {
        e.component._scrollableContainer.scrollToElement(e.itemElement.parentElement.lastChild);
    }, 400);