Hi everyone,
I've got a few issues with our Sortable performing badly. I don't know necessarily what's causing it, but it's happened over the last few months of development time. I'm hoping that I could get some insight as to possible sources of performance problems with the Kendo Sortable app. The application is too big to post Plunker code, but a general breakdown:
- Nested Sortables. Sortables for lanes, each lane has a sortable with cards in it.
- The lane definitions are pulled from a REST service and pulled locally. Stored as an array of objects (ie. [{pk:100, name: Lane1, otherfield: value...}]
- The cards are pulled from a REST service and stored locally. Stored as an object with an array of objects (ie.{100, cards:[{pk: 1, name: Card1}], 200: {...}}.
- Each card has a number of links with (click) events. The card body has a (click) event which draws a new "board".
- [ngClass] directives are used to switch CSS classes on certain elements.
- Angular Materials tooltips are defined for certain elements.
- Some cards have an embedded app that shows images, but not all of them.
- There's some embedded SVGs for things like icons.
The cards throw a dataAdd when traversing "lanes", which sets a class variable to the dataItem. There is an dragStart event, which sets a boolean. There's a dragOver event that queries for the current card being dragged (document.querySelector('div[aria-grabed="true"]') and sets its CSS class, and on dragEnd it does the same call and removes that class.
The drag animation skips and lags even when there's only a small number of items (half a dozen or so) and I'm not performing REST calls while dragging or on dataAdd, only on dragEnd.
We're running @progress/kendo-angular-sortable": "^2.0.1" and @progress/kendo-angular-common": "^1.1.0". I don't know if there's massive performance improvements in later versions, but maybe I could get some insight?
Thank you all very much.