@progress/kendo-angular-spreadsheet 21.0.0-develop.9 → 21.0.1-develop.1

package/esm2022/models/cell-editor-action-args.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/models/cell-editor-options.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/models/index.mjs

@@ -5,3 +5,5 @@
 export * from './sheet-info';
 export * from './main-menu-item';
 export * from './events';
+export * from './cell-editor-options';
+export * from './cell-editor-action-args';

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761910369,
-    version: '21.0.0-develop.9',
+    publishDate: 1762953419,
+    version: '21.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

package/esm2022/spreadsheet.component.mjs

@@ -200,6 +200,11 @@ export class SpreadsheetComponent {
      * @default 200
      */
     rows = 200;
+    /**
+     * Sets the custom cell editors for the Spreadsheet.
+     * Accepts an array of `SpreadsheetCellEditorOptions` objects that define custom editors.
+     */
+    cellEditors;
     /**
      * An object containing any images used in the Spreadsheet. The keys should be image IDs (they are referenced by this ID in `sheets.drawings`),
      * and the values should be image URLs. The image URLs can be either [`data URLs`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
@@ -358,6 +363,9 @@ export class SpreadsheetComponent {
             changedDynamicOptions.forEach(o => newOptions[o] = changes[o].currentValue);
             this.spreadsheetWidget.fromJSON(newOptions);
         }
+        if (changes['cellEditors'] && !changes['cellEditors'].firstChange) {
+            this.registerCustomEditors();
+        }
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -842,6 +850,42 @@ export class SpreadsheetComponent {
                 icon: { iconName: 'calendar', svgIcon: calendarIcon }
             };
         });
+        this.registerCustomEditors();
+    }
+    registerCustomEditors() {
+        if (!this.cellEditors?.length) {
+            return;
+        }
+        this.cellEditors.forEach((editor) => this.registerCustomEditor(editor));
+    }
+    registerCustomEditor(editor) {
+        registerEditor(editor.name, () => ({
+            edit: (options) => this.openCustomEditorPopup(editor, options),
+            icon: { iconName: editor.icon, svgIcon: editor.svgIcon }
+        }));
+    }
+    openCustomEditorPopup(editor, options) {
+        this.closePopup();
+        this.popupRef = this.popupService.open({
+            anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
+            content: editor.component,
+            popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
+            anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' }
+        });
+        const componentInstance = this.popupRef.content.instance;
+        editor.actions.forEach(action => {
+            const actionStream = componentInstance[action.name];
+            actionStream?.subscribe((args) => {
+                const eventArgs = { originalEvent: args, ...options };
+                action.handler?.apply(componentInstance, [eventArgs]);
+            });
+        });
+    }
+    closePopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
     }
     isValidFormula(validation) {
         const formula = calc.runtime.Formula;
@@ -851,7 +895,7 @@ export class SpreadsheetComponent {
         return new Date(serialToDate(isPresent(sheet) ? sheet.range(validation.value.row, validation.value.col).value() : validation));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.DialogService }, { token: i7.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", cellEditors: "cellEditors", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
             SpreadsheetLocalizationService,
             SpreadsheetService,
             {
@@ -1626,6 +1670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
+            }], cellEditors: [{
+                type: Input
             }], images: [{
                 type: Input
             }], excel: [{

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

@@ -43,8 +43,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761910369,
-    version: '21.0.0-develop.9',
+    publishDate: 1762953419,
+    version: '21.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -4957,6 +4957,11 @@ class SpreadsheetComponent {
      * @default 200
      */
     rows = 200;
+    /**
+     * Sets the custom cell editors for the Spreadsheet.
+     * Accepts an array of `SpreadsheetCellEditorOptions` objects that define custom editors.
+     */
+    cellEditors;
     /**
      * An object containing any images used in the Spreadsheet. The keys should be image IDs (they are referenced by this ID in `sheets.drawings`),
      * and the values should be image URLs. The image URLs can be either [`data URLs`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
@@ -5115,6 +5120,9 @@ class SpreadsheetComponent {
             changedDynamicOptions.forEach(o => newOptions[o] = changes[o].currentValue);
             this.spreadsheetWidget.fromJSON(newOptions);
         }
+        if (changes['cellEditors'] && !changes['cellEditors'].firstChange) {
+            this.registerCustomEditors();
+        }
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -5599,6 +5607,42 @@ class SpreadsheetComponent {
                 icon: { iconName: 'calendar', svgIcon: calendarIcon }
             };
         });
+        this.registerCustomEditors();
+    }
+    registerCustomEditors() {
+        if (!this.cellEditors?.length) {
+            return;
+        }
+        this.cellEditors.forEach((editor) => this.registerCustomEditor(editor));
+    }
+    registerCustomEditor(editor) {
+        registerEditor(editor.name, () => ({
+            edit: (options) => this.openCustomEditorPopup(editor, options),
+            icon: { iconName: editor.icon, svgIcon: editor.svgIcon }
+        }));
+    }
+    openCustomEditorPopup(editor, options) {
+        this.closePopup();
+        this.popupRef = this.popupService.open({
+            anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
+            content: editor.component,
+            popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
+            anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' }
+        });
+        const componentInstance = this.popupRef.content.instance;
+        editor.actions.forEach(action => {
+            const actionStream = componentInstance[action.name];
+            actionStream?.subscribe((args) => {
+                const eventArgs = { originalEvent: args, ...options };
+                action.handler?.apply(componentInstance, [eventArgs]);
+            });
+        });
+    }
+    closePopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
     }
     isValidFormula(validation) {
         const formula = calc.runtime.Formula;
@@ -5608,7 +5652,7 @@ class SpreadsheetComponent {
         return new Date(serialToDate(isPresent(sheet) ? sheet.range(validation.value.row, validation.value.col).value() : validation));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$4.IntlService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$2.DialogService }, { token: i1$1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", cellEditors: "cellEditors", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
             SpreadsheetLocalizationService,
             SpreadsheetService,
             {
@@ -6383,6 +6427,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
+            }], cellEditors: [{
+                type: Input
             }], images: [{
                 type: Input
             }], excel: [{

package/index.d.ts

@@ -8,7 +8,7 @@ export { FormulaListComponent } from './action-bar/list.component';
 export { FormulaInputDirective } from './action-bar/formula-input.directive';
 export { NameBoxComponent } from './action-bar/namebox.component';
 export { SheetsBarComponent } from './sheets-bar/sheets-bar.component';
-export { SheetInfo, SpreadsheetMainMenuItem as ToolbarTab, SpreadsheetChangeEvent, SpreadsheetActiveSheetChangeEvent, SpreadsheetExcelExportEvent, SpreadsheetExcelImportEvent, SpreadsheetMainMenuItem, } from './models';
+export { SheetInfo, SpreadsheetMainMenuItem as ToolbarTab, SpreadsheetChangeEvent, SpreadsheetActiveSheetChangeEvent, SpreadsheetExcelExportEvent, SpreadsheetExcelImportEvent, SpreadsheetMainMenuItem, SpreadsheetCellEditorOptions, SpreadsheetCellEditorHandlerArgs, Rectangle } from './models';
 export * from './tools';
 export * from './directives';
 export { CustomMessagesComponent } from './localization/custom-messages.component';

package/models/cell-editor-action-args.d.ts

@@ -0,0 +1,63 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Range, View } from "@progress/kendo-spreadsheet-common";
+/**
+ * Represents the rectangular dimensions and position of a cell or range.
+ */
+export interface Rectangle {
+    /**
+     * Represents the left position of the rectangle in pixels.
+     */
+    left: number;
+    /**
+     * Represents the top position of the rectangle in pixels.
+     */
+    top: number;
+    /**
+     * Represents the width of the rectangle in pixels.
+     */
+    width: number;
+    /**
+     * Represents the height of the rectangle in pixels.
+     */
+    height: number;
+    /**
+     * Represents the right position of the rectangle in pixels.
+     */
+    right: number;
+    /**
+     * Represents the bottom position of the rectangle in pixels.
+     */
+    bottom: number;
+}
+/**
+ * Represents the arguments passed to the handler callback for each cell editor ([see example](slug:custom_cell_editors_spreadsheet#action-handlers)).
+ */
+export interface SpreadsheetCellEditorHandlerArgs {
+    /**
+     * The data returned from the component's original event (for example, the selected color value from a ColorPalette's `valueChange` event).
+     */
+    originalEvent?: any;
+    /**
+     * The Spreadsheet `Range` object representing the currently selected cells. Provides methods to apply values, formatting, and styling to the Spreadsheet cells using the original event's data.
+     */
+    range?: Range;
+    /**
+     * Represents the `Rectangle` object that provides position and dimension information about the active range, useful for custom positioning logic.
+     */
+    rect?: Rectangle;
+    /**
+     * The current Spreadsheet `View` instance, giving access to the broader Spreadsheet context.
+     */
+    view?: View;
+    /**
+     * Any validation rules configured for the active range, allowing you to respect existing constraints.
+     */
+    validation?: any;
+    /**
+     * A function that edits the active cell or range with a provided value. Use this as an alternative to `args.range.value` manipulation for updating the cell content.
+     */
+    callback?: Function;
+}

package/models/cell-editor-options.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-svg-icons";
+/**
+ * Represents the configuration object for defining custom cell editors.
+ * Use this interface to render specific cell editors when you focus a cell or a range.
+ */
+export interface SpreadsheetCellEditorOptions {
+    /**
+     * Sets the unique name of the cell editor.
+     * Use this name when you specify the editor for a cell or a range.
+     *
+     * Please note that `_validation_list` and `_validation_date` are reserved names for built-in editors.
+     */
+    name: string;
+    /**
+     * Sets the component to use as a cell editor.
+     */
+    component?: any;
+    /**
+     * Provides the actions that the cell editor can use.
+     * The `name` property must match an event name of the editor component.
+     */
+    actions?: Array<{
+        name: string;
+        handler: Function;
+    }>;
+    /**
+     * Sets the name of an existing icon from a Kendo UI theme.
+     */
+    icon?: string;
+    /**
+     * Sets the [`SVGIcon`](slug:api_icons_svgicon) to render.
+     */
+    svgIcon?: SVGIcon;
+}

package/models/index.d.ts

@@ -5,3 +5,5 @@
 export * from './sheet-info';
 export * from './main-menu-item';
 export * from './events';
+export * from './cell-editor-options';
+export * from './cell-editor-action-args';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-spreadsheet",
-  "version": "21.0.0-develop.9",
+  "version": "21.0.1-develop.1",
   "description": "A Spreadsheet Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1761910369,
+      "publishDate": 1762953419,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
     }
   },
