Edit this page

Spreadsheet Overview

The Kendo UI Spreadsheet widget enables you to edit and visualize tabular data by using cell formatting options, styles, and themes.

Out of the box, the Spreadsheet supports:

  • Selection and activation of cells that are functionally similar to ones in Excel.
  • Selection of cell and background colors.
  • Validation, insertion, deletion, editing, and merging of cells.
  • Vertical and horizontal alignment of cells.
  • Formatting of cells, including the provision of fonts and font sizes, application of borders, rendering of content in bold, italics and underline styles.
  • Formatting of data, including the provision of the number, currency, accounting, date, time, percentage, fraction, scientific, text, special, and custom options.
  • Applying formulas in categories such as logical, text, date, and time.
  • Resizing, insertion, and deletion of rows and columns.
  • Multiple sheets.
  • Frozen panes.
  • Text wrapping.

Each of these features is exposed as a user interface (UI) to the end user and as API calls for further UI customization to the developer.

Important

The Spreadsheet supports Internet Explorer 9 or later versions.

Getting Started

Initializing the Spreadsheet

To instantiate the Spreadsheet, use an empty <div> element, as demonstrated in the following example.

Example

    <div id="spreadsheet">
    </div>

    <script>
        $("#spreadsheet").kendoSpreadsheet();
    </script>

For more details on the instantiation mechanism of Kendo UI widgets, refer to the article on widget initialization.

To find the detailed list of configuration options supported by the Spreadsheet, including sheet and data configuration, refer to the API reference of the Spreadsheet.

Using the Spreadsheet API

The Spreadsheet instance exposes methods for sheet instance retrieval, insertion, and deletion. The most commonly used one is the activeSheet method.

The sheet object instance interface enables you to get and set settings and data on the sheet level.

The range method is used to retrieve a range instance that you can use to manipulate one or more cell regions of the sheet. To retrieve the range method, use a string with an A1 or an RC notation.

The following example demonstrates how to set the value for a range of cells.

Example
    <div id="spreadsheet"></div>

    <script type="text/javascript" charset="utf-8">

        $("#spreadsheet").kendoSpreadsheet();

        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet"); // the widget instance

        var sheet = spreadsheet.activeSheet(); // the current active sheet

        var range = sheet.range("A1:B2"); // 2x2 cell range

        range.value("foo").color("green");
    </script>

Data Import and Export

The Spreadsheet offers methods for storing and loading data in a JSON format.

For more information on the data import and export functionality in the Spreadsheet, refer to the article on storing content as JSON.

The Spreadsheet features a built-in export-to-Excel functionality which is fully actionable in the browser.

Data Binding

You can bind individual sheets to a Data Source in a special data-driven mode.

For more information on the data-binding Spreadsheet functionality, refer to the article on binding the Spreadsheet to a data source.

Mobile Integration

The Spreadsheet is primarily targeted at desktop users. Its performance and functionalities are limited on mobile devices.

See Also

Other articles on the Kendo UI Spreadsheet:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy