Sortable performance

Question

I have a situation with the Sortable I can't seem to replicate in Plunker.

From what I can tell, Sortable slows down a lot because of something in change detection. Slow to the point of unusable. Visually, you can see the first animation, but then it very slowly refreshes as it slowly finishes change detection.

Here's a plunker that mimics what I have in my code. http://plnkr.co/edit/veH2Y6CkFZ1Dc5jwcPWZ?p=preview

<kendo-sortable [data]="columns"
                zone="abcdefg"
                [animation]="true"
                [activeIndex]="activeIndex"
                itemClass="item"
                emptyItemClass="emptyItem"
                activeItemClass="activeItem item">
  <ng-template let-column="item">
    <div class="container" (click)="itemClick(column)">
      <span class="col-name">
          {{column.title || column.field}}
      </span>
      <span class="col-width">{{column.width}}</span>
    </div>
  </ng-template>
</kendo-sortable>

Basically the dialog is wrapped in a reusable component where I feed strings, templates or components into. The "columns" array coming into the Input of SortableThingComponent is a copy of the array (all new'd Column objects) from a kendo grid.

Since I can't replicate the slow-down, I'm not sure what's going on. Does anyone see anything or have any tidbits about Sortable?

Edit

Here's an updated plunker that includes a grid. I noticed that if I didn't have data in the grid, the Sortable was faster. Workable, but still a little bit slow. The grid is virtual scrolling, page size 100.

http://plnkr.co/edit/hw8HaKpyZ0lRlVwF2tYp?p=preview

Edit 2

Updated the last plunker with data. Now I'm repro'ing the issue. What can be done about this?

Answer 1

Here's a fix for now; detach the change detector for the grid component while the dialog with the sortable is open: http://plnkr.co/edit/yy1Z4rWC53vS3xCnxrWT?p=preview

constructor(private changeDetectorRef: ChangeDetectorRef) { }
this.changeDetectorRef.detach(); // when dialog opens
this.changeDetectorRef.reattach(); // when dialog closes

In the plunker, I had to add a this.changeDetectorRef.detectChanges() because of the way I'm opening the dialog. For now, this is an OK workaround. I might play with the change detection strategy to get it all a little more efficient