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

Sortable interface not refreshed when item is added

6 Answers 9 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Iuliana Maria
Top achievements
Rank 1
Iron
Iuliana Maria asked on 13 Feb 2019, 08:25 AM

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!

6 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 14 Feb 2019, 01:56 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Iuliana Maria
Top achievements
Rank 1
Iron
answered on 15 Feb 2019, 10:04 AM

Hello Dimiter,

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

0
Claudia
Top achievements
Rank 1
answered on 11 Jan 2021, 09:29 PM

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

0
Claudia
Top achievements
Rank 1
answered on 12 Jan 2021, 02:14 PM

I got a solution, not sure if the best one

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

0
Dimiter Topalov
Telerik team
answered on 13 Jan 2021, 08:07 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Claudia
Top achievements
Rank 1
answered on 13 Jan 2021, 02:02 PM
Thank you very much Dimiter!!!!
Tags
Sortable
Asked by
Iuliana Maria
Top achievements
Rank 1
Iron
Answers by
Dimiter Topalov
Telerik team
Iuliana Maria
Top achievements
Rank 1
Iron
Claudia
Top achievements
Rank 1
Share this question
or