剑道树列表展开事件

Question

In my Kendo UI treelist, I'd like to capture the currently-expanded row in the expand event, then check if its children rows are leaf nodes. If they are leaf nodes, I'd like to remove the font-weight: bold; style attribute.

Here is a snippet showing the treeOptions object. At this expand event, it's easy to know that there are children nodes, but how can I tell if those children nodes has have children or not ? ie are they leaf nodes ?

  var treeOptions = { dataSource: ds, columns: colDefs, selectable: true, height: 320, change: function (e) { var selectedRow = this.select(); var row = this.dataItem(selectedRow); }, expand: function (e) { var row = e.model; var hasChildren = row.hasChildren; var uid = row.uid; } }; 

And here is the Kendo API doc I'm reading through.

thanks in advance, Bob

Answer 1

I haven't found any method to do that in the doc either, the only way i can think of it right now is by looping through datasource and get the all of the children element that match the parent id of the expanded element. Then you can see if it's 'hasChildren' attribute.

expand: function(e) {
  //get the widget datasource then loop to match the parent id of the expanded element
  var data =this.dataSource.data();
  var children = [];
  for(i=0; i<data.length; i++){
      if(data[i].parentId == e.model.id){
      children.push(data[i]);
    }
  }


  //do chose which children you want to see its "hasChildrenStatus"
  console.log(children[0].hasChildren);
  console.log(children[1].hasChildren);

  //do remove css by using it's uid to get the element

}

Kendo dojo example

Answer 2

Here is one way. Get the dataSource view and iterate through all the rows. Find the ones whose parentid is equal to the current row id and use the uid to update the DOM element:

expand: function (e) {
  var id = e.model.id;
  if (!e.model.hasChildren) return; 

  var dataSourceView = $(this)[0].dataSource._view;
  for (var i=0; i<dataSourceView.length; i++){
    var pid =  dataSourceView[i].parentId;

    var Children = dataSourceView[i].hasChildren;
    if (pid == id && !Children){                              
         var uid = dataSourceView[i].uid;
       $('[data-uid="' + uid + '"]').css("font-weight", "bold");
    }

  }
}

DEMO

Answer 3

if you make the treelist selectable, than you can use the click event

$("#treeList).on("click","tr[role='row']",function(e){
    var row = $(e.target).closest("tr[role='row']");
        })