@progress/kendo-angular-grid 18.5.0-develop.1 → 18.5.0-develop.10

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -3,44 +3,49 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, inject, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, columnsIcon, chevronUpIcon, chevronDownIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, filePdfIcon, fileExcelIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterClearIcon, filterIcon, columnsIcon, chevronUpIcon, chevronDownIcon, displayInlineFlexIcon, maxWidthIcon, stickIcon, unstickIcon, setColumnPositionIcon, slidersIcon, moreVerticalIcon, reorderIcon, minusIcon, insertMiddleIcon, checkIcon, xIcon, saveIcon, filePdfIcon, fileExcelIcon } from '@progress/kendo-svg-icons';
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, tap, throttleTime, debounceTime, distinctUntilChanged, skip, auditTime, bufferCount } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i44 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { orderBy, isCompositeFilterDescriptor, groupBy, process, filterBy } from '@progress/kendo-data-query';
-import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault } from '@angular/common';
+import { NgFor, NgIf, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgClass, NgStyle, NgSwitchDefault, KeyValuePipe } from '@angular/common';
 import { getter } from '@progress/kendo-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
 import * as i5 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { ChipListComponent, ChipComponent, ButtonComponent, Button } from '@progress/kendo-angular-buttons';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ChipListComponent, ChipComponent, ButtonComponent, Button, KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import * as i1$5 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
