Unplanned
Last Updated: 03 Feb 2020 12:44 by ADMIN
Christoph
Created on: 27 Jan 2020 13:37
Category: Sortable
Type: Feature Request
0
Performance: Keep dom on data updates

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... 

1 comment
ADMIN
Svetlin
Posted on: 03 Feb 2020 12:44

Hi Christoph,

Thank you for the provided feedback.

Indeed, that would be a valuable addition to the Sortable component. We will track the demand for such feature and consider adding it to our future development plans.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.