It would be a good future to have the additional customization option similar to the Drag and Drop utility component:

https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/hint/

Every drag and drop library I have used in the past support a handle option, meaning that the drag of an item only occurs if the the user has clicked on a specific child element of the item. Normally this option's value is a selector.

<kendo-sortable [data]="tracksData" [handle]="#headerBar">
    <template let-trackData="item">
        <track [tempo]="trackData.tempo"></track>
    </template>
</kendo-sortable>

Where #headerBar is the selector of an indirect or direct child element of TrackComponent.

I don't see how this can be achieved with the current API, but perhaps I'm wrong.

Here are 2 examples of an API for a handle option:
- jQuery UI
- dragula

Github ticket: https://github.com/telerik/kendo-angular2/issues/57#issuecomment-254558547

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

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

Hello,

I'd like the angular package has got the same feature provided by the query package

https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/configuration/holdtodrag

Regards AL 

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>

It would be useful if sortable items can be dragged from one zone container to another, without having to drag them over the second container's items first.

Similar to the desired behavior, can be seen in this jQuery demo: https://dojo.telerik.com/uZOgOPAd/2

Hi team,

It will be a nice addition if an event is added to the Sortable component that fires when the component data is updated.

Hi,

I would like to have a feature from kendo sortable to select multiple items in a list and drag it to the other side of list.

Currently we do have feature only to move single item or the entire group to move across list.

I would like to have more customized way to have selected items in a list to move across from one end to another.

Please find the screenshot below

Support selecting multiple items to be dragged/dropped.

Currently, it is very difficult to get the Sortable to use Angular components as child items.
It would be great if it supported this.

DragEnd event should be fired when user ends a drag. Now this event is being fired when user is moving element in only one component.

I attach example in plunker. Please notice that there is event handler for dragEnd event. To test this please move colors in one pallete and between two palletes.

https://plnkr.co/edit/yED4zBX9R7lf75jZnlrq?p=preview

Best regards,
Pawel

I'm currently stuck at v12.1 of the Layout module, because there are some breaking changes after that that doesn't allow me to add elements between the tab titles and the tab content.

<kendo-tabstrip>
    <div>
        Static stuff that will be displayed for every tab, between the tab title and content.
    </div>

    <kendo-tabstrip-tab> 
        ...
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab> 
        ...
    </kendo-tabstrip-tab>
</kend-tabstrip>

This is working in v12.1, but not after that. In the newest version, the "static elements" are ignore/removed from the HTML.

Related Github ticket: https://github.com/telerik/kendo-angular2/issues/97

Bound array on a kendo-sortable should update with no extra code

Hi,

We are using the Kendo UI sortable component to allow drag & drop of tabs. Currently there is no way to control the position of the dragged element in relation to the cursor (It's always on the top left corner)

It would be nice if you could add an option to configure this, so that the cursor could be in the middle/bottom of the dragged element.

See the attached image.

Thanks in advance,

Shai.