@@ -29,32 +29,32 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.9",
-    "@progress/kendo-angular-common": "21.0.0-develop.9",
-    "@progress/kendo-angular-dialog": "21.0.0-develop.9",
-    "@progress/kendo-angular-dropdowns": "21.0.0-develop.9",
-    "@progress/kendo-angular-icons": "21.0.0-develop.9",
-    "@progress/kendo-angular-inputs": "21.0.0-develop.9",
-    "@progress/kendo-angular-dateinputs": "21.0.0-develop.9",
-    "@progress/kendo-angular-intl": "21.0.0-develop.9",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.9",
-    "@progress/kendo-angular-label": "21.0.0-develop.9",
-    "@progress/kendo-angular-layout": "21.0.0-develop.9",
-    "@progress/kendo-angular-menu": "21.0.0-develop.9",
-    "@progress/kendo-angular-popup": "21.0.0-develop.9",
-    "@progress/kendo-angular-toolbar": "21.0.0-develop.9",
+    "@progress/kendo-angular-buttons": "21.0.1-develop.1",
+    "@progress/kendo-angular-common": "21.0.1-develop.1",
+    "@progress/kendo-angular-dialog": "21.0.1-develop.1",
+    "@progress/kendo-angular-dropdowns": "21.0.1-develop.1",
+    "@progress/kendo-angular-icons": "21.0.1-develop.1",
+    "@progress/kendo-angular-inputs": "21.0.1-develop.1",
+    "@progress/kendo-angular-dateinputs": "21.0.1-develop.1",
+    "@progress/kendo-angular-intl": "21.0.1-develop.1",
+    "@progress/kendo-angular-l10n": "21.0.1-develop.1",
+    "@progress/kendo-angular-label": "21.0.1-develop.1",
+    "@progress/kendo-angular-layout": "21.0.1-develop.1",
+    "@progress/kendo-angular-menu": "21.0.1-develop.1",
+    "@progress/kendo-angular-popup": "21.0.1-develop.1",
+    "@progress/kendo-angular-toolbar": "21.0.1-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.9",
+    "@progress/kendo-angular-schematics": "21.0.1-develop.1",
     "@progress/jszip-esm": "^1.0.3",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.5.10",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-file-saver": "^1.1.1",
     "@progress/kendo-ooxml": "^1.9.0",
