@progress/kendo-angular-treelist 13.0.0-develop.3 → 13.0.0-develop.5

package/esm2020/shared.module.mjs

@@ -19,6 +19,7 @@ import { FieldAccessorPipe } from "./rendering/common/field-accessor.pipe";
 import { TableDirective } from "./column-resizing/table.directive";
 import { FocusableDirective } from "./navigation/focusable.directive";
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { RowReorderColumnComponent } from './columns/rowreorder-column.component';
 import * as i0 from "@angular/core";
 const exportedModules = [
     ColumnComponent,
@@ -33,7 +34,8 @@ const exportedModules = [
     SpanColumnComponent,
     TableDirective,
     LoadingComponent,
-    CheckboxColumnComponent
+    CheckboxColumnComponent,
+    RowReorderColumnComponent
 ];
 /**
  * @hidden
@@ -44,6 +46,7 @@ export class SharedModule {
             ColumnComponent,
             SpanColumnComponent,
             CheckboxColumnComponent,
+            RowReorderColumnComponent,
             ColumnGroupComponent,
             FocusableDirective
         ];
@@ -62,7 +65,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,
@@ -74,7 +78,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,

package/esm2020/treelist.component.mjs

@@ -66,6 +66,8 @@ import { DataBoundTreeComponent } from './binding-directives/data-bound-tree-com
 import { ExpandableTreeComponent } from './expand-state/expandable-tree-component';
 import { ContextService } from './common/provider.service';
 import { guid } from '@progress/kendo-angular-common';
+import { RowReorderService } from './row-reordering/row-reorder.service';
+import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./data/change-notification.service";
@@ -87,19 +89,22 @@ import * as i17 from "./common/option-changes.service";
 import * as i18 from "./selection/selection.service";
 import * as i19 from "@progress/kendo-angular-l10n";
 import * as i20 from "./common/provider.service";
-import * as i21 from "./rendering/toolbar/toolbar.component";
-import * as i22 from "./rendering/common/col-group.component";
-import * as i23 from "./rendering/header/header.component";
-import * as i24 from "./rendering/list.component";
-import * as i25 from "./rendering/table-body.component";
-import * as i26 from "./rendering/common/loading.component";
-import * as i27 from "./pager/pager.component";
-import * as i28 from "./localization/localized-messages.directive";
-import * as i29 from "@angular/common";
-import * as i30 from "./column-resizing/table.directive";
-import * as i31 from "./layout/resizable.directive";
-import * as i32 from "@progress/kendo-angular-common";
-import * as i33 from "./selection/marquee.directive";
+import * as i21 from "./row-reordering/row-reorder.service";
+import * as i22 from "./rendering/toolbar/toolbar.component";
+import * as i23 from "./rendering/common/col-group.component";
+import * as i24 from "./rendering/header/header.component";
+import * as i25 from "./rendering/list.component";
+import * as i26 from "./rendering/table-body.component";
+import * as i27 from "./rendering/common/loading.component";
+import * as i28 from "./pager/pager.component";
+import * as i29 from "@progress/kendo-angular-icons";
+import * as i30 from "./localization/localized-messages.directive";
+import * as i31 from "@angular/common";
+import * as i32 from "@progress/kendo-angular-utils";
+import * as i33 from "./column-resizing/table.directive";
+import * as i34 from "./layout/resizable.directive";
+import * as i35 from "@progress/kendo-angular-common";
+import * as i36 from "./selection/marquee.directive";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -125,7 +130,7 @@ const isInEditedCell = (element, treelistElement) => closest(element, matchesCla
  * {% endmeta %}
  */
 export 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;
@@ -150,6 +155,7 @@ export 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.
          *
@@ -385,6 +391,11 @@ export 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
          */
@@ -414,6 +425,11 @@ export 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 }) => {
@@ -476,6 +492,11 @@ export 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();
@@ -674,6 +695,26 @@ export 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
      */
@@ -935,6 +976,30 @@ export 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
      */
@@ -1626,6 +1691,7 @@ export class TreeListComponent {
             this.closeCell();
             this.cancelCell();
             this.dataStateChange.emit(x);
+            this.rowReorderable && this.notifyReorderContainers();
         }));
     }
     attachEditHandlers() {
@@ -1890,9 +1956,13 @@ export 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: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.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: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.ContextService }, { token: i21.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,
@@ -1933,8 +2003,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"
@@ -2095,6 +2166,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
@@ -2112,7 +2185,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"
@@ -2264,7 +2354,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: i21.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: i22.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i23.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i24.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: i25.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i26.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i27.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: i28.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i30.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i31.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i32.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i33.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: i22.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: i23.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i24.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i25.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: i26.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i27.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i28.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i29.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i30.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i31.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: i33.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i34.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i35.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i36.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: [{
@@ -2312,7 +2411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             provide: ExpandableTreeComponent,
                             useExisting: forwardRef(() => TreeListComponent)
                         },
-                        ContextService
+                        ContextService,
+                        RowReorderService
                     ],
                     selector: 'kendo-treelist',
                     template: `
@@ -2476,6 +2576,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
@@ -2493,7 +2595,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"
@@ -2645,9 +2764,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: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }]; }, propDecorators: { ariaLabel: [{
+        }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }, { type: i21.RowReorderService }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], data: [{
@@ -2700,6 +2828,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isSelected: [{
                 type: Input
+            }], rowReorderable: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], filterChange: [{
@@ -2748,6 +2878,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']
@@ -2799,6 +2931,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: [{

package/esm2020/treelist.module.mjs

@@ -28,72 +28,74 @@ import { ExpandableDirective } from './expand-state/expandable.directive';
 import { SelectableDirective } from './selection/selectable.directive';
 import { MarqueeDirective } from './selection/marquee.directive';
 import { TreeListSpacerComponent } from './rendering/common/spacer.component';
+import { DragAndDropModule } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./columns/column.component";
 import * as i2 from "./columns/span-column.component";
 import * as i3 from "./columns/checkbox-column.component";
-import * as i4 from "./columns/column-group.component";
-import * as i5 from "./navigation/focusable.directive";
-import * as i6 from "./columns/command-column.component";
-import * as i7 from "./rendering/cell-template.directive";
-import * as i8 from "./rendering/no-records-template.directive";
-import * as i9 from "./editing/edit-template.directive";
-import * as i10 from "./editing/edit-command.directive";
-import * as i11 from "./editing/cancel-command.directive";
-import * as i12 from "./editing/save-command.directive";
-import * as i13 from "./editing/remove-command.directive";
-import * as i14 from "./editing/add-command.directive";
-import * as i15 from "./rendering/footer-template.directive";
-import * as i16 from "./rendering/header/header-template.directive";
-import * as i17 from "./pager/pager.component";
-import * as i18 from "./pager/pager-prev-buttons.component";
-import * as i19 from "./pager/pager-next-buttons.component";
-import * as i20 from "./pager/pager-numeric-buttons.component";
-import * as i21 from "./pager/pager-input.component";
-import * as i22 from "./pager/pager-info.component";
-import * as i23 from "./pager/pager-page-sizes.component";
-import * as i24 from "./pager/pager-template.directive";
-import * as i25 from "./filtering/filter-row.component";
-import * as i26 from "./filtering/cell/filter-cell.component";
-import * as i27 from "./filtering/cell/filter-cell-template.directive";
-import * as i28 from "./filtering/cell/filter-cell-operators.component";
-import * as i29 from "./filtering/cell/string-filter-cell.component";
-import * as i30 from "./filtering/cell/numeric-filter-cell.component";
-import * as i31 from "./filtering/cell/autocomplete-filter-cell.component";
-import * as i32 from "./filtering/cell/boolean-filter-cell.component";
-import * as i33 from "./filtering/cell/date-filter-cell.component";
-import * as i34 from "./filtering/operators/contains-filter-operator.component";
-import * as i35 from "./filtering/operators/not-contains-filter-operator.component";
-import * as i36 from "./filtering/operators/ends-with-filter-operator.component";
-import * as i37 from "./filtering/operators/eq-filter-operator.component";
-import * as i38 from "./filtering/operators/is-empty-filter-operator.component";
-import * as i39 from "./filtering/operators/is-not-empty-filter-operator.component";
-import * as i40 from "./filtering/operators/is-not-null-filter-operator.component";
-import * as i41 from "./filtering/operators/isnull-filter-operator.component";
-import * as i42 from "./filtering/operators/neq-filter-operator.component";
-import * as i43 from "./filtering/operators/starts-with-filter-operator.component";
-import * as i44 from "./filtering/operators/gt-filter-operator.component";
-import * as i45 from "./filtering/operators/gte-filter-operator.component";
-import * as i46 from "./filtering/operators/lt-filter-operator.component";
-import * as i47 from "./filtering/operators/lte-filter-operator.component";
-import * as i48 from "./filtering/operators/after-filter-operator.component";
-import * as i49 from "./filtering/operators/after-eq-filter-operator.component";
-import * as i50 from "./filtering/operators/before-eq-filter-operator.component";
-import * as i51 from "./filtering/operators/before-filter-operator.component";
-import * as i52 from "./filtering/menu/string-filter-menu.component";
-import * as i53 from "./filtering/menu/filter-menu-template.directive";
-import * as i54 from "./filtering/menu/numeric-filter-menu.component";
-import * as i55 from "./filtering/menu/date-filter-menu.component";
-import * as i56 from "./filtering/menu/boolean-filter-menu.component";
-import * as i57 from "./column-menu/column-chooser.component";
-import * as i58 from "./column-menu/column-menu-filter.component";
-import * as i59 from "./column-menu/column-menu-item.component";
-import * as i60 from "./column-menu/column-menu-item-content-template.directive";
-import * as i61 from "./column-menu/column-menu-sort.component";
-import * as i62 from "./column-menu/column-menu-lock.component";
-import * as i63 from "./column-menu/column-menu-chooser.component";
-import * as i64 from "./column-menu/column-menu-template.directive";
-import * as i65 from "./column-menu/column-menu.component";
+import * as i4 from "./columns/rowreorder-column.component";
+import * as i5 from "./columns/column-group.component";
+import * as i6 from "./navigation/focusable.directive";
+import * as i7 from "./columns/command-column.component";
+import * as i8 from "./rendering/cell-template.directive";
+import * as i9 from "./rendering/no-records-template.directive";
+import * as i10 from "./editing/edit-template.directive";
+import * as i11 from "./editing/edit-command.directive";
+import * as i12 from "./editing/cancel-command.directive";
+import * as i13 from "./editing/save-command.directive";
+import * as i14 from "./editing/remove-command.directive";
+import * as i15 from "./editing/add-command.directive";
+import * as i16 from "./rendering/footer-template.directive";
+import * as i17 from "./rendering/header/header-template.directive";
+import * as i18 from "./pager/pager.component";
+import * as i19 from "./pager/pager-prev-buttons.component";
+import * as i20 from "./pager/pager-next-buttons.component";
+import * as i21 from "./pager/pager-numeric-buttons.component";
+import * as i22 from "./pager/pager-input.component";
+import * as i23 from "./pager/pager-info.component";
+import * as i24 from "./pager/pager-page-sizes.component";
+import * as i25 from "./pager/pager-template.directive";
+import * as i26 from "./filtering/filter-row.component";
+import * as i27 from "./filtering/cell/filter-cell.component";
+import * as i28 from "./filtering/cell/filter-cell-template.directive";
+import * as i29 from "./filtering/cell/filter-cell-operators.component";
+import * as i30 from "./filtering/cell/string-filter-cell.component";
+import * as i31 from "./filtering/cell/numeric-filter-cell.component";
+import * as i32 from "./filtering/cell/autocomplete-filter-cell.component";
+import * as i33 from "./filtering/cell/boolean-filter-cell.component";
+import * as i34 from "./filtering/cell/date-filter-cell.component";
+import * as i35 from "./filtering/operators/contains-filter-operator.component";
+import * as i36 from "./filtering/operators/not-contains-filter-operator.component";
+import * as i37 from "./filtering/operators/ends-with-filter-operator.component";
+import * as i38 from "./filtering/operators/eq-filter-operator.component";
+import * as i39 from "./filtering/operators/is-empty-filter-operator.component";
+import * as i40 from "./filtering/operators/is-not-empty-filter-operator.component";
+import * as i41 from "./filtering/operators/is-not-null-filter-operator.component";
+import * as i42 from "./filtering/operators/isnull-filter-operator.component";
+import * as i43 from "./filtering/operators/neq-filter-operator.component";
+import * as i44 from "./filtering/operators/starts-with-filter-operator.component";
+import * as i45 from "./filtering/operators/gt-filter-operator.component";
+import * as i46 from "./filtering/operators/gte-filter-operator.component";
+import * as i47 from "./filtering/operators/lt-filter-operator.component";
+import * as i48 from "./filtering/operators/lte-filter-operator.component";
+import * as i49 from "./filtering/operators/after-filter-operator.component";
+import * as i50 from "./filtering/operators/after-eq-filter-operator.component";
+import * as i51 from "./filtering/operators/before-eq-filter-operator.component";
+import * as i52 from "./filtering/operators/before-filter-operator.component";
+import * as i53 from "./filtering/menu/string-filter-menu.component";
+import * as i54 from "./filtering/menu/filter-menu-template.directive";
+import * as i55 from "./filtering/menu/numeric-filter-menu.component";
+import * as i56 from "./filtering/menu/date-filter-menu.component";
+import * as i57 from "./filtering/menu/boolean-filter-menu.component";
+import * as i58 from "./column-menu/column-chooser.component";
+import * as i59 from "./column-menu/column-menu-filter.component";
+import * as i60 from "./column-menu/column-menu-item.component";
+import * as i61 from "./column-menu/column-menu-item-content-template.directive";
+import * as i62 from "./column-menu/column-menu-sort.component";
+import * as i63 from "./column-menu/column-menu-lock.component";
+import * as i64 from "./column-menu/column-menu-chooser.component";
+import * as i65 from "./column-menu/column-menu-template.directive";
+import * as i66 from "./column-menu/column-menu.component";
 const exportedModules = [
     TreeListComponent,
     ToolbarTemplateDirective,
@@ -181,7 +183,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RowFilterModule,
         FilterMenuModule,
         ResizeSensorModule,
-        ColumnMenuModule], exports: [TreeListComponent,
+        ColumnMenuModule,
+        DragAndDropModule], exports: [TreeListComponent,
         ToolbarTemplateDirective,
         ToolbarComponent,
         TreeListSpacerComponent,
@@ -193,7 +196,7 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FlatBindingDirective,
         ExpandableDirective,
         SelectableDirective,
-        TreeListToolbarFocusableDirective, i1.ColumnComponent, i2.SpanColumnComponent, i3.CheckboxColumnComponent, i4.ColumnGroupComponent, i5.FocusableDirective, i6.CommandColumnComponent, i7.CellTemplateDirective, i8.NoRecordsTemplateDirective, i9.EditTemplateDirective, i10.EditCommandDirective, i11.CancelCommandDirective, i12.SaveCommandDirective, i13.RemoveCommandDirective, i14.AddCommandDirective, i15.FooterTemplateDirective, i16.HeaderTemplateDirective, i17.PagerComponent, i18.PagerPrevButtonsComponent, i19.PagerNextButtonsComponent, i20.PagerNumericButtonsComponent, i21.PagerInputComponent, i22.PagerInfoComponent, i23.PagerPageSizesComponent, i24.PagerTemplateDirective, i25.FilterRowComponent, i26.FilterCellComponent, i27.FilterCellTemplateDirective, i28.FilterCellOperatorsComponent, i29.StringFilterCellComponent, i30.NumericFilterCellComponent, i31.AutoCompleteFilterCellComponent, i32.BooleanFilterCellComponent, i33.DateFilterCellComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i52.StringFilterMenuComponent, i53.FilterMenuTemplateDirective, i54.NumericFilterMenuComponent, i55.DateFilterMenuComponent, i56.BooleanFilterMenuComponent, i28.FilterCellOperatorsComponent, i34.ContainsFilterOperatorComponent, i35.DoesNotContainFilterOperatorComponent, i36.EndsWithFilterOperatorComponent, i37.EqualFilterOperatorComponent, i38.IsEmptyFilterOperatorComponent, i39.IsNotEmptyFilterOperatorComponent, i40.IsNotNullFilterOperatorComponent, i41.IsNullFilterOperatorComponent, i42.NotEqualFilterOperatorComponent, i43.StartsWithFilterOperatorComponent, i44.GreaterFilterOperatorComponent, i45.GreaterOrEqualToFilterOperatorComponent, i46.LessFilterOperatorComponent, i47.LessOrEqualToFilterOperatorComponent, i48.AfterFilterOperatorComponent, i49.AfterEqFilterOperatorComponent, i50.BeforeEqFilterOperatorComponent, i51.BeforeFilterOperatorComponent, i57.ColumnChooserComponent, i58.ColumnMenuFilterComponent, i59.ColumnMenuItemComponent, i60.ColumnMenuItemContentTemplateDirective, i61.ColumnMenuSortComponent, i62.ColumnMenuLockComponent, i63.ColumnMenuChooserComponent, i64.ColumnMenuTemplateDirective, i65.ColumnMenuComponent] });
+        TreeListToolbarFocusableDirective, i1.ColumnComponent, i2.SpanColumnComponent, i3.CheckboxColumnComponent, i4.RowReorderColumnComponent, i5.ColumnGroupComponent, i6.FocusableDirective, i7.CommandColumnComponent, i8.CellTemplateDirective, i9.NoRecordsTemplateDirective, i10.EditTemplateDirective, i11.EditCommandDirective, i12.CancelCommandDirective, i13.SaveCommandDirective, i14.RemoveCommandDirective, i15.AddCommandDirective, i16.FooterTemplateDirective, i17.HeaderTemplateDirective, i18.PagerComponent, i19.PagerPrevButtonsComponent, i20.PagerNextButtonsComponent, i21.PagerNumericButtonsComponent, i22.PagerInputComponent, i23.PagerInfoComponent, i24.PagerPageSizesComponent, i25.PagerTemplateDirective, i26.FilterRowComponent, i27.FilterCellComponent, i28.FilterCellTemplateDirective, i29.FilterCellOperatorsComponent, i30.StringFilterCellComponent, i31.NumericFilterCellComponent, i32.AutoCompleteFilterCellComponent, i33.BooleanFilterCellComponent, i34.DateFilterCellComponent, i29.FilterCellOperatorsComponent, i35.ContainsFilterOperatorComponent, i36.DoesNotContainFilterOperatorComponent, i37.EndsWithFilterOperatorComponent, i38.EqualFilterOperatorComponent, i39.IsEmptyFilterOperatorComponent, i40.IsNotEmptyFilterOperatorComponent, i41.IsNotNullFilterOperatorComponent, i42.IsNullFilterOperatorComponent, i43.NotEqualFilterOperatorComponent, i44.StartsWithFilterOperatorComponent, i45.GreaterFilterOperatorComponent, i46.GreaterOrEqualToFilterOperatorComponent, i47.LessFilterOperatorComponent, i48.LessOrEqualToFilterOperatorComponent, i49.AfterFilterOperatorComponent, i50.AfterEqFilterOperatorComponent, i51.BeforeEqFilterOperatorComponent, i52.BeforeFilterOperatorComponent, i53.StringFilterMenuComponent, i54.FilterMenuTemplateDirective, i55.NumericFilterMenuComponent, i56.DateFilterMenuComponent, i57.BooleanFilterMenuComponent, i29.FilterCellOperatorsComponent, i35.ContainsFilterOperatorComponent, i36.DoesNotContainFilterOperatorComponent, i37.EndsWithFilterOperatorComponent, i38.EqualFilterOperatorComponent, i39.IsEmptyFilterOperatorComponent, i40.IsNotEmptyFilterOperatorComponent, i41.IsNotNullFilterOperatorComponent, i42.IsNullFilterOperatorComponent, i43.NotEqualFilterOperatorComponent, i44.StartsWithFilterOperatorComponent, i45.GreaterFilterOperatorComponent, i46.GreaterOrEqualToFilterOperatorComponent, i47.LessFilterOperatorComponent, i48.LessOrEqualToFilterOperatorComponent, i49.AfterFilterOperatorComponent, i50.AfterEqFilterOperatorComponent, i51.BeforeEqFilterOperatorComponent, i52.BeforeFilterOperatorComponent, i58.ColumnChooserComponent, i59.ColumnMenuFilterComponent, i60.ColumnMenuItemComponent, i61.ColumnMenuItemContentTemplateDirective, i62.ColumnMenuSortComponent, i63.ColumnMenuLockComponent, i64.ColumnMenuChooserComponent, i65.ColumnMenuTemplateDirective, i66.ColumnMenuComponent] });
 TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, imports: [[
             CommonModule,
             SharedModule,
@@ -203,7 +206,8 @@ TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RowFilterModule,
             FilterMenuModule,
             ResizeSensorModule,
-            ColumnMenuModule
+            ColumnMenuModule,
+            DragAndDropModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, decorators: [{
             type: NgModule,
@@ -219,7 +223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         RowFilterModule,
                         FilterMenuModule,
                         ResizeSensorModule,
-                        ColumnMenuModule
+                        ColumnMenuModule,
+                        DragAndDropModule
                     ]
                 }]
         }] });