This is a migrated thread and some comments may be shown as answers.

TreeView - checkedKeys Not Refreshing TreeView

2 Answers 50 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Santo
Top achievements
Rank 1
Santo asked on 29 Jan 2018, 01:28 AM

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

2 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 30 Jan 2018, 07:14 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Santo
Top achievements
Rank 1
answered on 30 Jan 2018, 10:49 PM

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

Tags
General Discussions
Asked by
Santo
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Santo
Top achievements
Rank 1
Share this question
or