CODEWITHSUNDEEP
jquerykendo-uikendo-treeview
Jonathan
Jonathan

Reputation: 1669

How to expand kendo ui treeview first item and its child first item

I want to expand the kendo ui treeview first item and its first child. I have written the code in the databound like

 $("#treeview").data("kendoTreeview").expand("li:first");
 $("#treeview").data("kendoTreeview").expand("li:first").children(".k-group");

But is is expanding only first item. Not the first child of the expanded item. How can i do this in kendo ui

Upvotes: 1

Views: 7829

Answers (3)

Tomasz Rozmus
Tomasz Rozmus

Reputation: 1656

If you load data on demand (eg. via AJAX call), the problem is that the second node (first child of first child) does no exist when following line is executed:

$("#treeview").data("kendoTreeView").expand("li:fist li:first")

To achieve that, you must execute that line just after the first expand() finishes execution.

I see two options:

  1. by using kendoTree events

  2. by using setTimeout (ugly way)

Ad 1.

var yourTreeSelector = "#youTreeId";
var $tree = $(yourTreeSelector);
var treeView = $tree.data("kendoTreeView");

var $firstItem = $tree.find(' > ul > li.k-item:first');

console.log($firstItem);
//make sure selector is ok and first item exists
if($firstItem.length){
   treeView.expand($firstItem); //expand first item
   var secondSelectedFlag = false; //init flag to false

   //handler method
   selectSecond = function(){
      var $fistChildOfFirstItem = $firstItem.find(' > ul > li.k-item:first');
      console.log($fistChildOfFirstItem);
      //make sure expand will execute only when node exists and was not expanded earlier
      if(!secondSelectedFlag && $fistChildOfFirstItem.length){
          secondSelectedFlag = true; 

          treeView.expand($fistChildOfFirstItem);//expand on selected node
          treeView.unbind("dataBound");//unbind method
      }  
   }

   treeView.bind("dataBound", selectSecond);//bind a handler method to dataBound event
}

Ad 2. After expanding first node place following code:

setTimeout(
    function (){
        var $fistChildOfFirstItem = $firstItem.find(' > ul > li.k-item:first');
        console.log($fistChildOfFirstItem);
        treeView.expand($fistChildOfFirstItem);
    },
    3000 //3 seconds is reasonable amount of time
);

Upvotes: 0

Jose Tuttu
Jose Tuttu

Reputation: 428

declare a global variable 

var counter = 2;

Now in data bound event of tree

if(counter > 0) {
$("#treeview").data("kendoTreeView").expand('.k-item:first');
$("#treeview").data("kendoTreeView").expand('.k-item:first .k-item:first');
counter = counter - 1;
}

Upvotes: -1

piotrb
piotrb

Reputation: 79

$("#treeview").data("kendoTreeView").expand("li:first"); // expands first child
$("#treeview").data("kendoTreeView").expand("li:first li:first"); // expands first child or the first child

Upvotes: -1

Related Questions