We are encountering an issue with the Kendo TreeView where it is bound to an array containing all checkedKeys. The TreeView is contained inside a shared angular component, which has an input which retrieves the IDs of the selected items and adds them to the array the TreeView is bound to.
Although the data is loaded in without issues, the Tree View does not refresh itself to show the check-boxes unless it is clicked upon or a node is expanded forcing it to redraw itself.
How can we ensure the TreeView automatically updates to show the check-boxes for all selected items, or perform a refresh on demand?
var checkedItems = this.dataSource.filter(orgGroup => this.selectedOrgGroupIDs.indexOf(orgGroup.id) >= 0);
//checkedItems.forEach(item => this.selectedOrgGroups.push(item));
this.selectedOrgGroups = this.selectedOrgGroups.slice().concat(checkedItems);
The above method implements the lifecycle hook to ensure any updates to the input property are properly parsed/received. Originally, we were pushing each item to the sleectedOrgGroups collection (which is what the Kendo TreeView's checkedKeys is bound to), however based off the following "https://www.telerik.com/forums/refresh-treeview-with-angular-5-and-typescript", we modified it to perform a slize and concat with the new collection of items but it fails to render itself automatically.
Note: Clicking on the TreeView control, selecting or un-selecting a node, or expanding/collapsing a node automatically causes it to refresh.
Your input on this matter would be greatly appreciated. Thanks!