Last Updated: 16 Jun 2022 08:58 by ADMIN
Created on: 27 Apr 2019 17:40
Category: Sortable
Type: Feature Request
"exclude from draggable" directive

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


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


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


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';

    selector: '[draggableExclude]'
export class DraggableExcludeDirective implements AfterViewInit {

        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">
                                {{ }}
                            <div draggableExclude>
                                <button kendoButton look="bare" type="button"
                                    (click)="requestDeleteAttribute(attribute)" icon="delete"></button>

Dimiter Topalov
Posted on: 16 Jun 2022 08:58


We are declining this request due to low interest and demand. Furthermore, the upcoming Drag-and-Drop component will have similar built-in functionality:

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: 27 Apr 2019 18:46

Sorry, posted an old (and buggy) version. here's the correct one ;-)

import { Directive, HostListener } from '@angular/core';
    selector: '[draggableExclude]'
export class DraggableExcludeDirective {
    @HostListener('mousedown', ['$event'])
    @HostListener('pointerdown', ['$event'])
    stopPropagation(event: MouseEvent) {