CODEWITHSUNDEEP
jquerykendo-uikendo-treeviewbrowser-scrollbars
user3291776
user3291776

Reputation: 13

Auto Scroll the kendo Treeview on programmatically select a node

I am new to kendo treeView. Can we automatically scroll the treeview to get the node in the current viewport. I have create a sample to show the issue JSBin Sample

Upvotes: 1

Views: 4797

Answers (1)

Jason
Jason

Reputation: 301

I'm not sure if the treeView has that option, but you can create an event handler for the "select" event, and then handle the scrolling yourself.

var treeview = $("#tree").kendoTreeView({
  select: function(e) {
    var eleTop = $(e.node).offset().top;
    var treeScrollTop = $("#tree").scrollTop();
    var treeTop = $("#tree").offset().top;
    $("#tree").animate({
      scrollTop: (treeScrollTop + eleTop) - treeTop
    });
  },
  dataSource:[
    { expanded:true, text: "Furniture", items: [
      { text: "Tables & Chairs" },
      { text: "Sofas" },
      { text: "Occasional Furniture" }
    ] },
    { expanded:true, text: "Decor", items: [
      { text: "Bed Linen" },
      { text: "Curtains & Blinds" },
      { text: "Carpets" }
    ] }
  ]    

});
var treeview = $("#tree").data("kendoTreeView");
// find the node with text "foo"
var decor = treeview.findByText("Decor");
treeview.select(decor);
treeview.trigger("select", {node: decor});

Note: When you use the treeview api to select a node, the event does not fire, so I fired it myself via trigger. I tested this in your bin and it worked fairly well. Tweak it for desired results.

Upvotes: 6

Related Questions