@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.4

package/fesm2020/progress-kendo-angular-treelist.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, HostBinding, Output, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/forms';
@@ -12,7 +12,7 @@ import { merge, of, fromEvent, isObservable, BehaviorSubject, Subscription, Subj
 import { auditTime, take, switchMap, map, distinctUntilChanged, filter, tap, throttleTime, takeUntil, switchMapTo, debounceTime, delay, bufferCount } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, anyChanged, isChanged as isChanged$1, guid, ResizeSensorComponent, hasObservers, DraggableModule, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, isChanged as isChanged$1, guid, ResizeSensorComponent, hasObservers, DraggableModule, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
 import { orderBy, isCompositeFilterDescriptor, process, aggregateBy } from '@progress/kendo-data-query';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -21,19 +21,21 @@ import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$2 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon, columnsIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon, columnsIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, caretAltRightIcon, reorderIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import { getter, setter } from '@progress/kendo-common';
+import * as i32 from '@progress/kendo-angular-utils';
+import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
 import * as i3$1 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import * as i4$1 from '@progress/kendo-angular-inputs';
+import * as i2 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i3$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i4$2 from '@progress/kendo-angular-buttons';
+import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
 import * as i1$4 from '@progress/kendo-angular-intl';
-import * as i4$3 from '@progress/kendo-angular-label';
+import * as i4$2 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -46,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846780,
-    version: '13.0.0-develop.2',
+    publishDate: 1684849967,
+    version: '13.0.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -272,6 +274,10 @@ const isSpanColumn = column => column.isSpanColumn;
  * @hidden
  */
 const isCheckboxColumn = column => column.isCheckboxColumn;
+/**
+ * @hidden
+ */
+const isRowReorderColumn = column => column.isRowReorderColumn;
 const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
 /**
  * The base class for the column components of the TreeList.
@@ -2981,17 +2987,17 @@ const append = (element) => {
 /**
  * @hidden
  */
-const getDocument = element => element.ownerDocument.documentElement;
+const getDocument$1 = element => element.ownerDocument.documentElement;
 /**
  * @hidden
  */
-const getWindow = element => element.ownerDocument.defaultView;
+const getWindow$1 = element => element.ownerDocument.defaultView;
 /**
  * @hidden
  */
 const offset = element => {
-    const { clientTop, clientLeft } = getDocument(element);
-    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { clientTop, clientLeft } = getDocument$1(element);
+    const { pageYOffset, pageXOffset } = getWindow$1(element);
     const { top, left } = element.getBoundingClientRect();
     return {
         top: top + pageYOffset - clientTop,
@@ -5143,6 +5149,344 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
+/**
+ * @hidden
+ */
+const isNextSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.nextElementSibling;
+/**
+ * @hidden
+ */
+const isPreviousSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.previousElementSibling;
+/**
+ * @hidden
+ */
+function getOffset(element) {
+    const { clientTop, clientLeft } = getDocument(element);
+    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { top, left } = element.getBoundingClientRect();
+    return {
+        top: top + pageYOffset - clientTop,
+        left: left + pageXOffset - clientLeft
+    };
+}
+;
+/**
+ * @hidden
+ */
+const hintIcons = {
+    forbidden: 'cancel',
+    before: 'insert-middle',
+    after: 'insert-middle',
+    over: 'plus'
+};
+/**
+ * @hidden
+ */
+const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon,
+    over: plusIcon
+};
+/**
+ * @hidden
+ */
+const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after',
+    over: 'over'
+};
+/**
+ * @hidden
+ */
+const hintStyles = {
+    zIndex: '20000',
+    display: 'flex',
+    position: 'fixed'
+};
+/**
+ * @hidden
+ */
+const hintClasses = ['k-drag-clue', 'k-reorder-clue'];
+/**
+ * @hidden
+ */
+const dropIndicatorStyles = {
+    zIndex: '19000',
+    position: 'absolute'
+};
+/**
+ * @hidden
+ */
+const dropIndicatorClasses = ['k-drop-hint', 'k-drop-hint-h'];
+/**
+ * @hidden
+ */
+const defaultSelectors = {
+    handle: '.k-table-td.k-drag-cell',
+    dragTarget: '.k-table-row[data-treelist-view-index]',
+    dropTarget: '.k-table-row[data-treelist-view-index]'
+};
+/**
+ * @hidden
+ */
+const rowIndexAttr = 'data-treelist-view-index';
+/**
+ * @hidden
+ */
+const findParent$1 = (collection, searchItem, field) => {
+    let parent = null;
+    for (const item of collection) {
+        if (searchItem === item) {
+            return null;
+        }
+        const checked = [];
+        const queue = [];
+        queue.push(item);
+        while (queue.length !== 0) {
+            const current = queue.shift();
+            if (!current) {
+                continue;
+            }
+            checked.push(current);
+            if (current === searchItem) {
+                return item;
+            }
+            if (current.hasOwnProperty(field)) {
+                current[field].forEach(node => {
+                    if (checked.indexOf(node) === -1) {
+                        checked.push(node);
+                        queue.push(node);
+                        if (node === searchItem) {
+                            parent = current;
+                            return;
+                        }
+                    }
+                });
+            }
+            if (parent) {
+                return parent;
+            }
+        }
+    }
+};
+const getDocument = element => element?.ownerDocument.documentElement;
+const getWindow = element => element?.ownerDocument.defaultView;
+
+/**
+ * @hidden
+ */
+class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.defaultSelectors = defaultSelectors;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.lastDropPosition = dropPosition.forbidden;
+        this.hintElement = null;
+        this.rowReorder = new EventEmitter();
+    }
+    press(ev) {
+        this.dragTarget = ev.dragTarget;
+        this.offsetY = ev.dragEvent.offsetY;
+    }
+    dragStart() {
+        this.createDropIndicator();
+    }
+    drag(ev) {
+        if (isPresent$1(ev.hintElement) && !isPresent$1(this.hintElement)) {
+            this.hintElement = ev.hintElement;
+            this.decorateHint();
+        }
+        const position = {
+            x: ev.dragEvent.clientX,
+            y: ev.dragEvent.clientY - this.offsetY
+        };
+        if (isPresent$1(this.hintElement)) {
+            this.renderer.setStyle(this.hintElement, 'left', `${position.x}px`);
+            this.renderer.setStyle(this.hintElement, 'top', `${position.y}px`);
+        }
+        this.positionDropIndicator(ev);
+    }
+    dragEnter(ev) {
+        this.dropTarget = ev.dropTarget;
+        this.view = ev.dragData;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.lastDropPosition === dropPosition.forbidden && this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop() {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    get hintIcon() {
+        return hintIcons[this.lastDropPosition];
+    }
+    get hintSVGIcon() {
+        return hintSVGIcons[this.lastDropPosition];
+    }
+    getDefaultHintText(columns, data) {
+        let hintText = '';
+        const columnFieldsArray = columns
+            .toArray()
+            .filter(column => !column.hidden && isPresent$1(column.field))
+            .map(column => column.field);
+        const draggedDragRow = this.getDragRowPerElement(this.dragTarget, data);
+        const draggedDataItem = draggedDragRow?.dataItem;
+        isPresent$1(draggedDataItem) && columnFieldsArray.forEach(column => {
+            const columnValue = draggedDataItem[column];
+            isPresent$1(columnValue) ? hintText += `${columnValue} ` : null;
+        });
+        return hintText.trim();
+    }
+    rowReorderArgs(dragRow, dropRow, data) {
+        const dragRowData = this.getDragRowPerElement(dragRow, data);
+        const dropRowData = this.getDragRowPerElement(dropRow, data);
+        return {
+            draggedRows: [dragRowData],
+            dropTargetRow: dropRowData,
+            dropPosition: this.lastDropPosition
+        };
+    }
+    isOverChild(_item) { return false; }
+    reorderRows(_ev, _collection, _field) { }
+    get parentIdField() {
+        return this.bindingDirective.parentIdField;
+    }
+    get idField() {
+        return this.bindingDirective.idField;
+    }
+    get childrenField() {
+        return this.bindingDirective.childrenField;
+    }
+    get data() {
+        return this.bindingDirective.data;
+    }
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute(rowIndexAttr);
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const dataItem = rowIndex === -1 ? null : data?.at(rowIndex)?.data;
+        return {
+            dataItem,
+            rowIndex,
+            element: row
+        };
+    }
+    createDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.dropIndicator = document.createElement('div');
+        this.decorateDropIndicator();
+        this.dropIndicator.innerHTML = `
+            <div class="k-drop-hint-start"></div>
+            <div class="k-drop-hint-line"></div>
+        `;
+        document.body.appendChild(this.dropIndicator);
+        this.hide();
+    }
+    destroyDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        ;
+        if (this.dropIndicator && this.dropIndicator.parentElement) {
+            document.body.removeChild(this.dropIndicator);
+            this.dropIndicator = null;
+        }
+    }
+    decorateHint() {
+        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
+        Object.keys(hintStyles)
+            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
+    }
+    positionDropIndicator(ev) {
+        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
+        this.updateDropIndicatorPosition();
+    }
+    decorateDropIndicator() {
+        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
+        Object.keys(dropIndicatorStyles)
+            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
+    }
+    getDropPosition(e) {
+        if (this.dropTarget === this.dragTarget || !isPresent$1(this.dropTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 3;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const pointerPosition = e.clientY;
+        const itemTop = itemViewPortCoords.top;
+        let currentDropPosition = null;
+        if (pointerPosition <= itemTop + itemDivisionHeight) {
+            currentDropPosition = dropPosition.before;
+        }
+        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
+            currentDropPosition = dropPosition.after;
+        }
+        else {
+            currentDropPosition = dropPosition.over;
+        }
+        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        if (this.isOverChild(dropTargetRow.dataItem)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        return currentDropPosition;
+    }
+    updateDropIndicatorPosition() {
+        if (this.shouldHideDropIndicator() || !this.dropTarget) {
+            this.hide();
+            return;
+        }
+        this.show();
+        const destinationItemOffset = getOffset(this.dropTarget);
+        let indicatorOffsetTop = destinationItemOffset.top;
+        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
+        if (this.lastDropPosition === dropPosition.after) {
+            indicatorOffsetTop += this.dropTarget.offsetHeight;
+        }
+        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
+        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
+    }
+    shouldHideDropIndicator() {
+        return this.lastDropPosition === dropPosition.forbidden || this.lastDropPosition === dropPosition.over;
+    }
+    hide() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
+        }
+    }
+    show() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.removeStyle(this.dropIndicator, 'display');
+        }
+    }
+}
+RowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+RowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
+                type: Output
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
  * @hidden
