Recenter orgchart on selected node

[Alfred]

When using the orgchart for a large set of nodes (2000+) it can be cumbersome to find where you are when a node is expanded. Is there a way to keep the just expanded node selected?

I've added an event handled to the Expand event which is called correct.

<script>
    function onExpand(e) {
//        alert("event: Expand --> " + e.dataItems[0].title + " expanded");
        alert(e.dataItems[0].id);
        var orgChart = $("orgChart").getKendoOrgChart();
        orgChart.select(e.dataItems[0]);
    }    
</script>

 

The alert fires with the correct id but dosen't seem to select the node that was clicked. I'd like to have that selected so the end user doesn't lose their place as the orgchart expands. Thanks!

 

[Ivaylo]

Hi Alfred,

I am still reviewing this scenario and will need a bit more time. I will get back with an update tomorrow.

Regards,
Ivaylo
Progress Telerik

[Ivaylo]

Hi Alfred,

The Expand event provides access to the expanding node through the item parameter. This node could be selected, and the scrollIntoView method could be utilized to bring it into the view. Below is an example of the implementation:

//C#
.Events(e => e.Expand("onExpand"))

//JS
function onExpand(e) {
    var node = e.item[0];
    e.sender.select(node); 
    node.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
}

Furthermore, I prepared a sample REPL where the suggested implementations could be tested. Please let me know if this is the desired result.

I hope this information was helpful.

Kind Regards,
Ivaylo
Progress Telerik