Kendo UI for jQuery Spreadsheet Overview

The Spreadsheet allows you to edit and visualize tabular data by using cell formatting options, styles, and themes.

The Spreadsheet supports Internet Explorer 9 and later versions. The component is primarily targeted at desktop users and, therefore, its performance and functionalities on mobile devices are limited.

Kendo UI for jQuery Kendoka image

The Spreadsheet is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the Spreadsheet

To initialize the Spreadsheet, use an empty <div> element. For more information, refer to the article on widget initialization in Kendo UI.


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

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

Basic Configuration

The Spreadsheet instance exposes methods for sheet instance retrieval, insertion, and deletion.

  • A common method is the activeSheet method.
  • The sheet object instance interface enables you to configure the settings and data on the sheet level.
  • You can use the range method for retrieval of 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.

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

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

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

        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet"); // The component instance.

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

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

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

Functionality and Features

See Also

In this article