Adding a TextBox or TextArea to the Kendo UI Spreadsheet Toolbar

Environment

Product	Version
Spreadsheet for Progress® Kendo UI®	2023.3.1114

Description

I want to add an interactive TextBox or TextArea to the toolbar of a Kendo UI Spreadsheet. Is there a way to do this?

Solution

To add a TextBox or TextArea to the Kendo UI Spreadsheet's toolbar, you can follow these steps:

1. Initialize the Spreadsheet component with a custom template for the toolbar.
2. Add a div element with an id for the TextBox and initialize it as a Kendo UI TextBox.
3. Add a textArea element with an id for the TextArea and initialize it as a Kendo UI TextArea.

Here is an example of how to achieve this using JavaScript:

$("#spreadsheet").kendoSpreadsheet({
  toolbar: {
    home: [
      {
        template: "<input id='textBoxSpreadSheet' />"
      },
      {
        template: "<textArea id='textareaSpreadSheet' />"
      },
      "open",
      "exportAs",
      ["cut", "copy", "paste"],
      ["bold", "italic", "underline"],
      "backgroundColor", 
      "textColor",
      "borders",
      "fontSize", 
      "fontFamily",
      "alignment",
      "textWrap",
      ["formatDecreaseDecimal", "formatIncreaseDecimal"],
      "format",
      "merge",
      "freeze",
      "filter",
    ],
  }
});

$("#textBoxSpreadSheet").kendoTextBox();

$("#textareaSpreadSheet").kendoTextArea({
  rows: 1,
  resize: "both"
});

You can find a live example of this implementation in the Progress Kendo UI Dojo.