Expand/Collapse all the gof kendoTreeList

问题

I am using kendoTreeList

and I am trying to expand all the groups. Here is my code sample

But it seems like the kendoTreeList support only expanding the first group. I tried the following selector in the expand method as well.

treeList.expand($(".k-treelist-group")); to expand all the groups. Even though the selector $(".k-treelist-group").length is 3 (total number of groups) but the treelist only expand the first group.

Any suggestion please let me know.

回答1:

You are right, according with the information on their site it expands the row and not the rows.

Then you can iterate for getting the same effect:

var treeList = $("#treeList").data("kendoTreeList");
var rows = $("tr.k-treelist-group", treeList.tbody);
$.each(rows, function(idx, row) {
    treeList.expand(row);
});

$(document).ready(function() {
  $("#treeList").kendoTreeList({
    columns: [ "id", "name" ],
    loadOnDemand:false,
    dataSource: [
      { id: 1, parentId: null, name: "Group", age: 30 },
      { id: 2, parentId: 1, name: "John Doe", age: 33 },
      { id: 3, parentId: 1, name: "Johson", age: 33 },

      { id: 4, parentId: null, name: "Group 2", age: 30 },
      { id: 5, parentId: 4, name: "Doe ", age: 33 },
      { id: 6, parentId: 4, name: "Noomi", age: 33 },

      { id: 7, parentId: null, name: "Group 3", age: 30 },
      { id:8, parentId: 7, name: "Doe ", age: 33 },
      { id: 9, parentId: 7, name: "Noomi", age: 33 }

    ]
  });
  var treeList = $("#treeList").data("kendoTreeList");
  var rows = $("tr.k-treelist-group", treeList.tbody);
  $.each(rows, function(idx, row) {
    treeList.expand(row);
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="treeList"></div>

回答2:

If you expand many rows you can get into some performance issues, then one alternative to looping the .expand method is to modify the data and bind it again.

var treeList = $("#treeList").data("kendoTreeList");
var dataItems = treeList.dataSource.data();

$.each(dataItems, function(i, item) {
    item.expanded = true;
});

treeList.dataSource.data(dataItems);

You can also modify the data before it's bound.

dataSource: {
        data: [
        { id: 1, parentId: null, name: "Group", age: 30 },
        { id: 2, parentId: 1, name: "John Doe", age: 33 },
        { id: 3, parentId: 1, name: "Johson", age: 33 },

        { id: 4, parentId: null, name: "Group 2", age: 30 },
        { id: 5, parentId: 4, name: "Doe ", age: 33 },
        { id: 6, parentId: 4, name: "Noomi", age: 33 },

        { id: 7, parentId: null, name: "Group 3", age: 30 },
        { id:8, parentId: 7, name: "Doe ", age: 33 },
        { id: 9, parentId: 7, name: "Noomi", age: 33 }          
        ],
      schema: {
        parse: function(data) {
          $.each(data, function(i, item) {
            item.expanded = true;
          });
          return data;
        }
      }
    }

来源：https://stackoverflow.com/questions/27424136/expand-collapse-all-the-gof-kendotreelist