New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Cell Editors

  • Home
  • Insert
  • Data
  • Open...
  • Export...
  • Undo
  • Redo
  • Save
  • Paste
  • Cut
  • Copy
  • Bold
  • Italic
  • Underline
  • Link
  • Insert Comment
  • Insert image
  • Arial
  • Pick Color(Current Color is blank)
  • Pick Color(Current Color is blank)
  • All borders
    • All borders
    • Inside borders
    • Inside horizontal borders
    • Inside vertical borders
    • Outside borders
    • Left border
    • Top border
    • Right border
    • Bottom border
    • No border
  • Pick Color(Current Color is blank)
  • Horizontal alignment
    • Align Left
    • Align Center
    • Align Right
    • Justify
  • Vertical alignment
    • Align Top
    • Align Middle
    • Align Bottom
  • Wrap text
  • Merge Cells
    • Merge Cells
    • Merge Horizontally
    • Merge Vertically
    • Unmerge
  • Format
    • Automatic
    • Number
    • Percent
    • Financial
    • Currency
    • Date
    • Time
    • Date time
    • Duration
    • More formats...
  • Increase decimal
  • Decrease decimal
  • Freeze panes
    • Freeze panes
    • Freeze rows
    • Freeze columns
    • Unfreeze panes
  • Filter
  • Toggle gridlines
  • Add column left
    • Add column left
    • Add column right
    • Add row above
    • Add row below
  • Delete cells
    • Delete column
    • Delete row
  • Sort range A to Z
    • Sort range A to Z
    • Sort range Z to A
  • Filter
  • Data Validation
  • Cut
  • Copy
  • Paste
  • Hide
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete

Custom editors are helpers that make it easier for the user to enter a correct value.

  • 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.

  • 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 should currently have an edit method, and an icon property, as explained below.

      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. Use this option to position the editor near the cell, for example.
      • callback - A function which your editor calls when a value is selected. It receives the value and an optional second argument parse. When parse is true, the value should be a string and it is then parsed as if input by the end user through the inline editor. Use this option to return a formula, for example - callback("=sum(a1:a5)", true).

      The icon property is a string which contains a CSS class name that is to be applied to the drop-down button.

    • When the editor is a function, it is called the first time a cell, having this editor, is displayed. It returns an object as in the case above - having the edit method and the icon property, and the result is cached. Use this trick to delay the initialization of the editor until it is first needed.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SpreadSheet_Examples_Custom_Editors_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container no-bg">
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1" ColumnWidth="100">
        </telerik:RadSpreadsheet>
    </div>
    <div class="rssSlide" style="display: none;">
        <div class="rssPopup rssFilterMenuPopup rssSkin">
            <telerik:RadColorPicker runat="server" ID="SpreadsheetColorPickerDropDown">
            </telerik:RadColorPicker>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance