When updating data input of Kendo Sortable component, it currently destroys and re-renders dom for all items. That leads to "flickering" view and bad performance.
Example
// pseudocode
@Component(template: <kendo-sortable [data]="data"></kendo-sortable>)
class MyComponent {
data = [obj1, obj2, … obj200];
updateData() {
this.data = [...this.data];
}
}
Expected
When I call updateData() sortable dom should not be modified. All items are the same (same object reference) and so angular should keep the dom.
Current behavior
When I call updateData() kendo Sortable will destroy the dom and re-render all items.
Notes
The reason seems to be, that SortableComponent maps all items to an internal _localData array that adds a container element to each item. These container elements are always new objects and so Angular *ngFor will re-render everything. There's also no option to provide a custom trackBy callback.
Our scenario: We use kendo Sortable for a field mapping component that allows users to map CSV files to our database structure. Every user interaction will lead to a new array of mappings and so... every user input leads to a full re-rendering of some 100 form rows now...
