TreeView not updating after version upgrade

[Philip]

Hello,

  We are upgrading the version of the kendo libs we are using. The tree view version went from 4.3.0 to 5.1.1. After this upgrade the tree views in our app don't update dynamically when the bound data is changed. That is when nodes are added, they are not shown.

I tried to make a plunker to demo this problem, and at first I seemed to replicate it, but then I found that including the BrowserAnimationsModule in the plunker fixed it, but we're already doing that in our app. So I don't have a MWE to show you. :-( But it still makes me think it is some kind of animation failure. No errors are logged.

I hate asking this question without being able to provide an actual example, but maybe someone will recognize the symptoms... Here are some bits of the code, it's basically for displaying and editing GridList filters 

<kendo-treeview [nodes]="[filter]" kendoTreeViewHierarchyBinding childrenField="filters"> 

 <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
  <button kendoButton look="flat" icon="close" (click)="delete(index)"></button>
  <span *ngIf="dataItem.filters != null">
  <button kendoButton icon="filter-add-expression" [look]="'flat'" (click)="addFilter(dataItem)"></button>
  <button kendoButton icon="filter-add-group"[look]="'flat'"(click)="addGroup(dataItem)"></button>
 ...
 </ng-template>
</kendo-treeview>

...

public filter: CompositeFilterDescriptor;

public addFilter(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({ field: '', operator: 'eq', value: '' });
}
public addGroup(dataItem: CompositeFilterDescriptor) {
 dataItem.filters.push({
  logic: 'and',
  filters: [{ field: '', operator: 'eq', value: '' }],
 });
}

Here are the version changes we did. I also tried updating Angular from 11.0.4 to 11.2.12 without luck.

[Philip]

Well, I was able to fix this by making sure the object bound to "[nodes]" is a new object every time the tree changed. So basically every time the tree changed I would do something like this:

<kendo-treeview [nodes]="rootFilter" kendoTreeViewHierarchyBinding childrenField="filters">
....
</kendo-treeview>

// Make some change to the tree rooted at 'filter'
...
// Trigger the update
this.rootFilter = [filter];

I can imagine that in the new version of TreeView, maybe the change detection strategy is different. But I don't understand why this stackblitz works then:

https://stackblitz.com/edit/angular-ivy-5akkck?file=src/app/hello.component.ts

[Stefani]

Hi Philip,

I am sorry to hear about the issue you are experiencing with the TreeView. I can confirm that we have not changed the change detection strategy in the newer versions of the TreeView. I have attempted to reproduce it by using different TreeView package versions but without success. Nevertheless, I will forward the case to the developers' team for a thorough inspection. 

I want to mention that we will most likely not be able to come up with additional information until next week as we are very short-staffed due to the public holidays we have this week. In the meantime, could you please try and update the StackBlitz example to reflect the usage of the TreeView in your project? You mentioned you are using it as part of the Grid. This would help us get closer to identifying the problem.

Thank you in advance.

 Regards,
Stefani
Progress Telerik

[Stefani]

Hi Philip,

As promised, our developer's team performed an inspection of the described use case and based on the provided details. Unfortunately, they were not able to identify the problem nor reproduce it.

In order to be able to continue investigating the reported issue could you please check if there are any console errors thrown in your local project? Also, any additional information about the TreeView setup might also help the case.

Looking forward to hearing from you.

Regards,
Stefani
Progress Telerik