-    "@progress/kendo-spreadsheet-common": "1.2.5"
+    "@progress/kendo-spreadsheet-common": "1.2.6"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-spreadsheet.mjs",

package/schematics/ngAdd/index.js

@@ -7,8 +7,8 @@ function default_1(options) {
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer deps of the dropdowns
-            '@progress/kendo-angular-navigation': '21.0.0-develop.9',
-            '@progress/kendo-angular-treeview': '21.0.0-develop.9'
+            '@progress/kendo-angular-navigation': '21.0.1-develop.1',
+            '@progress/kendo-angular-treeview': '21.0.1-develop.1'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/spreadsheet.component.d.ts

@@ -12,7 +12,7 @@ import { ContextMenuSelectEvent, MenuItem } from '@progress/kendo-angular-menu';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { SpreadsheetService } from './common/spreadsheet.service';
 import { SpreadsheetToolsService } from './tools/tools.service';
-import { SheetInfo, SpreadsheetActiveSheetChangeEvent, SpreadsheetChangeEvent, SpreadsheetExcelExportEvent, SpreadsheetExcelImportEvent, SpreadsheetMainMenuItem } from './models';
+import { SheetInfo, SpreadsheetActiveSheetChangeEvent, SpreadsheetCellEditorOptions, SpreadsheetChangeEvent, SpreadsheetExcelExportEvent, SpreadsheetExcelImportEvent, SpreadsheetMainMenuItem } from './models';
 import { ErrorHandlingService } from './common/error-handling.service';
 import * as i0 from "@angular/core";
 /**
@@ -111,6 +111,11 @@ export declare class SpreadsheetComponent implements AfterViewInit, OnChanges {
      * @default 200
      */
     rows: number;
+    /**
+     * Sets the custom cell editors for the Spreadsheet.
+     * Accepts an array of `SpreadsheetCellEditorOptions` objects that define custom editors.
+     */
+    cellEditors: Array<SpreadsheetCellEditorOptions>;
     /**
      * An object containing any images used in the Spreadsheet. The keys should be image IDs (they are referenced by this ID in `sheets.drawings`),
      * and the values should be image URLs. The image URLs can be either [`data URLs`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
@@ -211,8 +216,12 @@ export declare class SpreadsheetComponent implements AfterViewInit, OnChanges {
     private openLinkDialog;
     private configureSheets;
     private registerEditors;
+    private registerCustomEditors;
+    private registerCustomEditor;
+    private openCustomEditorPopup;
+    private closePopup;
     private isValidFormula;
     private createDate;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpreadsheetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SpreadsheetComponent, "kendo-spreadsheet", ["kendo-spreadsheet"], { "menuItems": { "alias": "menuItems"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; "formulaListMaxHeight": { "alias": "formulaListMaxHeight"; "required": false; }; "activeSheet": { "alias": "activeSheet"; "required": false; }; "sheets": { "alias": "sheets"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "columnWidth": { "alias": "columnWidth"; "required": false; }; "defaultCellStyle": { "alias": "defaultCellStyle"; "required": false; }; "headerHeight": { "alias": "headerHeight"; "required": false; }; "headerWidth": { "alias": "headerWidth"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "images": { "alias": "images"; "required": false; }; "excel": { "alias": "excel"; "required": false; }; }, { "change": "change"; "formatChange": "formatChange"; "selectionChange": "selectionChange"; "excelExport": "excelExport"; "excelImport": "excelImport"; "activeSheetChange": "activeSheetChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpreadsheetComponent, "kendo-spreadsheet", ["kendo-spreadsheet"], { "menuItems": { "alias": "menuItems"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; "formulaListMaxHeight": { "alias": "formulaListMaxHeight"; "required": false; }; "activeSheet": { "alias": "activeSheet"; "required": false; }; "sheets": { "alias": "sheets"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "columnWidth": { "alias": "columnWidth"; "required": false; }; "defaultCellStyle": { "alias": "defaultCellStyle"; "required": false; }; "headerHeight": { "alias": "headerHeight"; "required": false; }; "headerWidth": { "alias": "headerWidth"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cellEditors": { "alias": "cellEditors"; "required": false; }; "images": { "alias": "images"; "required": false; }; "excel": { "alias": "excel"; "required": false; }; }, { "change": "change"; "formatChange": "formatChange"; "selectionChange": "selectionChange"; "excelExport": "excelExport"; "excelImport": "excelImport"; "activeSheetChange": "activeSheetChange"; }, never, never, true, never>;
 }