Kendo UI 树视图与复选框一起被锁定

Question

当我在 Treeview 中使用 isChecked 函数时，所有复选框都被锁定且无法更改

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

您可以通过将 (checkedChange) 事件添加到您的 kendo-树视图

<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;
}