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

package/esm2022/rendering/header/header.component.mjs

@@ -111,9 +111,6 @@ export class HeaderComponent {
     tabIndex;
     size = 'medium';
     sortedFields = {};
-    get headerClass() {
-        return !this.scrollable;
-    }
     hostClass = true;
     get sortableLabel() {
         return this.contextService.localization.get('sortable');
@@ -493,7 +490,7 @@ export class HeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.NavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
@@ -637,6 +634,7 @@ export class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -691,6 +689,7 @@ export class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -712,7 +711,7 @@ export class HeaderComponent {
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -862,6 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -916,6 +916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -983,9 +984,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], headerClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-header']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-thead']

package/esm2022/rendering/list.component.mjs

@@ -708,7 +708,7 @@ export class ListComponent {
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -762,7 +762,7 @@ export class ListComponent {
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -831,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -885,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">

package/esm2022/rendering/table-body.component.mjs

@@ -526,7 +526,7 @@ export class TableBodyComponent {
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
@@ -755,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"

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