@progress/kendo-angular-grid 20.1.0-develop.2 → 20.1.0-develop.21

package/column-menu/column-list.component.d.ts

@@ -58,7 +58,6 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
-    onSelectAllClick(e: any): void;
     onSelectAllCheckboxChange(checkedState: any): void;
     ngOnDestroy(): void;
     cancelChanges(): void;
@@ -70,7 +69,6 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private disableFirstUnlockedCheckedCheckbox;
     private enableLastDisabledColumn;
     private setDisabledState;
-    checkBoxClick(e: any): void;
     onCheckboxChange(checkedState: any, column: any, _index: number): void;
     private setTabindex;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;

package/columns/column.component.d.ts

@@ -14,6 +14,7 @@ import { FilterCellTemplateDirective } from '../filtering/cell/filter-cell-templ
 import { FilterMenuTemplateDirective } from '../filtering/menu/filter-menu-template.directive';
 import { IdService } from '../common/id.service';
 import { FieldDataType } from '../common/field-datatype';
+import { FilterVariant, FilterVariantSettings } from '../filtering/filterable';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -72,6 +73,12 @@ export declare class ColumnComponent extends ColumnBase {
      * @default 'text'
      */
     filter: FieldDataType;
+    /**
+     * Specifies the filter type for the filter menu UI.
+     *
+     * @default 'default'
+     */
+    filterVariant: FilterVariant | FilterVariantSettings;
     /**
      * Shows or hides the filter UI for this column. [See example](slug:filtering_grid).
      *
@@ -101,5 +108,5 @@ export declare class ColumnComponent extends ColumnBase {
     get filterMenuTemplateRef(): TemplateRef<any>;
     get displayTitle(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-grid-column", never, { "field": { "alias": "field"; "required": false; }; "format": { "alias": "format"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "groupable": { "alias": "groupable"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, ["template", "groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "editTemplate", "filterCellTemplate", "filterMenuTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-grid-column", never, { "field": { "alias": "field"; "required": false; }; "format": { "alias": "format"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "groupable": { "alias": "groupable"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterVariant": { "alias": "filterVariant"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, ["template", "groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "editTemplate", "filterCellTemplate", "filterMenuTemplate"], never, true, never>;
 }

package/columns/command-column.component.d.ts

@@ -10,7 +10,7 @@ import { CellRowspanFn } from './cell-rowspan';
 import * as i0 from "@angular/core";
 /**
  * Represents the command columns of the Grid. Define the content of the column inside an `<ng-template>` tag.
- * For more information and examples, see the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
+ * For more information and examples, see the [Editing Action Buttons](slug:basics_editing_grid#editing-action-buttons) article.
  *
  * @example
  * ```html

package/columns/span-column.component.d.ts

@@ -74,7 +74,7 @@ export declare class SpanColumnComponent extends ColumnBase {
     includeInChooser: boolean;
     /**
      * Sets whether the edit template of the column is rendered.
-     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
+     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
      * @default false
      */
     set editable(value: boolean);

package/editing/cancel-command.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the `cancel` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  *
  * When a button with this directive is clicked, the
  * [`cancel`]({% slug api_grid_gridcomponent %}#toc-cancel) event

package/editing/edit-row-options.interface.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Provides additional options for the [`editRow`]({% slug api_grid_gridcomponent %}#toc-editrow) method. [See example]({% slug editing_rowclick_grid %}#toc-managing-focus).
+ * Provides additional options for the [`editRow`]({% slug api_grid_gridcomponent %}#toc-editrow) method. [See example](slug:inline_editing_grid#managing-focus).
  *
  * @example
  * ```typescript

package/editing/edit-template.directive.d.ts

@@ -5,7 +5,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
+ * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
  * Place an `<ng-template>` tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag to define the template.
  *
  * The template context includes:

package/editing/remove-command.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the `remove` command of the Grid. Apply this directive to any `button` element
  * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`remove`]({% slug api_grid_gridcomponent %}#toc-remove) event fires.
  * The button with `kendoGridRemoveCommand` is automatically hidden when the row is in edit mode.

package/editing/save-command.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the `save` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`save`]({% slug api_grid_gridcomponent %}#toc-save) event fires.
  * The button with `kendoGridSaveCommand` is automatically hidden when the row is not in edit mode.

package/editing-directives/edit-service.interface.d.ts

@@ -5,8 +5,8 @@
 /**
  * The interface which must be extended when creating custom edit service.
  * This interface defines the methods that a custom editing service should implement to handle create, update, and remove operations on grid items.
- * Set the custom edit service to the `editService` input of the respective editing directive.
- * [See exampe](slug:editing_directives_grid#toc-custom-editing-service).
+ * Set the custom edit service to the `editService` input of the respective editing directive
+ * [See example](slug:custom_editing_service_grid).
  */
 export interface EditService {
     /**

package/editing-directives/external-editing.directive.d.ts

@@ -13,7 +13,7 @@ import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI Grid external editing directive. The directive manages editing operations in the Grid when using the
- * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ * External Form ([see example](slug:external_editing_grid#quick-setup)).
  *
  * @example
  * ```typescript

package/editing-directives/in-cell-editing.directive.d.ts

@@ -9,7 +9,7 @@ import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
- * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
+ * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example](slug:editing_incell_grid#quick-setup)).
  *
  * @example
  * ```html

package/editing-directives/reactive-editing.directive.d.ts

@@ -8,7 +8,7 @@ import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
- * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:inline_editing_grid#using-reactive-forms)).
  *
  * @example
  * ```html

package/editing-directives/template-editing.directive.d.ts

@@ -7,7 +7,7 @@ import { GridComponent } from '../grid.component';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example](slug:inline_editing_grid#using-template-driven-forms)).
  *
  * @example
  * ```html

package/esm2022/column-menu/column-list-kb-nav.service.mjs

@@ -27,7 +27,7 @@ export class ColumnListKeyboardNavigation {
     toggle(index, active) {
         const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
         element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
-        active && element?.focus();
+        active && element?.focus({ preventScroll: true });
     }
     toggleCheckedState() {
         this.items[this.activeIndex].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();

package/esm2022/column-menu/column-list.component.mjs

@@ -5,7 +5,7 @@
 import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChildren, QueryList, Optional, ChangeDetectorRef } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
-import { EventsOutsideAngularDirective, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
 import { NgFor, NgIf } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
@@ -136,15 +136,6 @@ export class ColumnListComponent {
             this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
         }
     }
-    onSelectAllClick(e) {
-        if (e.target.classList.contains('k-checkbox')) {
-            return;
-        }
-        e.preventDefault();
-        const label = e.target.closest('.k-column-list-item');
-        const input = label?.querySelector('input');
-        input.click();
-    }
     onSelectAllCheckboxChange(checkedState) {
         if (!checkedState && !this.allowHideAll) {
             const columnsToKeep = [];
@@ -326,25 +317,6 @@ export class ColumnListComponent {
             });
         }
     }
-    checkBoxClick(e) {
-        const closestItem = e.target.closest('.k-column-list-item');
-        if (!closestItem)
-            return;
-        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-        const input = checkboxElement?.querySelector('input');
-        if (e.target === input) {
-            return;
-        }
-        e.preventDefault();
-        if (input) {
-            const index = parseInt(input.getAttribute('data-index'), 10);
-            const column = this.filteredColumns[index];
-            const isDisabled = checkboxElement.classList.contains('k-disabled');
-            if (column && !isDisabled) {
-                input.click();
-            }
-        }
-    }
     onCheckboxChange(checkedState, column, _index) {
         column.currentlyChecked = checkedState;
         if (this.autoSync) {
@@ -378,9 +350,7 @@ export class ColumnListComponent {
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -393,9 +363,7 @@ export class ColumnListComponent {
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -406,7 +374,7 @@ export class ColumnListComponent {
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </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: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, 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: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -422,9 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -437,9 +403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -452,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, CheckBoxComponent, EventsOutsideAngularDirective]
+                    imports: [NgFor, NgIf, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: i2.ColumnInfoService, decorators: [{
                     type: Optional

package/esm2022/column-menu/column-menu-container.component.mjs

@@ -6,6 +6,7 @@ import { ColumnMenuItemDirective } from './column-menu-item.directive';
 import { Component, ContentChildren, Inject, NgZone, QueryList } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { ColumnMenuService } from './column-menu.service';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-menu.service";
 /**
@@ -33,7 +34,15 @@ export class ColumnMenuContainerComponent {
         else {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable?.focus());
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            const firstFocusable = this.service.menuTabbingService.firstFocusable;
+            if (firstFocusable instanceof DropDownListComponent) {
+                firstFocusable.wrapper.nativeElement.focus({ preventScroll: true });
+            }
+            else {
+                firstFocusable?.focus({ preventScroll: true });
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `

package/esm2022/column-menu/column-menu.component.mjs

@@ -353,7 +353,13 @@ export class ColumnMenuComponent {
         ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
     }
     focusRoot() {
-        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+        if (this.isNavigable) {
+            this.navigationService.preventScroll = true;
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus({ preventScroll: true });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }, { token: i7.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [

package/esm2022/columns/column.component.mjs

@@ -75,6 +75,12 @@ export class ColumnComponent extends ColumnBase {
      * @default 'text'
      */
     filter = 'text';
+    /**
+     * Specifies the filter type for the filter menu UI.
+     *
+     * @default 'default'
+     */
+    filterVariant = 'default';
     /**
      * Shows or hides the filter UI for this column. [See example](slug:filtering_grid).
      *
@@ -122,7 +128,7 @@ export class ColumnComponent extends ColumnBase {
         return this.title === undefined ? this.field : this.title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.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: [
+    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", filterVariant: "filterVariant", filterable: "filterable", editable: "editable" }, providers: [
             {
                 provide: ColumnBase,
                 useExisting: forwardRef(() => ColumnComponent)
@@ -162,6 +168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filter: [{
                 type: Input
+            }], filterVariant: [{
+                type: Input
             }], filterable: [{
                 type: Input
             }], editable: [{

package/esm2022/columns/command-column.component.mjs

@@ -11,7 +11,7 @@ import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
 /**
  * Represents the command columns of the Grid. Define the content of the column inside an `<ng-template>` tag.
- * For more information and examples, see the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
+ * For more information and examples, see the [Editing Action Buttons](slug:basics_editing_grid#editing-action-buttons) article.
  *
  * @example
  * ```html

package/esm2022/columns/span-column.component.mjs

@@ -75,7 +75,7 @@ export class SpanColumnComponent extends ColumnBase {
     includeInChooser = false;
     /**
      * Sets whether the edit template of the column is rendered.
-     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
+     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
      * @default false
      */
     set editable(value) {

package/esm2022/common/clipboard.directive.mjs

@@ -136,6 +136,9 @@ export class GridClipboardDirective {
         const isPaste = operationType === 'paste';
         const pastedData = args.clipboardData.getData('text');
         const visibleCols = this.host.columns.toArray().filter(c => c.isVisible);
+        if (visibleCols.some(c => c.orderIndex > 0)) { // columns have been reordered
+            visibleCols.sort((a, b) => a.orderIndex - b.orderIndex);
+        }
         const data = isPaste ?
             {
                 dataString: pastedData,

package/esm2022/editing/cancel-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `cancel` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  *
  * When a button with this directive is clicked, the
  * [`cancel`]({% slug api_grid_gridcomponent %}#toc-cancel) event

package/esm2022/editing/edit-template.directive.mjs

@@ -5,7 +5,7 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
+ * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
  * Place an `<ng-template>` tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag to define the template.
  *
  * The template context includes:

package/esm2022/editing/remove-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `remove` command of the Grid. Apply this directive to any `button` element
  * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`remove`]({% slug api_grid_gridcomponent %}#toc-remove) event fires.
  * The button with `kendoGridRemoveCommand` is automatically hidden when the row is in edit mode.

package/esm2022/editing/save-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `save` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`save`]({% slug api_grid_gridcomponent %}#toc-save) event fires.
  * The button with `kendoGridSaveCommand` is automatically hidden when the row is not in edit mode.

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

@@ -16,7 +16,7 @@ import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../common/adaptiveness.service";
 /**
  * Represents the Kendo UI Grid external editing directive. The directive manages editing operations in the Grid when using the
- * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ * External Form ([see example](slug:external_editing_grid#quick-setup)).
  *
  * @example
  * ```typescript

package/esm2022/editing-directives/in-cell-editing.directive.mjs

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
+ * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example](slug:editing_incell_grid#quick-setup)).
  *
  * @example
  * ```html

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

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:inline_editing_grid#using-reactive-forms)).
  *
  * @example
  * ```html

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

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example](slug:inline_editing_grid#using-template-driven-forms)).
  *
  * @example
  * ```html