-import * as i3 from '@progress/kendo-angular-inputs';
-import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent } from '@progress/kendo-angular-inputs';
-import { DatePickerComponent, DatePickerCustomMessagesComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
+import * as i4$1 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
+import * as i5$1 from '@progress/kendo-angular-dateinputs';
+import { DatePickerComponent, DatePickerCustomMessagesComponent, KENDO_DATEPICKER, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TabStripComponent, TabStripTabComponent, TabTitleDirective, TabContentDirective } from '@progress/kendo-angular-layout';
 import { saveAs } from '@progress/kendo-file-saver';
-import * as i5$1 from '@progress/kendo-angular-excel-export';
+import * as i5$2 from '@progress/kendo-angular-excel-export';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ColumnComponent as ColumnComponent$1, ColumnGroupComponent as ColumnGroupComponent$1, FooterTemplateDirective as FooterTemplateDirective$1, GroupFooterTemplateDirective as GroupFooterTemplateDirective$1, GroupHeaderColumnTemplateDirective as GroupHeaderColumnTemplateDirective$1, GroupHeaderTemplateDirective as GroupHeaderTemplateDirective$1 } from '@progress/kendo-angular-excel-export';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { validatePackage } from '@progress/kendo-licensing';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
+import * as i1$6 from '@progress/kendo-angular-dialog';
+import { DialogContainerDirective, DialogService, DialogContentBase, DialogActionsComponent, DialogContainerService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import * as i3 from '@progress/kendo-angular-label';
+import { KENDO_LABELS } from '@progress/kendo-angular-label';
 import * as i45 from '@progress/kendo-angular-toolbar';
 import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
-import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 
 /* eslint-disable  no-bitwise */
 /**
@@ -444,7 +449,7 @@ const nodesToArray = (nodes) => [].slice.call(nodes);
 /**
  * @hidden
  */
-const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+const replaceMessagePlaceholder = (message, name, value) => (message ?? '').replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
 /**
  * @hidden
  */
@@ -1639,7 +1644,7 @@ class EditService {
         this.changes.emit({ action: 'edit', rowIndex });
     }
     beginAdd() {
-        this.changes.emit({ action: 'add' });
+        this.changes.emit({ action: 'add', isNew: true });
     }
     endEdit(rowIndex) {
         const { group: formGroup } = this.context(rowIndex);
@@ -2477,6 +2482,10 @@ class ColumnBase {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
+    ngAfterViewInit() {
+        this.initialMaxResizableWidth = this.maxResizableWidth;
+        this.initialMinResizableWidth = this.minResizableWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 }
@@ -2850,10 +2859,6 @@ class ColumnComponent extends ColumnBase {
     get displayTitle() {
         return this.title === undefined ? this.field : this.title;
     }
-    ngAfterViewInit() {
-        this.initialMaxResizableWidth = this.maxResizableWidth;
-        this.initialMinResizableWidth = this.minResizableWidth;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
             {
@@ -7643,16 +7648,14 @@ const diffFilters = (a, b) => {
  */
 class FilterHostDirective {
     host;
-    resolver;
     column;
     filter;
     component;
-    constructor(host, resolver) {
+    constructor(host) {
         this.host = host;
-        this.resolver = resolver;
     }
     ngOnInit() {
-        this.component = this.host.createComponent(this.resolver.resolveComponentFactory(this.componentType()));
+        this.component = this.host.createComponent(this.componentType());
         this.initComponent({
             column: this.column,
             filter: this.filter
@@ -7677,7 +7680,7 @@ class FilterHostDirective {
         instance.column = column;
         instance.filter = filter;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterHostDirective, selector: "[kendoGridFilterHostBase]", inputs: { column: "column", filter: "filter" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterHostDirective, decorators: [{
@@ -7685,7 +7688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     selector: '[kendoGridFilterHostBase]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -9560,8 +9563,8 @@ const filterMenuComponentFactory = (type) => ({
 class FilterMenuHostDirective extends FilterHostDirective {
     filterService;
     menuTabbingService;
-    constructor(host, resolver) {
-        super(host, resolver);
+    constructor(host) {
+        super(host);
     }
     componentType() {
         if (isPresent(this.column) && !isNullOrEmptyString(this.column.filter)) {
@@ -9574,7 +9577,7 @@ class FilterMenuHostDirective extends FilterHostDirective {
         this.component.instance.filterService = this.filterService;
         this.component.instance.menuTabbingService = this.menuTabbingService;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuHostDirective, isStandalone: true, selector: "[kendoFilterMenuHost]", inputs: { filterService: "filterService", menuTabbingService: "menuTabbingService" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuHostDirective, decorators: [{
@@ -9583,7 +9586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoFilterMenuHost]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { filterService: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { filterService: [{
                 type: Input
             }], menuTabbingService: [{
                 type: Input
@@ -10681,8 +10684,8 @@ const filterComponentFactory = (type) => ({
  * @hidden
  */
 class FilterCellHostDirective extends FilterHostDirective {
-    constructor(host, resolver) {
-        super(host, resolver);
+    constructor(host) {
+        super(host);
     }
     componentType() {
         if (!isNullOrEmptyString(this.column.filter)) {
@@ -10690,7 +10693,7 @@ class FilterCellHostDirective extends FilterHostDirective {
         }
         return StringFilterCellComponent;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCellHostDirective, isStandalone: true, selector: "[kendoFilterCellHost]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellHostDirective, decorators: [{
@@ -10699,7 +10702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoFilterCellHost]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 /**
  * @hidden
@@ -11142,6 +11145,17 @@ class ColumnListComponent {
         if (e.keyCode !== Keys.Tab) {
             e.preventDefault();
         }
+        if (e.key === 'Tab' && !e.shiftKey && this.autoSync) {
+            e.preventDefault();
+        }
+        if (e.key === 'Tab' && e.shiftKey) {
+            this.ngZone.run(() => {
+                if (e.target.matches('.k-column-list-item')) {
+                    e.preventDefault();
+                    this.resetButton?.nativeElement.focus();
+                }
+            });
+        }
         if (e.keyCode === Keys.ArrowDown) {
             this.listNavigationService.next();
         }
@@ -11156,19 +11170,23 @@ class ColumnListComponent {
         if (this.allowHideAll && !this.hasLocked) {
             return;
         }
-        const checkedItems = [];
+        // Cache visible columns to avoid repeated checks
+        const visibleColumns = [];
+        const columnMap = new Map();
         this.checkboxes.forEach((checkbox, index) => {
+            // Reset all disabled states first
+            this.setDisabledState(checkbox, false);
             if (checkbox.checkedState) {
-                checkedItems.push({ checkbox, index });
+                visibleColumns.push({ checkbox, index });
+                columnMap.set(index, this.columns[index]);
             }
-            this.setDisabledState(checkbox, false);
         });
-        if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
-            this.setDisabledState(checkedItems[0].checkbox, true);
+        // Only apply disabled states where needed
+        if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
+            this.setDisabledState(visibleColumns[0].checkbox, true);
         }
         else if (this.hasLocked && !this.hasUnlockedFiltered) {
-            const columns = this.columns;
-            const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
+            const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
             if (checkedUnlocked.length === 1) {
                 this.setDisabledState(checkedUnlocked[0].checkbox, true);
             }
@@ -11189,34 +11207,32 @@ class ColumnListComponent {
         }
     }
     setDisabledState(checkbox, disabled) {
-        this.ngZone.run(() => checkbox.disabled = disabled);
-        const checkboxElement = checkbox.hostElement.nativeElement;
-        const parentElement = checkboxElement.parentElement;
-        const classCommand = disabled ? 'addClass' : 'removeClass';
-        const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
-        this.renderer[classCommand](parentElement, 'k-disabled');
-        this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
+        if (checkbox.disabled !== disabled) {
+            this.ngZone.runOutsideAngular(() => {
+                checkbox.disabled = disabled;
+                const checkboxElement = checkbox.hostElement.nativeElement;
+                const parentElement = checkboxElement.parentElement;
+                if (disabled) {
+                    this.renderer.addClass(parentElement, 'k-disabled');
+                    this.renderer.setAttribute(parentElement, 'aria-disabled', 'true');
+                }
+                else {
+                    this.renderer.removeClass(parentElement, 'k-disabled');
+                    this.renderer.removeAttribute(parentElement, 'aria-disabled');
+                }
+            });
+        }
     }
     handleCheckBoxClick = (e) => {
         const closestItem = e.target.closest('.k-column-list-item');
         if (closestItem) {
             const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
             const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-            if (index !== this.listNavigationService.activeIndex) {
-                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                this.listNavigationService.activeIndex = index;
-                this.listNavigationService.toggle(index, true);
-            }
-            if (checkboxElement.contains(e.target)) {
-                const checkboxInputElement = checkboxElement.firstElementChild;
-                checkboxInputElement.blur();
-                checkboxInputElement.classList.remove('k-focus');
-            }
-            else {
-                this.listNavigationService.toggleCheckedState();
+            const checkbox = this.checkboxes.toArray()[index];
+            if (e.target === checkbox.input.nativeElement) {
+                closestItem.focus();
+                e.target.classList.remove('k-focus');
             }
-            closestItem.focus();
             if (this.autoSync) {
                 if (!this.columns[index]) {
                     return;
@@ -11224,14 +11240,21 @@ class ColumnListComponent {
                 const column = this.columns[index];
                 const hidden = !checkbox.checkedState;
                 if (Boolean(column.hidden) !== hidden) {
-                    this.ngZone.run(() => {
+                    this.ngZone.runOutsideAngular(() => {
                         column.hidden = hidden;
-                        this.columnChange.emit([column]);
+                        this.ngZone.run(() => {
+                            this.columnChange.emit([column]);
+                        });
                     });
                 }
             }
             else {
-                this.updateDisabled();
+                this.ngZone.run(() => this.updateDisabled());
+            }
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
             }
         }
     };
@@ -11249,9 +11272,9 @@ class ColumnListComponent {
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
@@ -11293,9 +11316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 role="option">
                 <kendo-checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
+                    [tabindex]="-1"
                     [checkedState]="!column.hidden"
                     [disabled]="isDisabled(column)"
-                    [tabindex]="-1"
                 ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
@@ -11480,15 +11503,6 @@ class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
-    /**
-     * @hidden
-     */
-    onShiftTab(e) {
-        if (e.target.matches('.k-column-list-item')) {
-            e.preventDefault();
-            this.columnList.resetButton.nativeElement.focus();
-        }
-    }
     close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
@@ -11530,8 +11544,7 @@ class ColumnChooserComponent {
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)"
-                (keydown.shift.tab)="onShiftTab($event)">
+                (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
@@ -11564,8 +11577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)"
-                (keydown.shift.tab)="onShiftTab($event)">
+                (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `,
@@ -11737,13 +11749,12 @@ class ColumnMenuItemComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Specifies the name of the [font icon](slug:icons#icons-list)
-     * that will be rendered for the item.
+     * Specifies the name of the [font icon](slug:icon_list)
+     * that will be rendered within the item.
      */
     icon;
     /**
-     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
-     * that will be rendered for the item.
+     * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
     /**
@@ -16255,7 +16266,7 @@ class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
@@ -16264,7 +16275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i4$1.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -17223,6 +17234,7 @@ class FooterComponent {
     lockedColumnsCount = 0;
     logicalRowIndex = 0;
     totalColumns;
+    totalColumnsCount = 0;
     get footerClass() {
         return !this.scrollable;
     }
@@ -17234,6 +17246,10 @@ class FooterComponent {
     get columnsToRender() {
         return columnsToRender(this.columns || []);
     }
+    // Number of unlocked columns in the next table, if any
+    get unlockedColumnsCount() {
+        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
+    }
     trackByIndex(index) {
         return index;
     }
@@ -17252,15 +17268,15 @@ class FooterComponent {
         return isColumnGroupComponent(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
-            [class.k-footer-template]="true"
+            class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
             <td
@@ -17305,12 +17321,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container>
         <tr
-            [class.k-footer-template]="true"
+            class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
             <td
@@ -17364,6 +17380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], totalColumns: [{
                 type: Input
+            }], totalColumnsCount: [{
+                type: Input
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']
@@ -17635,7 +17653,7 @@ class SelectionCheckboxDirective {
             this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i4$1.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
@@ -17644,7 +17662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i4$1.CheckBoxComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
@@ -18229,7 +18247,7 @@ class TableBodyComponent {
             }
         });
         const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
-        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumns.length;
         return item && this.isDataItem(item) ? contentColumnsCount : headerFooterColumnsCount;
     }
     shouldSkipCell(rowIndex, colIndex) {
@@ -19813,8 +19831,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1743748634,
-    version: '18.5.0-develop.1',
+    publishDate: 1744092477,
+    version: '18.5.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -23308,8 +23326,53 @@ class GridMessages extends ComponentMessages {
      * The text for the Group pane Chip Menu Move as next item.
      */
     groupChipMenuNext;
+    /**
+     * The default text of a form validation error when using the built-in external editing.
+     * <br/><br/>
+     * The text consists of a three-part message&mdash;the name of the data item property the respective Grid column is bound to,
+     * the name of the error, coming from the respective `FormControl` object, and a localizable string.
+     * <br/><br/>
+     * For a field named `ProductName`, and an error named `required`, the default error text will be `ProductName has required validation error`.
+     * <br/><br/>
+     * To customize the default text of the form validation error, use the `{errorName}` and `{fieldName}` placeholders and a custom localizable string.
+     * For example, `{errorName} detected for {fieldName} field`.
+     * <br/><br/>
+     * The `{errorName}` and `{fieldName}` placeholders will be replaced internally with the field and error names for the respective invalid form control,
+     * and the resulting error message will be rendered as `required error detected for ProductName field`.
+     * [See example](slug:globalization_grid#toc-custom-messages).
+     *
+     */
+    formValidationErrorText;
+    /**
+     * The title of the remove item confirmation Dialog.
+     */
+    removeConfirmationDialogTitle;
+    /**
+     * The content of the remove item confirmation Dialog.
+     */
+    removeConfirmationDialogContent;
+    /**
+     * The text of the confirm action button in the remove confirmation Dialog.
+     */
+    removeConfirmationDialogConfirmText;
+    /**
+     * The text of the reject action button in the remove confirmation Dialog.
+     */
+    removeConfirmationDialogRejectText;
+    /**
+     * The title of the external editing Dialog.
+     */
+    externalEditingTitle;
+    /**
+     * The text of the external editing Dialog <b>Save</b> button.
+     */
+    externalEditingSaveText;
+    /**
+     * The text of the external editing Dialog <b>Cancel</b> button.
+     */
+    externalEditingCancelText;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", 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", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", 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", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -23485,6 +23548,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], groupChipMenuNext: [{
                 type: Input
+            }], formValidationErrorText: [{
+                type: Input
+            }], removeConfirmationDialogTitle: [{
+                type: Input
+            }], removeConfirmationDialogContent: [{
+                type: Input
+            }], removeConfirmationDialogConfirmText: [{
+                type: Input
+            }], removeConfirmationDialogRejectText: [{
+                type: Input
+            }], externalEditingTitle: [{
+                type: Input
+            }], externalEditingSaveText: [{
+                type: Input
+            }], externalEditingCancelText: [{
+                type: Input
             }] } });
 
 /**
@@ -24257,9 +24336,6 @@ class GridComponent {
     columnList;
     selectionDirective = false;
     ariaRootId = `k-${guid()}`;
-    /**
-     * @hidden
-     */
     showLicenseWatermark = false;
     columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
         if (!isUniversal()) {
@@ -25058,9 +25134,6 @@ class GridComponent {
     updateNavigationMetadata() {
         this.navigationService.metadata = this.navigationMetadata();
     }
-    /**
-     * @hidden
-     */
     reorder({ target, source, before, changeContainer }) {
         this.ngZone.run(() => {
             const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
@@ -25899,6 +25972,30 @@ class GridComponent {
 
             i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
             groupChipMenuNext="Move as next"
+
+            i18n-formValidationErrorText="kendo.grid.formValidationErrorText|The default text of a form validation error when using external editing."
+            formValidationErrorText="{{ 'The {fieldName} field has {errorName} validation error' }}"
+
+            i18n-removeConfirmationDialogTitle="kendo.grid.removeConfirmationDialogTitle|The title of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogTitle="Please confirm"
+
+            i18n-removeConfirmationDialogContent="kendo.grid.removeConfirmationDialogContent|The content of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogContent="Are you sure you want to delete this item?"
+
+            i18n-removeConfirmationDialogConfirmText="kendo.grid.removeConfirmationDialogConfirmText|The text of the built-in remove item confirmation Dialog confirm action button"
+            removeConfirmationDialogConfirmText="Yes"
+
+            i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
+            removeConfirmationDialogRejectText="No"
+
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            externalEditingTitle="Edit"
+
+            i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
+            externalEditingSaveText="Save"
+
+            i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
+            externalEditingCancelText="Cancel"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -26127,7 +26224,8 @@ class GridComponent {
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
                                 [logicalRowIndex]="ariaRowCount"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26154,7 +26252,8 @@ class GridComponent {
                                 [columns]="$any(headerColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26175,6 +26274,8 @@ class GridComponent {
                     </colgroup>
                     <thead kendoGridHeader
                         *ngIf="!hideHeader"
+                        class="k-grid-header"
+                        [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
                         [resizable]="resizable"
                         [scrollable]="false"
@@ -26217,7 +26318,8 @@ class GridComponent {
                         [groups]="group"
                         [columns]="$any(leafColumns)"
                         [detailTemplate]="detailTemplate"
-                        [totalColumns]="columnsContainer">
+                        [totalColumns]="columnsContainer"
+                        [totalColumnsCount]="leafColumns.length">
                     </tfoot>
                 </table>
             </ng-container>
@@ -26300,8 +26402,10 @@ class GridComponent {
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
+        <div kendoDialogContainer></div>
+        
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i44.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i44.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i44.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i44.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i44.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i44.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i44.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i44.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i44.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i44.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i44.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i44.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i44.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i44.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i44.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i44.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i44.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i44.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DialogContainerDirective, selector: "[kendoDialogContainer]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -26610,6 +26714,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
             groupChipMenuNext="Move as next"
+
+            i18n-formValidationErrorText="kendo.grid.formValidationErrorText|The default text of a form validation error when using external editing."
+            formValidationErrorText="{{ 'The {fieldName} field has {errorName} validation error' }}"
+
+            i18n-removeConfirmationDialogTitle="kendo.grid.removeConfirmationDialogTitle|The title of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogTitle="Please confirm"
+
+            i18n-removeConfirmationDialogContent="kendo.grid.removeConfirmationDialogContent|The content of the built-in remove item confirmation Dialog"
+            removeConfirmationDialogContent="Are you sure you want to delete this item?"
+
+            i18n-removeConfirmationDialogConfirmText="kendo.grid.removeConfirmationDialogConfirmText|The text of the built-in remove item confirmation Dialog confirm action button"
+            removeConfirmationDialogConfirmText="Yes"
+
+            i18n-removeConfirmationDialogRejectText="kendo.grid.removeConfirmationDialogRejectText|The text of the built-in remove item confirmation Dialog reject action button"
+            removeConfirmationDialogRejectText="No"
+
+            i18n-externalEditingTitle="kendo.grid.externalEditingTitle|The title of the built-in external editing form container"
+            externalEditingTitle="Edit"
+
+            i18n-externalEditingSaveText="kendo.grid.externalEditingSaveText|The text of the external editing form Save button"
+            externalEditingSaveText="Save"
+
+            i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
+            externalEditingCancelText="Cancel"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -26838,7 +26966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
                                 [logicalRowIndex]="ariaRowCount"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26865,7 +26994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [columns]="$any(headerColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
-                                [totalColumns]="columnsContainer">
+                                [totalColumns]="columnsContainer"
+                                [totalColumnsCount]="leafColumns.length">
                             </tfoot>
                         </table>
                     </div>
@@ -26886,6 +27016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </colgroup>
                     <thead kendoGridHeader
                         *ngIf="!hideHeader"
+                        class="k-grid-header"
+                        [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
                         [resizable]="resizable"
                         [scrollable]="false"
@@ -26928,7 +27060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [groups]="group"
                         [columns]="$any(leafColumns)"
                         [detailTemplate]="detailTemplate"
-                        [totalColumns]="columnsContainer">
+                        [totalColumns]="columnsContainer"
+                        [totalColumnsCount]="leafColumns.length">
                     </tfoot>
                 </table>
             </ng-container>
@@ -27011,6 +27144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
+        <div kendoDialogContainer></div>
+        
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
@@ -27019,7 +27154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, DialogContainerDirective
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { 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: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: RowReorderService }]; }, propDecorators: { data: [{
@@ -27568,10 +27703,32 @@ class EditingDirectiveBase {
     get editService() {
         return this.userEditService || this.defaultEditService;
     }
+    removeConfirmationSubject = new Subject();
+    dialogService;
+    localization;
+    defaultRemoveConfirmation = (_item) => {
+        const dialog = this.dialogService.open({
+            title: this.localization.get('removeConfirmationDialogTitle'),
+            content: this.localization.get('removeConfirmationDialogContent'),
+            actions: [{
+                    text: this.localization.get('removeConfirmationDialogConfirmText'),
+                    themeColor: 'primary',
+                    svgIcon: checkIcon,
+                    icon: 'check'
+                }, {
+                    text: this.localization.get('removeConfirmationDialogRejectText'),
+                    svgIcon: xIcon,
+                    icon: 'x'
+                }],
+        });
+        dialog.result.pipe(take(1)).subscribe((e) => this.removeConfirmationSubject.next(e.text === this.localization.get('removeConfirmationDialogConfirmText')));
+        return this.removeConfirmationSubject;
+    };
     /**
      * A function that is called to confirm if the `dataItem` will be removed.
+     * Setting to `true` will result in displaying a default confirmation dialog.
      */
-    removeConfirmation;
+    removeConfirmation = false;
     subscriptions = new Subscription();
     defaultEditService;
     userEditService;
@@ -27579,6 +27736,8 @@ class EditingDirectiveBase {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
         this.defaultEditService = this.createDefaultService();
+        this.dialogService = inject(DialogService);
+        this.localization = inject(LocalizationService);
     }
     /**
      * @hidden
@@ -27599,7 +27758,7 @@ class EditingDirectiveBase {
     createDefaultService() {
         return new LocalEditService(this.grid, this.localDataChangesService);
     }
-    addHandler() {
+    addHandler(_args) {
         this.grid.addRow(this.createModel({ isNew: true }));
     }
     saveHandler(args) {
@@ -27624,7 +27783,8 @@ class EditingDirectiveBase {
             }
         };
         if (this.removeConfirmation) {
-            const result = this.removeConfirmation(dataItem);
+            const confirmationCallback = typeof this.removeConfirmation === 'boolean' ? this.defaultRemoveConfirmation : this.removeConfirmation;
+            const result = confirmationCallback(dataItem);
             if (result instanceof Promise) {
                 result.then(removeItem);
             }
@@ -27905,6 +28065,495 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['kendoGridInCellEditing']
             }] } });
 
+/**
+ * @hidden
+ */
+class FormFormFieldComponent {
+    localization;
+    cdr;
+    control;
+    floatingLabel;
+    showError;
+    input;
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+    }
+    // required to avoid ExpressionChangedAfterItHasBeenCheckedError caused by
+    // binding to the label's 'for' attribute dynamically
+    ngAfterContentInit() {
+        this.cdr.detectChanges();
+    }
+    messageFor(key, errorName, field) {
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(this.localization.get(key), 'fieldName', field), 'errorName', errorName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFormFieldComponent, isStandalone: true, selector: "kendo-form-formfield", inputs: { control: "control", floatingLabel: "floatingLabel", showError: "showError" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
+        <kendo-formfield
+            [orientation]="control.orientation">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="control.label"
+                    class="k-checkbox-label"
+                    [for]="cb"
+                    [text]="control.label">
+                </kendo-label>
+            </div>
+            
+            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
+            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
+                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            </ng-container>
+        </kendo-formfield>
+    `, isInline: true, dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: i3.FloatingLabelComponent, selector: "kendo-floatinglabel", inputs: ["labelCssStyle", "labelCssClass", "id", "text", "optional"], outputs: ["positionChange"], exportAs: ["kendoFloatingLabel"] }, { kind: "component", type: i4$1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i4$1.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4$1.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i4$1.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-form-formfield',
+                    standalone: true,
+                    imports: [KeyValuePipe, NgFor, NgIf, ReactiveFormsModule,
+                        KENDO_LABELS, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_BUTTON, KENDO_CHECKBOX, KENDO_DATEPICKER],
+                    template: `
+        <kendo-formfield
+            [orientation]="control.orientation">
+            <kendo-floatinglabel
+                *ngIf="control.label && floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label">
+                <kendo-textbox
+                    *ngIf="$any(control.dataType) === 'text'" 
+                    [formControl]="control.formControl"></kendo-textbox>
+                <kendo-numerictextbox
+                    *ngIf="$any(control.dataType) === 'numeric'" 
+                    [formControl]="control.formControl"></kendo-numerictextbox>
+                <kendo-datepicker
+                    *ngIf="$any(control.dataType) === 'date'" 
+                    [formControl]="control.formControl"></kendo-datepicker>
+            </kendo-floatinglabel>
+            <kendo-label [style.align-items]="'start'"
+                *ngIf="control.label && !floatingLabel && $any(control.dataType) !== 'boolean'"
+                labelCssClass="k-form-label"
+                [text]="control.label"
+                [for]="input">
+            </kendo-label>
+            <kendo-textbox #input
+                *ngIf="!floatingLabel && (control.dataType) === 'text'" 
+                [formControl]="control.formControl"></kendo-textbox>
+            <kendo-numerictextbox #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'numeric'" 
+                [formControl]="control.formControl"></kendo-numerictextbox>
+            <kendo-datepicker #input
+                *ngIf="!floatingLabel && $any(control.dataType) === 'date'" 
+                [formControl]="control.formControl"></kendo-datepicker>
+            <div
+                *ngIf="control.label && $any(control.dataType) === 'boolean'"
+                class="k-form-field-checkbox-wrap">
+                <kendo-checkbox #cb [formControl]="control.formControl"></kendo-checkbox>
+                <kendo-label
+                    *ngIf="control.label"
+                    class="k-checkbox-label"
+                    [for]="cb"
+                    [text]="control.label">
+                </kendo-label>
+            </div>
+            
+            <kendo-formhint *ngIf="control?.hint">{{control.hint}}</kendo-formhint>
+            <ng-container *ngIf="showError && control.formControl?.invalid && control.formControl.touched">
+                <kendo-formerror *ngFor="let err of control?.formControl?.errors | keyvalue">{{control.errors ? control.errors[err.key] : messageFor('formValidationError', err.key, control.name)}}</kendo-formerror>
+            </ng-container>
+        </kendo-formfield>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], floatingLabel: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+let idx = 0;
+/**
+ * @hidden
+ */
+class FormComponent {
+    controls = [];
+    set formSettings(value) {
+        this._formSettings = { ...this._formSettings, ...value };
+    }
+    get formSettings() {
+        return this._formSettings;
+    }
+    formGroup;
+    set actionButtons(value) {
+        if (typeof value === 'boolean') {
+            this.normalizeActionButtonSettings(value);
+        }
+        else {
+            this._actionButtons = value;
+        }
+    }
+    get actionButtons() {
+        return this._actionButtons;
+    }
+    formSubmit = new EventEmitter();
+    get componentIndex() {
+        return idx++;
+    }
+    _formSettings = {
+        orientation: 'vertical',
+        showErrors: true,
+        floatingLabels: false
+    };
+    defaultActionButtons = [{
+            actionType: 'submit',
+            text: 'Submit',
+            svgIcon: saveIcon,
+            icon: 'save',
+            themeColor: 'primary'
+        }, {
+            actionType: 'reset',
+            svgIcon: cancelIcon,
+            text: 'Reset',
+            icon: 'cancel'
+        }];
+    _actionButtons = this.defaultActionButtons;
+    ngOnInit() {
+        idx++;
+    }
+    normalizeActionButtonSettings(value) {
+        this._actionButtons = value ? this.defaultActionButtons : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "kendo-grid-external-form", inputs: { controls: "controls", formSettings: "formSettings", formGroup: "formGroup", actionButtons: "actionButtons" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: `
+        <div role="form"
+            class="k-form k-form-md"
+            [class.k-form-horizontal]="formSettings.orientation === 'horizontal'"
+            [formGroup]="formGroup"
+            (ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
+            (reset)="$event.preventDefault()">
+            <ng-container  *ngFor="let control of controls; let idx = index;">
+                <ng-container *ngIf="!control.template; else template">
+                    <kendo-form-formfield
+                        [control]="control"
+                        [showError]="formSettings.showErrors"
+                        [floatingLabel]="formSettings.floatingLabels"></kendo-form-formfield>
+                </ng-container>
+                <ng-template #template>
+                    <ng-container
+                        [ngTemplateOutlet]="control.template"
+                        [ngTemplateOutletContext]="control.templateContext"></ng-container>
+                </ng-template>
+            </ng-container>
+            <div class="k-form-buttons" *ngIf="$any(actionButtons).length">
+                <button kendoButton *ngFor="let button of $any(actionButtons)" 
+                    [class.k-form-submit]="button.actionType === 'submit'"
+                    [size]="button.size"
+                    [themeColor]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
+                    [rounded]="button.rounded"
+                    [attr.type]="button.actionType"
+                    [svgIcon]="button.svgIcon"
+                    [icon]="button.icon">
+                    {{button.text}}
+                </button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFormFieldComponent, selector: "kendo-form-formfield", inputs: ["control", "floatingLabel", "showError"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-external-form',
+                    standalone: true,
+                    template: `
+        <div role="form"
+            class="k-form k-form-md"
+            [class.k-form-horizontal]="formSettings.orientation === 'horizontal'"
+            [formGroup]="formGroup"
+            (ngSubmit)="formSubmit.next({originalEvent: $event, formGroup})"
+            (reset)="$event.preventDefault()">
+            <ng-container  *ngFor="let control of controls; let idx = index;">
+                <ng-container *ngIf="!control.template; else template">
+                    <kendo-form-formfield
+                        [control]="control"
+                        [showError]="formSettings.showErrors"
+                        [floatingLabel]="formSettings.floatingLabels"></kendo-form-formfield>
+                </ng-container>
+                <ng-template #template>
+                    <ng-container
+                        [ngTemplateOutlet]="control.template"
+                        [ngTemplateOutletContext]="control.templateContext"></ng-container>
+                </ng-template>
+            </ng-container>
+            <div class="k-form-buttons" *ngIf="$any(actionButtons).length">
+                <button kendoButton *ngFor="let button of $any(actionButtons)" 
+                    [class.k-form-submit]="button.actionType === 'submit'"
+                    [size]="button.size"
+                    [themeColor]="button.themeColor || button.actionType === 'submit' ? 'primary' : undefined"
+                    [rounded]="button.rounded"
+                    [attr.type]="button.actionType"
+                    [svgIcon]="button.svgIcon"
+                    [icon]="button.icon">
+                    {{button.text}}
+                </button>
+            </div>
+        </div>
+    `,
+                    imports: [NgFor, NgIf, NgTemplateOutlet, ReactiveFormsModule, FormFormFieldComponent, KENDO_BUTTON],
+                }]
+        }], propDecorators: { controls: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], actionButtons: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class DialogFormComponent extends DialogContentBase {
+    localization;
+    controls;
+    formGroup;
+    formSettings;
+    saveIcon = saveIcon;
+    cancelIcon = cancelIcon;
+    constructor(dialogRef, localization) {
+        super(dialogRef);
+        this.localization = localization;
+    }
+    save() {
+        this.dialog.close({ text: this.localization.get('externalEditingSaveText') });
+    }
+    cancel() {
+        this.dialog.close({ text: this.localization.get('externalEditingCancelText') });
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, deps: [{ token: i1$6.DialogRef }, { token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogFormComponent, isStandalone: true, selector: "kendo-grid-dialog-form", inputs: { controls: "controls", formGroup: "formGroup", formSettings: "formSettings" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `, isInline: true, dependencies: [{ kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-dialog-form',
+                    standalone: true,
+                    imports: [FormComponent, DialogActionsComponent, KENDO_BUTTON],
+                    template: `
+        <kendo-grid-external-form
+            [controls]="controls"
+            [formGroup]="formGroup"
+            [formSettings]="formSettings"
+            [actionButtons]="false"></kendo-grid-external-form>
+        <kendo-dialog-actions [layout]="this.dialog?.dialog?.instance?.actionsLayout">
+            <button
+                kendoButton
+                themeColor="primary"
+                [svgIcon]="saveIcon"
+                [disabled]="!formGroup.valid"
+                (click)="save()"
+            >
+                {{messageFor('externalEditingSaveText')}}
+            </button>
+            <button
+                kendoButton
+                [svgIcon]="cancelIcon"
+                (click)="cancel()">
+                {{messageFor('externalEditingCancelText')}}
+            </button>
+        </kendo-dialog-actions>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }, { type: i1$2.LocalizationService }]; }, propDecorators: { controls: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }] } });
+
+/**
+ * A directive which encapsulates the editing operations of the Grid when using the
+ * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ */
+class ExternalEditingDirective extends EditingDirectiveBase {
+    grid;
+    localDataChangesService;
+    /**
+     * The function that creates the `FormGroup` for the edited model.
+     */
+    createFormGroup;
+    /**
+     * Allows you to customize form orientation, hints, labels and error messages.
+     */
+    formSettings;
+    /**
+     * Allows you to customize the Dialog that contains the edit form.
+     */
+    dialogSettings;
+    constructor(grid, localDataChangesService) {
+        super(grid, localDataChangesService);
+        this.grid = grid;
+        this.localDataChangesService = localDataChangesService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscriptions
+            .add(this.grid.edit.subscribe(this.editHandler.bind(this)));
+    }
+    /**
+     * @hidden
+     * Opens a Dialog that contains the edit form.
+     */
+    openEditFormDialog(editEventArgs, formGroup, formSettings) {
+        const settings = { content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
+        const dialog = this.dialogService.open(settings);
+        const formControls = this.normalizeFormSettings(formGroup, editEventArgs);
+        dialog.content.setInput('controls', formControls);
+        formSettings && dialog.content.setInput('formSettings', formSettings);
+        dialog.content.setInput('formGroup', formGroup);
+        dialog.result.subscribe((r) => {
+            const resultType = r['text'];
+            if (resultType === this.localization.get('externalEditingSaveText')) {
+                this.saveHandler({ ...editEventArgs, formGroup });
+            }
+            dialog.close();
+        });
+    }
+    createModel(args) {
+        return this.createFormGroup(args);
+    }
+    editHandler(args) {
+        const formGroup = this.createModel(args);
+        this.openEditFormDialog(args, formGroup, this.formSettings);
+    }
+    saveModel({ dataItem, formGroup, isNew }) {
+        if (!formGroup.dirty && !isNew) {
+            return;
+        }
+        if (formGroup.valid) {
+            const item = dataItem || [];
+            this.editService.assignValues(item, formGroup.value);
+            return item;
+        }
+        markAllAsTouched(formGroup);
+    }
+    addHandler(args) {
+        const formGroup = this.createModel(args);
+        this.openEditFormDialog(args, formGroup, this.formSettings);
+    }
+    normalizeFormSettings(args, editEventArgs) {
+        const editableColumnFields = this.grid.columns.toArray().filter(c => c.field && c.editable && isPresent$1(args.get(c.field))).map(c => c.field);
+        const settings = editableColumnFields.map(k => {
+            const column = this.grid.columns.toArray().find(c => c.field === k);
+            const title = column.title || k;
+            const template = column.editTemplateRef;
+            const templateContext = template ? {
+                $implicit: args,
+                isNew: editEventArgs.isNew,
+                column,
+                dataItem: editEventArgs.dataItem,
+                formGroup: args,
+                rowIndex: editEventArgs.rowIndex
+            } : null;
+            const customSettings = this.formSettings?.fields?.[k];
+            return {
+                name: k,
+                label: customSettings?.label || title,
+                hint: customSettings?.hint,
+                errors: customSettings?.errors,
+                formControl: args.get(k),
+                dataType: column.editor,
+                orientation: this.formSettings?.orientation || 'vertical',
+                template: template,
+                templateContext: templateContext
+            };
+        });
+        return settings.filter(item => isPresent$1(item));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: GridComponent }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExternalEditingDirective, isStandalone: true, selector: "[kendoGridExternalEditing]", inputs: { createFormGroup: ["kendoGridExternalEditing", "createFormGroup"], formSettings: "formSettings", dialogSettings: "dialogSettings" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridExternalEditing]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoGridExternalEditing']
+            }], formSettings: [{
+                type: Input
+            }], dialogSettings: [{
+                type: Input
+            }] } });
+
 /**
  * A directive which controls the expanded state of the master detail rows. ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  */
@@ -29148,6 +29797,7 @@ const KENDO_GRID_DECLARATIONS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GroupBindingDirective,
@@ -29156,7 +29806,10 @@ const KENDO_GRID_DECLARATIONS = [
     GridToolbarFocusableDirective,
     StatusBarComponent,
     StatusBarTemplateDirective,
-    GridClipboardDirective
+    GridClipboardDirective,
+    FormComponent,
+    DialogFormComponent,
+    FormFormFieldComponent
 ];
 /**
  * @hidden
@@ -29176,6 +29829,7 @@ const KENDO_GRID_EXPORTS = [
     TemplateEditingDirective,
     ReactiveEditingDirective,
     InCellEditingDirective,
+    ExternalEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
     GridToolbarFocusableDirective,
@@ -29250,7 +29904,7 @@ const KENDO_GRID = [
  */
 class GridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, TableDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GridModule, imports: [GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FooterComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnMenuChooserItemCheckedDirective, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, ToolbarComponent, LocalizedMessagesDirective, CustomMessagesComponent, DataBindingDirective, ToolbarTemplateDirective, SelectionDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GroupBindingDirective, GridMarqueeDirective, GridSpacerComponent, GridToolbarFocusableDirective, StatusBarComponent, StatusBarTemplateDirective, GridClipboardDirective, FormComponent, DialogFormComponent, FormFormFieldComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, TableDirective], exports: [GridComponent, ToolbarTemplateDirective, ToolbarComponent, GridSpacerComponent, StatusBarTemplateDirective, DataBindingDirective, SelectionDirective, CustomMessagesComponent, GroupBindingDirective, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, ExternalEditingDirective, ExpandDetailsDirective, ExpandGroupDirective, GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, GroupHeaderComponent, GroupPanelComponent, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, FooterTemplateDirective, ColGroupComponent, ResizableContainerDirective, i1$3.TemplateContextDirective, FieldAccessorPipe, DetailTemplateDirective, SpanColumnComponent, LoadingComponent, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, EditTemplateDirective, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, TableBodyComponent, NoRecordsTemplateDirective, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, SelectAllCheckboxDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridClipboardDirective, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, i45.ToolBarToolComponent, i44.CustomMessagesComponent, i44.PagerFocusableDirective, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerTemplateDirective, i44.PagerComponent, i44.PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -29265,7 +29919,7 @@ class GridModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i44.CustomMessagesComponent, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent] });
+        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i44.CustomMessagesComponent, i44.PagerInfoComponent, i44.PagerInputComponent, i44.PagerNextButtonsComponent, i44.PagerNumericButtonsComponent, i44.PagerPageSizesComponent, i44.PagerPrevButtonsComponent, i44.PagerComponent, i44.PagerSpacerComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent, FormComponent, DialogFormComponent, FormFormFieldComponent, i45.ToolBarComponent, i45.ToolbarCustomMessagesComponent, i45.ToolBarButtonComponent, i45.ToolBarButtonGroupComponent, i45.ToolBarDropDownButtonComponent, i45.ToolBarSeparatorComponent, i45.ToolBarSpacerComponent, i45.ToolBarSplitButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -29365,8 +30019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ExcelModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, imports: [i1$1.IconComponent, i1$1.SVGIconComponent, ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent, i5$1.FooterTemplateDirective, i5$1.GroupFooterTemplateDirective, i5$1.GroupHeaderColumnTemplateDirective, i5$1.GroupHeaderTemplateDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent, i5$1.FooterTemplateDirective, i5$1.GroupFooterTemplateDirective, i5$1.GroupHeaderColumnTemplateDirective, i5$1.GroupHeaderTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, providers: [IconsService], imports: [KENDO_ICONS, ExcelCommandDirective, i5$1.ColumnComponent, i5$1.ColumnGroupComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, imports: [i1$1.IconComponent, i1$1.SVGIconComponent, ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent, i5$2.FooterTemplateDirective, i5$2.GroupFooterTemplateDirective, i5$2.GroupHeaderColumnTemplateDirective, i5$2.GroupHeaderTemplateDirective], exports: [ExcelComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent, i5$2.FooterTemplateDirective, i5$2.GroupFooterTemplateDirective, i5$2.GroupHeaderColumnTemplateDirective, i5$2.GroupHeaderTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, providers: [IconsService], imports: [KENDO_ICONS, ExcelCommandDirective, i5$2.ColumnComponent, i5$2.ColumnGroupComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelModule, decorators: [{
             type: NgModule,
@@ -29381,5 +30035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };