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

package/esm2022/editing/form/dialog-form.component.mjs

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { DialogActionsComponent, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
+import { FormComponent } from './form.component';
+import { FormGroup } from '@angular/forms';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export 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.DialogRef }, { token: i2.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: i3.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.DialogRef }, { type: i2.LocalizationService }]; }, propDecorators: { controls: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], formSettings: [{
+                type: Input
+            }] } });

package/esm2022/editing/form/form-formfield.component.mjs

@@ -0,0 +1,161 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { KeyValuePipe, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { KENDO_DATEPICKER } from '@progress/kendo-angular-dateinputs';
+import { KENDO_CHECKBOX, KENDO_FORMFIELD, KENDO_NUMERICTEXTBOX, KENDO_TEXTBOX } from '@progress/kendo-angular-inputs';
+import { KENDO_LABELS } from '@progress/kendo-angular-label';
+import { ReactiveFormsModule } from '@angular/forms';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { replaceMessagePlaceholder } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-label";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+/**
+ * @hidden
+ */
+export 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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: i4.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i4.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i4.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.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.CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: i5.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.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { control: [{
+                type: Input
+            }], floatingLabel: [{
+                type: Input
+            }], showError: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });

package/esm2022/editing/form/form.component.mjs

@@ -0,0 +1,153 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { cancelIcon, saveIcon } from '@progress/kendo-svg-icons';
+import { FormFormFieldComponent } from './form-formfield.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@progress/kendo-angular-buttons";
+let idx = 0;
+/**
+ * @hidden
+ */
+export 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: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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
+            }] } });

package/esm2022/editing/form/index.mjs

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './models';
+export * from './form.component';
+export * from './dialog-form.component';
+export * from './form-formfield.component';

package/esm2022/editing/form/models.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/editing-directives/editing-directive-base.mjs

@@ -2,12 +2,15 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Input, Directive } from '@angular/core';
+import { Input, Directive, inject } from '@angular/core';
 import { GridComponent } from '../grid.component';
 import { LocalEditService } from './local-edit.service';
-import { Subscription, Observable } from 'rxjs';
+import { Subscription, Observable, Subject } from 'rxjs';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { take } from 'rxjs/operators';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
@@ -28,10 +31,32 @@ export 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;
@@ -39,6 +64,8 @@ export class EditingDirectiveBase {
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
         this.defaultEditService = this.createDefaultService();
+        this.dialogService = inject(DialogService);
+        this.localization = inject(LocalizationService);
     }
     /**
      * @hidden
@@ -59,7 +86,7 @@ export class EditingDirectiveBase {
     createDefaultService() {
         return new LocalEditService(this.grid, this.localDataChangesService);
     }
-    addHandler() {
+    addHandler(_args) {
         this.grid.addRow(this.createModel({ isNew: true }));
     }
     saveHandler(args) {
@@ -84,7 +111,8 @@ export 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);
             }

package/esm2022/editing-directives/external-editing.directive.mjs

@@ -0,0 +1,130 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { GridComponent } from '../grid.component';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
+import { markAllAsTouched } from './utils';
+import { EditingDirectiveBase } from './editing-directive-base';
+import { DialogFormComponent } from '../editing/form';
+import { isPresent } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "../grid.component";
+import * as i2 from "../editing/local-data-changes.service";
+/**
+ * A directive which encapsulates the editing operations of the Grid when using the
+ * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ */
+export 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(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(item));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.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: i1.GridComponent }, { type: i2.LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+                type: Input,
+                args: ['kendoGridExternalEditing']
+            }], formSettings: [{
+                type: Input
+            }], dialogSettings: [{
+                type: Input
+            }] } });