@progress/kendo-angular-grid 18.0.0-develop.2 → 18.0.0-develop.4

package/esm2022/rendering/cell.component.mjs

@@ -83,6 +83,12 @@ export class CellComponent {
         this._editTemplateContext.rowIndex = this.rowIndex;
         return this._editTemplateContext;
     }
+    get rowReorderTemplateContext() {
+        this._rowReorderTemplateContext.$implicit = this.dataItem;
+        this._rowReorderTemplateContext.columnIndex = this.columnIndex;
+        this._rowReorderTemplateContext.rowIndex = this.rowIndex;
+        return this._rowReorderTemplateContext;
+    }
     get format() {
         if (isColumnComponent(this.column) && !isNullOrEmptyString(this.column.format)) {
             return extractFormat(this.column.format);
@@ -122,6 +128,7 @@ export class CellComponent {
     }
     _templateContext = {};
     _editTemplateContext = {};
+    _rowReorderTemplateContext = {};
     constructor(editService, idService, ctx, cellContext) {
         this.editService = editService;
         this.idService = idService;
@@ -199,10 +206,14 @@ export class CellComponent {
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper
+                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
                             name="reorder"
                             [svgIcon]="reorderIcon">
                         </kendo-icon-wrapper>
+                        <ng-template *ngIf="column.dragHandleTemplate?.first"
+                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                        </ng-template>
                     </ng-container>
                 </ng-container>
                 <ng-template #loading>
@@ -287,10 +298,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper
+                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
                             name="reorder"
                             [svgIcon]="reorderIcon">
                         </kendo-icon-wrapper>
+                        <ng-template *ngIf="column.dragHandleTemplate?.first"
+                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                        </ng-template>
                     </ng-container>
                 </ng-container>
                 <ng-template #loading>

package/esm2022/row-reordering/drag-handle-template.directive.mjs

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the column row reorder cell template of the Grid.
+ * Helps to customize the content of the drag handle cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoGridRowDragHandleTemplate` directive inside the `<kendo-grid-rowreorder-column>` tag.
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The provided data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="data" [rowReorderable]="true">
+ *    <kendo-grid-rowreorder-column>
+ *      <ng-template kendoGridRowDragHandleTemplate>
+ *        <span>Drag here</span>
+ *      </ng-template>
+ *    </kendo-grid-rowreorder-column>
+ *   <kendo-grid-column field="Field1"></kendo-grid-column>
+ *   <kendo-grid-column field="Field2"></kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+export class RowDragHandleTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowDragHandleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RowDragHandleTemplateDirective, isStandalone: true, selector: "[kendoGridRowDragHandleTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowDragHandleTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridRowDragHandleTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2022/row-reordering/drag-hint-template.directive.mjs

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the drag hint template of the Grid.
+ * Helps to customize the content of the hint during row reordering. To define the hint template, nest an `<ng-template>`
+ * tag with the `kendoGridRowDragHintTemplate` directive inside the `<kendo-grid-rowreorder-column>` tag.
+ *
+ * The template context is set to the current data item.
+ * The provided data row index is passed as an additional field. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="data" [rowReorderable]="true">
+ *    <kendo-grid-rowreorder-column>
+ *      <ng-template kendoGridRowDragHintTemplate>
+ *        <span>Custom hint</span>
+ *      </ng-template>
+ *    </kendo-grid-rowreorder-column>
+ *   <kendo-grid-column field="Field1"></kendo-grid-column>
+ *   <kendo-grid-column field="Field2"></kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+export class RowDragHintTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowDragHintTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RowDragHintTemplateDirective, isStandalone: true, selector: "[kendoGridRowDragHintTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowDragHintTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridRowDragHintTemplate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2022/row-reordering/row-reorder.service.mjs

@@ -97,6 +97,9 @@ export class RowReorderService {
         });
         return hintText.trim();
     }
+    getDraggedRow(data) {
+        return this.getDragRowPerElement(this.dragTarget, data);
+    }
     rowReorderArgs(dragRow, dropRow, data) {
         const dragRowData = this.getDragRowPerElement(dragRow, data);
         const dropRowData = this.getDragRowPerElement(dropRow, data);