Kendo treeview ondemand load node selection fails after expand

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

    Posted 05 Sep 2014 Link to this post

    Hello,
    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));
    alert(datagrd.ObjectID);
    var rootDir = "@Url.Content("~/")";
    $.ajax({
    url: rootDir + "Objekt/LoadParents",
    data: {
    strSelectedObjectID: datagrd.ObjectID
    },
    success: function (data) {
    if (data.result == "Error") {
    alert(data.message);
    } else {
    alert(data);
    var arrA = data.split(',');

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

    var selectednode = treeView.findByUid(nodeDataItem.uid);
    treeView.select(selectednode);
    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

    Thanks

    Anamika

        });
  2. Dimo
    Admin
    Dimo avatar
    8333 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.

    http://docs.telerik.com/kendo-ui/api/web/treeview#events-dataBound

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

    http://docs.telerik.com/kendo-ui/api/framework/widget#methods-one

    http://docs.telerik.com/kendo-ui/basics/events-and-methods#bind-to-the-widget-events

    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...

    http://www.telerik.com/forums/scroll-selected-node-into-viewport

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Henry
    Henry avatar
    14 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];
    treeView.one('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.


  5. Dimo
    Admin
    Dimo avatar
    8333 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.

    http://dojo.telerik.com/Inuw

    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.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready