Sortable interface not refreshed when item is added

[Iuliana Maria]

Hello!

 

While understanding the Sortable component, I went across the following issue: 

- I opened the example from https://www.telerik.com/kendo-angular-ui/components/sortable/ in StackBlitz 

- I added a button that when clicked, should add a new Item (image-one)

- I clicked the button

- Item array was updated, but interface is not showing the new item (image-two)

Is there another way to refresh the interface, to see the items up to date?

 

Thank you!

[Dimiter Topalov]

Hello Iuliana,

When adding the new item, we need to replace the reference of the data collection (as opposed to mutating the same reference) so that the Angular change detection kicks in, and the new array of items is rendered as expected, e.g.:

https://stackblitz.com/edit/angular-kxeiqm?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Iuliana Maria]

Hello Dimiter,

It works good also for my case. Thank you for the solution!

[Claudia]

Hello i had the same issue and this helped me a lot. Right now i have same problem removing the item from the list and is not refreshing. I will appreciate any advise.

Thank you

[Claudia]

I got a solution, not sure if the best one

this.myArray.splice(index, 1);
this.myArray = [...this.myArray];

[Dimiter Topalov]

Hi Claudia,

Good job on finding a solution. Indeed, the idea is basically the same as when adding an item - a new instance of the array is needed as opposed to mutating the existing one.

The solution seems OK, it potentially could be performed with one operation like so:

this.myArray = this.myArray.filter((item, idx) =>  index !== idx);

Regards,
Dimiter Topalov
Progress Telerik

[Claudia]

Thank you very much Dimiter!!!!