CODEWITHSUNDEEP
javascriptkendo-uikendo-treeview
egeo
egeo

Reputation: 323

How to disable all Kendo TreeView nodes without collapsed

I use kendo.ui.TreeView for jQuery. I created tree with checkbox and child objects:

$("#my-tv-1").kendoTreeView({
  dataSource: data,
  checkboxes: {
    checkChildren: true
  },
  loadOnDemand: false
}).data("kendoTreeView");

let data = [
  { text: "Item 1", id: 1 },
  { text: "Item 2", id: 2 },
  { 
    text: "Item 3", expanded: true, items: [
      { text: "Subitem 1", id: 10 }
    ]
  }
];

How to disable all nodes (or all treeview) without collapsed nodes? When I use "enable" method all nodes that have child elements and have been expanded are collapsed.

function() {
  let treeview = $("#my-tv-1").data("kendoTreeView");

  // Disable all items
  treeview.enable(false);

  // or any node
  let n = treeview.dataSource.view()[2];
  treeview.enable(n, false);
}

Upvotes: 0

Views: 1120

Answers (1)

jpllosa
jpllosa

Reputation: 2202

To disable, you can do something like this so that the expanded nodes are not collapsed:

treeview.element.find('input.k-checkbox').each(function() {
    $(this).attr('disabled', 'true');
});

treeview.element.find('span.k-in').each(function() {
    $(this).addClass('k-state-disabled');
});

treeview.element.find('span.k-i-collapse').each(function() {
    $(this).addClass('k-state-disabled');
});

To enable them back:

treeview.enable(true);

Upvotes: 1

Related Questions