@progress/kendo-spreadsheet-react-wrapper/docs/custom-cell-editors.md

Kendo UI Spreadsheet wrapper for React

---
title: Custom Cell Editors
page_title: Custom Cell Editors - Spreadsheet - Kendo UI for React
description: "Implement and use custom editors in the Kendo UI Spreadsheet wrapper for React."
slug: custom_cell_editors_spreadsheet
position: 4
---

# Custom Cell Editors

Custom editors are helpers that facilitate the user input of correct values.

For example, a custom editor allows the user to enter a date in a cell by picking it from a calendar rather than typing it. This functionality is achieved by applying data validation with the `Date` criteria, and selecting the **Display button to show calendar** checkbox. Another built-in editor is for the `List` validation criterion—it displays a popup displaying the allowed values.

## Basic Concepts

To define custom editors, use `kendo.spreadsheet.registerEditor(name, editor)`. The `name` is an ID of your choice which you will later use to select this particular editor on a `Range`. The `editor` can be an object or a function. As an object, it requires you to provide a current `edit` method and an `icon` property.

## Configuration

The `edit(options)` method is invoked with the following options:

* `range`—The cell that is currently selected as a `Range` object.
* `rect`—The rectangle with the position of the selected cell on the screen. It has `top`, `left`, `width`, `height`, `right`, and `bottom` properties. Can be used to position the editor near the cell, for example.
* `callback`—A function which the editor calls when a value is selected. It receives the `value` and an optional second `parse` argument. When `parse` is `true`, the `value` has to be a string. It is then parsed as an input by the end user through the inline editor. Can be used to return a formula—for example`callback("=sum(a1:a5)", true)`.

The `icon` property is a string which contains a CSS class name that will be applied to the drop-down button. When the `editor` is a function, the first time it called, a cell which contains this editor is displayed. It returns an object (similar to the previous case) which has the `edit` method and the `icon` property and the result is cached. You can use this approach to delay the initialization of the editor until it is needed for the first time.

> The Spreadsheet wrapper component for React is a wrapper version of the Kendo UI Spreadsheet widget for jQuery. As a result, the Spreadsheet wrapper component for React does not support the implementation of other React components as custom editors.

The following example demonstrates how to set up a color-picking custom editor. After the editor is defined, you can apply it to any cell through the API.

{% meta height:650 %}
```jsx-preview
class SpreadsheetContainer extends React.Component {

    constructor(props) {
            super(props);
            this.sheets = [{
               rows: [{
                   cells: [
                       { value: "Select color:", bold: true },
                       { background: "#fef0cd",
                         editor: "color" }
                   ]
               }]
           }]
    }

    componentDidMount= (e) => {
        window.JSZip = jszip.default
        kendo.spreadsheet.registerEditor("color", function(){
        var context, dlg, model;

        // Further delay the initialization of the UI until the `edit` method is
        // actually called, so here just return the object with the required API.

        return {
            edit: function(options) {
                context = options;
                open();
            },
            icon: "k-icon k-i-background"
        };

        // This function actually creates the UI if not already there, and
        // caches the dialog and the model.
        function create() {
            if (!dlg) {
                model = kendo.observable({
                    value: "#000000",
                    ok: function() {
                        // This is the result when OK is clicked. Invoke the
                        // callback with the value.
                        context.callback(model.value);
                        dlg.close();
                    },
                    cancel: function() {
                        dlg.close();
                    }
                });
                var el = $("<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color'>" +
                           "  <div data-role='flatcolorpicker' data-bind='value: value'></div>" +
                           "  <div style='margin-top: 1em; text-align: right'>" +
                           "    <button style='width: 5em' class='k-button' data-bind='click: ok'>OK</button>" +
                           "    <button style='width: 5em' class='k-button' data-bind='click: cancel'>Cancel</button>" +
                           "  </div>" +
                           "</div>");
                kendo.bind(el, model);

                // Cache the dialog.
                dlg = el.getKendoWindow();
            }
        }

        function open() {
            create();
            dlg.open();
            dlg.center();

            // If the selected cell already contains some value, reflect
            // it in the custom editor.
            var value = context.range.value();
            if (value != null) {
                model.set("value", value);
            }
        }
    });
    }

    render() {
        return (
            <div>
                <Spreadsheet sheets={this.sheets}/>
            </div>
        );
     }
    }
ReactDOM.render(
    <SpreadsheetContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}


## Suggested Links

* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)