Refresh Treeview with angular 5 and typescript

[Abdoulah]

I using Kendo Treeview with Anguar 5

[Abdoulah]

Sorry for the fault above...

So I want to know how to make the Treeview component refresh it self because when  add new node to the tree I have to collapse and expand the parent node to see the new node. 

 

<kendo-treeview [nodes]="p.Items" textField="name" kendoTreeViewExpandable
[isChecked]="isItemChecked" kendoTreeViewSelectable
[expandBy]="'id'" [(expandedKeys)]="expanded_keys"
[hasChildren]="hasChildren" [children]="fetchChildren"
(selectionChange)="handleSelection($event)"
(checkedChange)="handleChecking($event)" #layers_tv id="layers_tv">
</kendo-treeview>

[Georgi Krustev]

Hello Abdoulah,

In general, the TreeView component uses OnPush change detection strategy in order to reduce unnecessary checks. Thus it will miss when the passed data array is just mutated.

If the above solution is not feasible for you, could you provide a runnable demo that demonstrates the issue? Thus we will be able to review the case and find the best possible solution for you.

Regards,
Georgi Krustev
Progress Telerik

[Abdoulah]

Thanks Mr.Krustev for the reply .. the first solution is not feasible to me or may be I didn't test it properly (If you can explain it to me in more depth may be I can test it properly because I am a beginner in angular and typescript).

However, here is a link to demo of my problem:

https://embed.plnkr.co/6NRyVjWutVSB8oAzgDNV/

 

[Georgi Krustev]

Hello Abdoulah,

The internal mutations of the data won't be catched by Angular when OnPush change detection strategy is used. The solution is to just pass a new instance of the data array.

public AddGroup(newItem) {
    this.data[0].items.push({text: newItem});
    this.data = this.data.slice();
}

This will spin an additional change detection cycle and the component will be updated. Check the modified demo:

https://plnkr.co/edit/gcjXdWv3aTjWEqC0Utue?p=info

Regards,
Georgi Krustev
Progress Telerik

[Abdoulah]

Thanks very much ... this fixed my problem.