@@ -6038,7 +6382,7 @@ StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i4$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i2.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -6336,7 +6680,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -7094,7 +7438,7 @@ BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8586,7 +8930,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
         </button>
-    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
+    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -8831,7 +9175,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -10653,6 +10997,10 @@ const ICON_CLASS = 'k-icon k-svg-icon';
  * @hidden
  */
 const IGNORE_CONTAINER_CLASSES = 'k-treelist-ignore-click';
+/**
+ * @hidden
+ */
+const DRAG_HANDLE_CLASS = 'k-drag-cell';
 
 /* eslint-disable @angular-eslint/pipe-prefix */
 /**
@@ -10719,13 +11067,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class CellComponent {
-    constructor(editService, focusGroup) {
+    constructor(editService, localization, focusGroup) {
         this.editService = editService;
+        this.localization = localization;
         this.focusGroup = focusGroup;
         this.isNew = false;
         this.level = 0;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
+        this.reorderIcon = reorderIcon;
         this.cellContext = {};
         this._templateContext = {};
         this._editTemplateContext = {};
@@ -10741,6 +11091,12 @@ class CellComponent {
     get textNoWrapClass() {
         return this.column.expandable;
     }
+    get dragHandleCellClass() {
+        return isRowReorderColumn(this.column);
+    }
+    get dragRowHandleLabel() {
+        return isRowReorderColumn(this.column) ? this.localization.get('dragRowHandleLabel') : undefined;
+    }
     set viewItem(value) {
         this._viewItem = value;
         this.cellContext.viewItem = this.viewItem;
@@ -10808,8 +11164,8 @@ class CellComponent {
         context.rowIndex = this.viewItem.rowIndex;
     }
 }
-CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
-CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass" } }, ngImport: i0, template: `
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: i1$1.LocalizationService }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
         <ng-container [ngSwitch]="isEdited">
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
@@ -10838,6 +11194,12 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -10878,7 +11240,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i3$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "levelItems": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -10912,6 +11274,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -10954,7 +11322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: FocusGroup }]; }, propDecorators: { commandCellClass: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i1$1.LocalizationService }, { type: FocusGroup }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,
                 args: ['class.k-command-cell']
             }], isCheckboxColumn: [{
@@ -10963,6 +11331,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], textNoWrapClass: [{
                 type: HostBinding,
                 args: ['class.k-text-nowrap']
+            }], dragHandleCellClass: [{
+                type: HostBinding,
+                args: ['class.k-drag-cell']
+            }, {
+                type: HostBinding,
+                args: ['class.k-touch-action-none']
+            }], dragRowHandleLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], column: [{
                 type: Input
             }], columnIndex: [{
@@ -11167,8 +11544,10 @@ class TableBodyComponent {
     clickHandler(eventArg) {
         const target = eventArg.target;
         const { cell, row } = this.targetElements(target);
-        if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
-            !hasClasses(row, NON_DATA_ROW_CLASSES)) {
+        const forbiddenCellClasses = NON_DATA_CELL_CLASSES.concat(` ${DRAG_HANDLE_CLASS}`);
+        const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
+        const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
+        if (isValidRow && isValidCell) {
             if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
                 return;
             }
@@ -12580,7 +12959,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerPreviousPage')"
             (click)="onButtonClick('prevPage')">
         </button>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12765,7 +13144,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12934,7 +13313,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-numerictextbox>
                 {{textFor('pagerOf')}} {{totalPages}}
         </span>
-    `, isInline: true, components: [{ type: i4$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -13040,7 +13419,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerLastPage')"
             (click)="onButtonClick('lastPage')">
         </button>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -13240,7 +13619,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [attr.aria-label]="textFor('pagerItemsPerPage')"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -13642,7 +14021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", dragRowHandleLabel: "dragRowHandleLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{}]
@@ -13754,6 +14133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], bottomToolbarLabel: [{
                 type: Input
+            }], dragRowHandleLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -14076,7 +14457,7 @@ const isInEditedCell = (element, treelistElement) => closest(element, matchesCla
  * {% endmeta %}
  */
 class TreeListComponent {
-    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx) {
+    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx, rowReorderService) {
         this.supportService = supportService;
         this.wrapper = wrapper;
         this.changeNotification = changeNotification;
@@ -14101,6 +14482,7 @@ class TreeListComponent {
         this.selectionService = selectionService;
         this.localization = localization;
         this.ctx = ctx;
+        this.rowReorderService = rowReorderService;
         /**
          * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled.
          *
@@ -14336,6 +14718,11 @@ class TreeListComponent {
          * Used by the expand directive and the Gantt component.
          */
         this.expandStateChange = new EventEmitter();
+        /**
+         * Fires when the user drops the dragged row and reordering is performed.
+         * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
+         */
+        this.rowReorder = new EventEmitter();
         /**
          * @hidden
          */
@@ -14365,6 +14752,11 @@ class TreeListComponent {
         this._sort = new Array();
         this._skip = 0;
         this.cachedWindowWidth = 0;
+        this._rowReorderable = false;
+        /**
+         * @hidden
+         */
+        this.treeListData = () => { return this.view; };
         this._rowClass = () => null;
         validatePackage(packageMetadata);
         this.subscriptions.add(localization.changes.subscribe(({ rtl }) => {
@@ -14427,6 +14819,11 @@ class TreeListComponent {
                 this.view.clear();
                 this.expandStateChange.emit(args);
             }
+            if (this.rowReorderable) {
+                this.ngZone.onStable.pipe(take(2)).subscribe(() => {
+                    this.notifyReorderContainers();
+                });
+            }
         }));
         this.subscriptions.add(this.view.childrenLoaded.subscribe(() => {
             this.changeDetectorRef.detectChanges();
@@ -14625,6 +15022,26 @@ class TreeListComponent {
         }
         this.selectionService.isSelected = value;
     }
+    /**
+     * Enables the [row reordering]({% slug treelist_row_reordering %}) of the TreeList.
+     * @default false
+     */
+    set rowReorderable(value) {
+        this._rowReorderable = value;
+        if (value) {
+            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
+                hasObservers(this.rowReorder) && this.ngZone.run(() => {
+                    this.rowReorder.emit(args);
+                });
+            });
+        }
+        else {
+            this.rowReorderSubscription?.unsubscribe();
+        }
+    }
+    get rowReorderable() {
+        return this._rowReorderable;
+    }
     /**
      * @hidden
      */
@@ -14886,6 +15303,30 @@ class TreeListComponent {
         this.ngZone = null;
         clearTimeout(this.pageChangeTimeout);
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
+    /**
+     * @hidden
+     */
+    getDefaultSelectors(type) {
+        return this.rowReorderService.defaultSelectors[type];
+    }
+    /**
+     * @hidden
+     */
+    getHintSettings(setting) {
+        return this.rowReorderService[setting];
+    }
+    /**
+     * @hidden
+     */
+    get hintText() {
+        return this.rowReorderService.getDefaultHintText(this.columnList, this.view);
+    }
     /**
      * @hidden
      */
@@ -15577,6 +16018,7 @@ class TreeListComponent {
             this.closeCell();
             this.cancelCell();
             this.dataStateChange.emit(x);
+            this.rowReorderable && this.notifyReorderContainers();
         }));
     }
     attachEditHandlers() {
@@ -15841,9 +16283,13 @@ class TreeListComponent {
         this.columns.reset(columns.toArray());
         this.columns.notifyOnChanges();
     }
+    notifyReorderContainers() {
+        this.dragTargetContainer?.notify();
+        this.dropTargetContainer?.notify();
+    }
 }
-TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, deps: [{ token: BrowserSupportService }, { token: i0.ElementRef }, { token: ChangeNotificationService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: ExpandStateService }, { token: OptionChangesService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, deps: [{ token: BrowserSupportService }, { token: i0.ElementRef }, { token: ChangeNotificationService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: ExpandStateService }, { token: OptionChangesService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: ContextService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", rowReorderable: "rowReorderable", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange", rowReorder: "rowReorder" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -15884,8 +16330,9 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: ExpandableTreeComponent,
             useExisting: forwardRef(() => TreeListComponent)
         },
-        ContextService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
+        ContextService,
+        RowReorderService
+    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeListLocalizedMessages
 
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
@@ -16046,6 +16493,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
+            i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
+            dragRowHandleLabel="Drag row"
          >
         </ng-container>
         <kendo-treelist-toolbar
@@ -16063,7 +16512,24 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel">
+            [attr.aria-label]="ariaLabel"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="treeListData">
             <ng-template [ngIf]="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
@@ -16215,7 +16681,16 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId">
         </kendo-treelist-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+        <ng-template #defaultHint>
+            <kendo-icon-wrapper
+                [name]="getHintSettings('hintIcon')"
+                [svgIcon]="getHintSettings('hintSVGIcon')"
+                innerCssClass="k-drag-status">
+            </kendo-icon-wrapper>
+            {{hintText}}
+        </ng-template>
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i32.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i32.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -16263,7 +16738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             provide: ExpandableTreeComponent,
                             useExisting: forwardRef(() => TreeListComponent)
                         },
-                        ContextService
+                        ContextService,
+                        RowReorderService
                     ],
                     selector: 'kendo-treelist',
                     template: `
@@ -16427,6 +16903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
+            i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
+            dragRowHandleLabel="Drag row"
          >
         </ng-container>
         <kendo-treelist-toolbar
@@ -16444,7 +16922,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel">
+            [attr.aria-label]="ariaLabel"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="treeListData">
             <ng-template [ngIf]="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
@@ -16596,9 +17091,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId">
         </kendo-treelist-toolbar>
+
+        <ng-template #defaultHint>
+            <kendo-icon-wrapper
+                [name]="getHintSettings('hintIcon')"
+                [svgIcon]="getHintSettings('hintSVGIcon')"
+                innerCssClass="k-drag-status">
+            </kendo-icon-wrapper>
+            {{hintText}}
+        </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }]; }, propDecorators: { ariaLabel: [{
+        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }, { type: RowReorderService }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], data: [{
@@ -16651,6 +17155,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isSelected: [{
                 type: Input
+            }], rowReorderable: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], filterChange: [{
@@ -16699,6 +17205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['collapse']
             }], expandStateChange: [{
                 type: Output
+            }], rowReorder: [{
+                type: Output
             }], columnsRef: [{
                 type: Input,
                 args: ['columns']
@@ -16750,6 +17258,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaRoot: [{
                 type: ViewChild,
                 args: ['ariaRoot', { static: true }]
+            }], dragTargetContainer: [{
+                type: ViewChild,
+                args: [DragTargetContainerDirective]
+            }], dropTargetContainer: [{
+                type: ViewChild,
+                args: [DropTargetContainerDirective]
             }], fetchChildren: [{
                 type: Input
             }], hasChildren: [{
@@ -16927,6 +17441,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: [CellTemplateDirective, { static: false }]
             }] } });
 
+/**
+ * Represents the drag handle for reordering rows in the TreeList.
+ */
+class RowReorderColumnComponent extends ColumnBase {
+    constructor(parent) {
+        super(parent);
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.isRowReorderColumn = true;
+    }
+}
+RowReorderColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+RowReorderColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RowReorderColumnComponent, selector: "kendo-treelist-rowreorder-column", providers: [
+        {
+            provide: ColumnBase,
+            useExisting: forwardRef(() => RowReorderColumnComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => RowReorderColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-treelist-rowreorder-column',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; } });
+
 const exportedModules$3 = [
     ColumnComponent,
     ColumnGroupComponent,
@@ -16940,7 +17494,8 @@ const exportedModules$3 = [
     SpanColumnComponent,
     TableDirective,
     LoadingComponent,
-    CheckboxColumnComponent
+    CheckboxColumnComponent,
+    RowReorderColumnComponent
 ];
 /**
  * @hidden
@@ -16951,6 +17506,7 @@ class SharedModule {
             ColumnComponent,
             SpanColumnComponent,
             CheckboxColumnComponent,
+            RowReorderColumnComponent,
             ColumnGroupComponent,
             FocusableDirective
         ];
@@ -16969,7 +17525,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
+        CheckboxColumnComponent,
+        RowReorderColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
         ColumnGroupComponent,
         LogicalCellDirective,
         LogicalRowDirective,
@@ -16981,7 +17538,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent, DraggableModule, IconsModule] });
+        CheckboxColumnComponent,
+        RowReorderColumnComponent, DraggableModule, IconsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, IconsModule], DraggableModule, IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -18052,7 +18610,7 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -19158,8 +19716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 class BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.state = {};
         this.cache = new Map();
         this.originalData = [];
@@ -19192,6 +19751,8 @@ class BaseBindingDirective {
         this.applyState(this.state);
         this.subscriptions.add(this.component.dataStateChange
             .subscribe(this.onStateChange.bind(this)));
+        this.component.rowReorderable && this.subscriptions.add(this.rowReorderService.rowReorder
+            .subscribe(this.onRowReorder.bind(this)));
     }
     /**
      * @hidden
@@ -19232,6 +19793,7 @@ class BaseBindingDirective {
         this.cache.clear();
         this.component.data = this.fetchChildren();
     }
+    onRowReorder(_event) { }
     applyState({ sort, filter }) {
         this.sort = sort;
         this.filter = filter;
@@ -19300,12 +19862,12 @@ class BaseBindingDirective {
         this.dataChanged = true;
     }
 }
-BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Directive });
 BaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaseBindingDirective, inputs: { sort: "sort", filter: "filter", aggregate: "aggregate" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { sort: [{
+        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }, { type: RowReorderService }]; }, propDecorators: { sort: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -19355,6 +19917,53 @@ class HierarchyEditService extends LocalEditService {
     }
 }
 
+/**
+ * @hidden
+ */
+class HierarchicalRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasChildren = isPresent(draggedItem[this.childrenField]) && draggedItem[this.childrenField].length > 0;
+        if (!hasChildren) {
+            return false;
+        }
+        if (targetItem && draggedItem.hasOwnProperty(this.childrenField)) {
+            if (draggedItem[this.childrenField].includes(targetItem)) {
+                return true;
+            }
+            const parent = findParent$1(this.data, targetItem, this.childrenField);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+        return false;
+    }
+    reorderRows(ev, collection, field) {
+        const draggedItem = ev.draggedRows[0].dataItem;
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        const draggedItemParent = findParent$1(collection, draggedItem, field);
+        const dropTargetParent = findParent$1(collection, dropTargetItem, field);
+        const draggedItemIdx = draggedItemParent ? draggedItemParent[field].indexOf(draggedItem) : collection.indexOf(draggedItem);
+        let dropTargetItemIdx = dropTargetParent ? dropTargetParent[field].indexOf(dropTargetItem) : collection.indexOf(dropTargetItem);
+        if (ev.dropPosition === dropPosition.after && dropTargetItemIdx < draggedItemIdx) {
+            dropTargetItemIdx++;
+        }
+        draggedItemParent ? draggedItemParent[field].splice(draggedItemIdx, 1) : collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition !== dropPosition.over) {
+            dropTargetParent ? dropTargetParent[field].splice(dropTargetItemIdx, 0, draggedItem) : collection.splice(dropTargetItemIdx, 0, draggedItem);
+        }
+        else {
+            dropTargetItem[field].unshift(draggedItem);
+        }
+    }
+}
+HierarchicalRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+HierarchicalRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * A directive which binds the TreeList to a tree of objects.
  *
@@ -19363,12 +19972,16 @@ class HierarchyEditService extends LocalEditService {
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 class HierarchyBindingDirective extends BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         super(component);
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.childrenGetter = getter('items');
         this.childrenSetter = setter('items');
         component.localEditService = new HierarchyEditService(this);
+        if (this.rowReorderService) {
+            this.rowReorderService.bindingDirective = this;
+        }
     }
     /**
      *  The name of the field which holds the child data items of the node.
@@ -19376,23 +19989,56 @@ class HierarchyBindingDirective extends BaseBindingDirective {
     set childrenField(value) {
         this.childrenGetter = getter(value);
         this.childrenSetter = setter(value);
+        this._childrenField = value;
     }
+    get childrenField() {
+        return this._childrenField;
+    }
+    /**
+     * @hidden
+     */
     getChildren(item) {
         return item ? this.childrenGetter(item) || [] : this.originalData;
     }
     itemKey(item) {
         return item;
     }
+    onRowReorder(ev) {
+        if (ev.dropPosition === 'forbidden') {
+            return;
+        }
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        if (ev.dropPosition === 'over') {
+            if (!dropTargetItem.hasOwnProperty(this.childrenField)) {
+                dropTargetItem[this.childrenField] = [];
+            }
+        }
+        this.rowReorderService.reorderRows(ev, this.originalData, this.childrenField);
+        this.rebind();
+    }
 }
-HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: { childrenField: "childrenField", data: ["kendoTreeListHierarchyBinding", "data"] }, exportAs: ["kendoTreeListHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: { childrenField: "childrenField", data: ["kendoTreeListHierarchyBinding", "data"] }, providers: [
+        {
+            provide: RowReorderService,
+            useClass: HierarchicalRowReorderService
+        }
+    ], exportAs: ["kendoTreeListHierarchyBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoTreeListHierarchyBinding',
-                    selector: '[kendoTreeListHierarchyBinding]'
+                    selector: '[kendoTreeListHierarchyBinding]',
+                    providers: [
+                        {
+                            provide: RowReorderService,
+                            useClass: HierarchicalRowReorderService
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { childrenField: [{
+        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }, { type: RowReorderService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { childrenField: [{
                 type: Input
             }], data: [{
                 type: Input,
@@ -19443,6 +20089,47 @@ class FlatEditService extends LocalEditService {
     }
 }
 
+/**
+ * @hidden
+ */
+class FlatRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasParent = isPresent(targetItem[this.parentIdField]);
+        const sameParents = draggedItem[this.parentIdField] === targetItem[this.parentIdField];
+        if (!hasParent || sameParents) {
+            return false;
+        }
+        if (targetItem && targetItem.hasOwnProperty(this.parentIdField)) {
+            if (draggedItem[this.idField] === targetItem[this.parentIdField]) {
+                return true;
+            }
+            const parent = this.data.find(i => i[this.idField] === targetItem[this.parentIdField]);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+    }
+    reorderRows(ev, collection) {
+        const { draggedRows, dropTargetRow } = ev;
+        const draggedDataItem = draggedRows[0].dataItem;
+        const dropTargetDataItem = dropTargetRow.dataItem;
+        let dropTargetIdx = collection.indexOf(dropTargetDataItem);
+        const draggedItemIdx = collection.indexOf(draggedDataItem);
+        collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition === 'after' && dropTargetIdx < draggedItemIdx) {
+            dropTargetIdx++;
+        }
+        collection.splice(dropTargetIdx, 0, draggedDataItem);
+    }
+}
+FlatRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+FlatRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, decorators: [{
+            type: Injectable
+        }] });
+
 const ROOT_ID = null;
 /**
  * A directive which binds the TreeList to an array of objects by using
@@ -19453,14 +20140,18 @@ const ROOT_ID = null;
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
  */
 class FlatBindingDirective extends BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         super(component);
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.idGetter = getter('id');
         this.idSetter = setter('id');
         this.parentIdGetter = getter('parentId');
         this.parentIdSetter = setter('parentId');
         component.localEditService = new FlatEditService(this);
+        if (this.rowReorderService) {
+            this.rowReorderService.bindingDirective = this;
+        }
     }
     /**
      * The name of the field which contains the identifier of the parent node.
@@ -19468,6 +20159,10 @@ class FlatBindingDirective extends BaseBindingDirective {
     set parentIdField(value) {
         this.parentIdGetter = getter(value);
         this.parentIdSetter = setter(value);
+        this._parentIdField = value;
+    }
+    get parentIdField() {
+        return this._parentIdField;
     }
     /**
      * The name of the field which contains the unique identifier of the node.
@@ -19475,7 +20170,14 @@ class FlatBindingDirective extends BaseBindingDirective {
     set idField(value) {
         this.idGetter = getter(value);
         this.idSetter = setter(value);
+        this._idField = value;
+    }
+    get idField() {
+        return this._idField;
     }
+    /**
+     * @hidden
+     */
     getChildren(item) {
         const id = this.itemKey(item);
         const children = id === ROOT_ID ?
@@ -19486,16 +20188,48 @@ class FlatBindingDirective extends BaseBindingDirective {
     itemKey(item) {
         return item ? this.idGetter(item) : ROOT_ID;
     }
+    onRowReorder(ev) {
+        if (ev.dropPosition === 'forbidden') {
+            return;
+        }
+        const draggedItem = ev.draggedRows[0].dataItem;
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        if (ev.dropPosition === 'over') {
+            const dropItemId = this.itemKey(dropTargetItem);
+            if (draggedItem[this.parentIdField] !== dropItemId) {
+                draggedItem[this.parentIdField] = dropItemId;
+            }
+        }
+        else {
+            const dropItemParentId = dropTargetItem[this.parentIdField];
+            draggedItem[this.parentIdField] = dropItemParentId;
+            this.rowReorderService.reorderRows(ev, this.originalData);
+        }
+        this.rebind();
+    }
 }
-FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: { parentIdField: "parentIdField", idField: "idField", data: ["kendoTreeListFlatBinding", "data"] }, exportAs: ["kendoTreeListFlatBinding"], usesInheritance: true, ngImport: i0 });
+FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: { parentIdField: "parentIdField", idField: "idField", data: ["kendoTreeListFlatBinding", "data"] }, providers: [
+        {
+            provide: RowReorderService,
+            useClass: FlatRowReorderService
+        }
+    ], exportAs: ["kendoTreeListFlatBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoTreeListFlatBinding',
-                    selector: '[kendoTreeListFlatBinding]'
+                    selector: '[kendoTreeListFlatBinding]',
+                    providers: [
+                        {
+                            provide: RowReorderService,
+                            useClass: FlatRowReorderService
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { parentIdField: [{
+        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }, { type: RowReorderService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { parentIdField: [{
                 type: Input
             }], idField: [{
                 type: Input
@@ -19907,7 +20641,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RowFilterModule,
         FilterMenuModule,
         ResizeSensorModule,
-        ColumnMenuModule], exports: [TreeListComponent,
+        ColumnMenuModule,
+        DragAndDropModule$1], exports: [TreeListComponent,
         ToolbarTemplateDirective,
         ToolbarComponent,
         TreeListSpacerComponent,
@@ -19919,7 +20654,7 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FlatBindingDirective,
         ExpandableDirective,
         SelectableDirective,
-        TreeListToolbarFocusableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
+        TreeListToolbarFocusableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, RowReorderColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
 TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, imports: [[
             CommonModule,
             SharedModule,
@@ -19929,7 +20664,8 @@ TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RowFilterModule,
             FilterMenuModule,
             ResizeSensorModule,
-            ColumnMenuModule
+            ColumnMenuModule,
+            DragAndDropModule$1
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, decorators: [{
             type: NgModule,
@@ -19945,7 +20681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         RowFilterModule,
                         FilterMenuModule,
                         ResizeSensorModule,
-                        ColumnMenuModule
+                        ColumnMenuModule,
+                        DragAndDropModule$1
                     ]
                 }]
         }] });
@@ -20822,5 +21559,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };