Kendo treeview ondemand load node selection fails after expand

4 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 05 Sep 2014 Link to this post

    I have a Kendo treeview with ondemand loading.I have a grid displaying objectids on right side and when clicked on a row on grid i use treeview expandpath showing all it's parent nodes. Now i want to select the node with the id after expanding and scroll to the node automatically. Here is my jquery code on grid row click event
    $("#Grid").on("click", " tbody > tr", function () {

    var datagrd = $("#Grid").data("kendoGrid").dataItem($(this));
    var rootDir = "@Url.Content("~/")";
    url: rootDir + "Objekt/LoadParents",
    data: {
    strSelectedObjectID: datagrd.ObjectID
    success: function (data) {
    if (data.result == "Error") {
    } else {
    var arrA = data.split(',');

    var treeView = $('#treeview').data('kendoTreeView');
                        var nodeDataItem = treeView.dataSource.get(datagrd.ObjectID);

    var selectednode = treeView.findByUid(nodeDataItem.uid);;
    treeView.trigger("select", { node: selectednode });


    Everything works fine and node is expanded but it does not get selected i have to manually scroll to the expanded node



  2. Dimo
    Dimo avatar
    8474 posts

    Posted 09 Sep 2014 Link to this post

    Hello Anamika,

    The expandPath method of the TreeView makes Ajax requests, so it is an asynchronous action. This means that selecting the newly loaded item and scrolling to it must be executed with a delay. You can do this in a one-time dataBound handler, which is attached before calling expandPath.

    One-time event handlers are attached in the same way as when using widgetObject.bind(), but instead you will be using

    Normally you don't need to use .trigger("select") after the .select() method.

    Scrolling the selected item into view requires custom coding and can be achieved via...

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Henry
    Henry avatar
    16 posts
    Member since:
    Feb 2014

    Posted 19 Sep 2014 in reply to Dimo Link to this post

    I'm trying to figure out the same thing. The problem is that how can you run the 'scroll to' function after expandPath() gets finished. I read that there is a callback for it, but it's not executed:

    var treeView = $('#tree').data('kendoTreeView');
    var selectedPath = [0, 1, 2];'dataBound', function () {
        treeView.expandPath(selectedPath, function () {
            // this doesn't get called

    Also, it seems it only expands the first node id given in the array. I tested calling it with two ids, and the second node doesn't get expanded. I double checked that the second id is returned with the first expand call, and that it has children.

    I'm using:

    * Kendo UI Complete v2014.1.318

    Thanks for any help / suggestions.

  4. Dimo
    Dimo avatar
    8474 posts

    Posted 22 Sep 2014 Link to this post

    Hello Henry,

    Here is a demo, which works as it should. Please compare with your implementation.

    It is important to note that we included a couple of fixes related to expandPath in the Q2 2014 Kendo UI version (2014.2.716), so upgrading is recommended.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top