Angular Spreadsheet Custom Cell Editors
The Kendo UI for Angular Spreadsheet allows you to create custom cell editors that extend the built-in editing capabilities. With custom cell editors, you can provide specialized input controls for specific data types, enhance user experience, and implement complex validation scenarios.
Custom cell editors enable you to:
- Create specialized input controls for specific data types (color palettes, date selectors, dropdown lists).
- Implement custom validation and formatting logic.
- Provide enhanced user experience with visual components.
- Integrate with other Kendo UI for Angular components seamlessly.
Cell Editor Configuration
To implement custom cell editors for the Spreadsheet component, follow these steps:
-
Bind the
cellEditorsproperty of the Spreadsheet component to your custom cell editor definitions.html<kendo-spreadsheet [sheets]="sheets" [cellEditors]="customCellEditors"> </kendo-spreadsheet> -
Define your custom editors by creating an array of
SpreadsheetCellEditorOptionsobjects. Each editor needs a unique name, the Angular component to use, and action handlers for user interactions.typescriptpublic customCellEditors: SpreadsheetCellEditorOptions[] = [ { name: 'color', component: ColorPaletteComponent, actions: [ { name: 'valueChange', handler: (args: SpreadsheetCellEditorHandlerArgs) => { if (args.originalEvent) { args.range.background(args.originalEvent); } } } ], icon: 'droplet', svgIcon: dropletIcon } ]; -
Apply the custom editors to specific Spreadsheet cells by adding an
editorproperty with the name of your custom editor definition.tspublic sheets = [ { name: 'Products', rows: [ { cells: [ { value: 'Product' }, { value: 'Brand Color' } ] }, { cells: [ { value: 'T-Shirt' }, { value: '#FF6358', editor: 'color' } // Links to the 'color' editor ] } ] } ];
Configuration Options
Each custom cell editor is defined through the SpreadsheetCellEditorOptions interface, which includes the following properties:
| Property | Description |
|---|---|
name | The unique identifier for the custom editor. Use this name to reference the editor in your Spreadsheet cells definition. |
component | The Angular component that serves as the custom editor. This can be any Kendo UI for Angular component or your own custom component. |
actions | An array of actions that define how the editor interacts with the Spreadsheet data. Each action includes:
|
icon | The font icon name for the editor button that appears when clicking on cells with this editor. For details, go to the list of font icons supported by Kendo UI for Angular. |
svgIcon | The SVG icon for the editor button that appears when clicking on cells with this editor. For details, go to the list of SVG icons supported by Kendo UI for Angular. |
Action Handlers
Action handlers are the bridge between your custom editor components and the Spreadsheet data. When users interact with your custom editor, the corresponding action handler is triggered to process that interaction and update the Spreadsheet accordingly.
Each action handler consists of two parts:
name—Event name that matches the output event from your Angular component (such asvalueChange,selectionChange, orclick)handler—Handler function that processes the event and applies changes to the Spreadsheet
The handler function receives arguments of type SpreadsheetCellEditorHandlerArgs that provide access to the event data and Spreadsheet context.
The following snippet demonstrates a complete action handler that listens for a ColorPalette's valueChange event and applies both background color and new value to the selected cell:
public customCellEditors: SpreadsheetCellEditorOptions[] = [
{
// ... other options
actions: [
{
name: 'valueChange',
handler: (args: SpreadsheetCellEditorHandlerArgs) => {
if (args.originalEvent) {
// The originalEvent contains the new value emitted from the event
const selectedColor = args.originalEvent;
// Use the range object to apply the value as a background color
args.range.background(selectedColor);
// Optionally, also update the display value of the cell
args.range.value(selectedColor);
}
}
}
],
}
];Built-in Validation Editors
In addition to custom cell editors, the Spreadsheet provides built-in cell editors that automatically activate when cells have specific data validation configured:
_validation_list—A dropdown editor for data validation lists. Automatically displays when a cell has list validation configured._validation_date—A date picker editor for date validation. Automatically displays when a cell has date validation configured.
These built-in editors use reserved names and cannot be overridden by custom editors. They appear automatically based on validation rules you configure in your sheet data.
For detailed information on configuring data validation rules and examples of list and date validation, see the Data Validation article.
Cell Editors with Specialized Components
You can extend existing Kendo UI for Angular components by wrapping them in custom components to create specialized cell editors with predefined configurations. This approach allows you to tailor standard components to specific business requirements while maintaining their core functionality.
The following example demonstrates a project management Spreadsheet that combines a specialized ColorPalette editor with a Rating editor, showcasing multiple cell editor implementation approaches:
The primary technique for creating custom-configured editors is to wrap existing Kendo UI for Angular components in your own Angular components. The wrapping approach enables you to:
- Preconfigure component properties with business-specific settings (such as predefined color palettes, limited value ranges, or custom validation rules).
- Add custom behavior and data transformation logic without modifying the original component.
- Create reusable specialized cell editors that can be used across multiple Spreadsheets.
The wrapping approach demonstrated in the demo above is achieved through the following steps:
-
Create a custom component that wraps the ColorPalette component and define a custom palette with the desired colors:
typescript@Component({ selector: 'status-color-palette', standalone: true, imports: [ColorPaletteComponent], template: ` <kendo-colorpalette [palette]="statusColors" [columns]="3" (valueChange)="valueChange.emit($event)" ></kendo-colorpalette> `, }) export class StatusColorPaletteComponent { public statusColors = [ '#4CAF50', '#2196F3', '#FF9800', '#F44336', '#9E9E9E', '#9C27B0' ]; @Output() public valueChange = new EventEmitter<string>(); } -
Use the wrapper component in your Spreadsheet cell editor configuration, treating it like any other custom editor:
typescriptpublic customCellEditors: SpreadsheetCellEditorOptions[] = [ { name: 'status', component: StatusColorPaletteComponent, // Use the wrapper component actions: [ { name: 'valueChange', handler: (args: SpreadsheetCellEditorHandlerArgs) => { const selectedColor = args.originalEvent; const statusText = this.getStatusFromColor(selectedColor); // Set text and apply visual color args.range.value(statusText); args.range.background(selectedColor); } } ], icon: 'droplet', svgIcon: dropletIcon } ];