Last Updated: 23 Feb 2023 06:51 by ADMIN
Created on: 27 Jan 2020 13:37
Category: Sortable
Type: Feature Request
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.


// pseudocode

@Component(template: <kendo-sortable [data]="data"></kendo-sortable>)
class MyComponent {
  data = [obj1, obj2, … obj200];

  updateData() { = [];


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.


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

Dimiter Topalov
Posted on: 23 Feb 2023 06:51


We are declining this request due to low customer demand.

Dimiter Topalov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

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.

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.