TreeView - checkedKeys Not Refreshing TreeView

[Santo]

Hi,

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?

ngOnChanges() {
        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!

Best Regards,
Santo

[Georgi Krustev]

Hi Santo,

Generally speaking, the TreeView component uses ChangeDetectionStrategy.Default to reduce the performed change detection cycles. This, however, hinders anyone who wants to mutate somehow the state of the component programmatically after initialization. The solution in most cases is to provide new instance (using concat or slice to produce new array) and/or call explicitly ChangeDetectorRef detectChanges(). In order to assist you further, I will more details about the current setup. A runnable plunker demo will be of a great help in this case.

As a side note, we are preparing an improvement in our code base that should resolve the discussed issue and will force the component to reflect all mutations in its properties. The changes should be out with the next minor version of the TreeView component, most probably marked with 2.1.0 version.

Regards,
Georgi Krustev
Progress Telerik

[Santo]

Hi Georgi,

We have updated the Kendo npm packages including the move to the latest version of the Kendo TreeView (2.0.0) which has resolved the issue for us with the code to slice and concat the new items for selection.

Thanks for your response.

Best Regards,
Santo