Kendo UI treeview get locked along with Checkbox

Question

when I use isChecked function in Treeview all checkboxes are locked and can't change

public data: any[] = [
 { id: 1, isChecked: true, text: 'Furniture' },
 { id: 2, isChecked: false, text: 'Tables & Chairs' },
 { id: 3, isChecked: true, text: 'Sofa 1' },
 { id: 4, isChecked: false, text: 'Sofa 2' }
];

public isChecked = (dataItem: any, index: string): CheckedState => {
  if (dataItem.isChecked === true) {
   return 'checked';
  }
 return 'none';
}

HTML:

<kendo-treeview [nodes]="data" textField="text" kendoTreeViewExpandable kendoTreeViewCheckable [checkBy]="'id'" [isChecked]="isChecked">
</kendo-treeview>

demo

Answer 1

You can remove this problem by adding (checkedChange) event to your kendo-treeview

<kendo-treeview [nodes]="data" textField="text" (checkedChange)="checkChagne($event)" kendoTreeViewExpandable kendoTreeViewCheckable [checkBy]="'id'" [isChecked]="isChecked">
</kendo-treeview>


public checkChagne($event) {
 $event.item.dataItem.isChecked = !$event.item.dataItem.isChecked;
}