Unplanned
Last Updated: 22 Aug 2019 12:36 by ADMIN
Created by: Mitchell
Comments: 0
Category: Sortable
Type: Feature Request
2
Please provide an option to change the position of the hint of the dragged item. Currently it is located below the cursor to the right. 
Unplanned
Last Updated: 10 Jan 2020 12:38 by ADMIN
Created by: ashish
Comments: 0
Category: Sortable
Type: Feature Request
2

Please provide an automatic scroll of the page while dragging an item off the visible screen boundaries. Thank you.

https://stackblitz.com/edit/angular-7it8f2?file=app/app.component.ts

Unplanned
Last Updated: 25 Nov 2019 10:06 by ADMIN
Created by: n/a
Comments: 0
Category: Sortable
Type: Feature Request
1
Please provide a built-in option that would allow to change the cursor when an item is dragged over an area where the item cannot be dropped.
Unplanned
Last Updated: 03 Feb 2020 12:44 by ADMIN
Created by: Christoph
Comments: 1
Category: Sortable
Type: Feature Request
0

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

Unplanned
Last Updated: 03 May 2019 10:40 by ADMIN
Created by: Christoph
Comments: 1
Category: Sortable
Type: Feature Request
0

Sometimes we're using kendo sortable to sort "panels" containing form elements.

Examples:

  • Sortable item with "delete" button
  • Sortable item with "enabled" checkbox

Problem:

The sortable will "catch" the mousdown/pointerdown events and form elements on draggable items will not work.

Solution:

We have to listen in a div for those events and stop propagation.

.. but that needs additional code in template and component. We've created a small directive to do that, but that's an additional module we have to include in each feature module (and we have to remember that it exists, and what was the name, …)

Feature request:

Add a directive to sortable module that allows us to exclude areas inside of sortable items from being draggable to make (form) element work in these areas.

---


import { Directive, ElementRef, OnInit, Renderer2, AfterViewInit } from '@angular/core';

@Directive({
    selector: '[draggableExclude]'
})
export class DraggableExcludeDirective implements AfterViewInit {

    constructor(
        private _elemRef: ElementRef,
        private _renderer: Renderer2,
    ) { }

    ngAfterViewInit() {
        this._renderer.listen(this._elemRef, 'mousedown', (e: MouseEvent) => e.stopPropagation());
        this._renderer.listen(this._elemRef, 'pointerdown', (e: MouseEvent) => e.stopPropagation());
    }
}

Note: Touch is not handled.

… and how we use it


                    <kendo-sortable  … >
                        <ng-template let-attribute="item">
                            <div class="details">
                                {{ attribute.name }}
                            </div>
                            <div draggableExclude>
                                <button kendoButton look="bare" type="button"
                                    (click)="requestDeleteAttribute(attribute)" icon="delete"></button>
                            </div>
                        </ng-template>
                    </kendo-sortable>