| title | page_title | description |
|---|---|---|
Spreadsheet |
Configuration, methods and events of Kendo UI Spreadsheet |
Code examples for Spreadsheet UI widget configuration. Learn how to use methods and which events to set once the Spreadsheet UI widget is initialized. |
Represents the Kendo UI Spreadsheet widget. Inherits from Widget.
The name of the currently active sheet.
Must match one of the (sheet names)[#configuration-sheets.name] exactly.
The default column width in pixels.
The number of columns in the document.
The default cell styles to be applyied to sheet cells.
The background CSS color of the cell.
The text CSS color of the cell.
The font family for the cell.
The font size of the cell in pixels.
Sets the cell font to italic, if set to true.
Sets the cell font to bold, if set to true.
Sets the cell font to underline, if set to true.
Sets the cell wrap, if set to true.
The height of the header row in pixels.
The width of the header column in pixels.
Configures the Kendo UI Spreadsheet Excel export settings.
Specifies the file name of the exported Excel file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsExcel();
</script>
If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.
The URL of the server side proxy which will stream the file to the end user.
A proxy will be used when the browser isn't capable of saving files locally. Such browsers are IE version 9 and lower and Safari.
The developer is responsible for implementing the server-side proxy.
The proxy will receive a POST request with the following parameters in the request body:
- contentType: The MIME type of the file
- base64: The base-64 encoded file content
- fileName: The file name, as requested by the caller.
The proxy should return the decoded file with the "Content-Disposition" header set to
attachment; filename="<fileName.xslx>".
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
proxyURL: "/save"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsExcel();
</script>
Configures the Kendo UI Spreadsheet PDF export settings.
The area to export. Possible values:
- "workbook": Exports the full workbook, including all sheets.
- "sheet": Exports the active sheet.
- "selection": Exports the selected area on the active sheet.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
area: "selection"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The author of the PDF document.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
author: "John Doe"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The creator of the PDF document.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
creator: "John Doe"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The date when the PDF document is created. Defaults to new Date().
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
date: new Date("2014/10/10")
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Specifies the file name of the exported PDF file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
fileName: "Foo.pdf"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
An option indicating whether to fit the spreadsheet content to page width.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [
{ value: "A" }, { value: "B" }, { value: "C" },
{ value: "1" }, { value: "2" }, { value: "3" },
{ value: "4" }, { value: "5" }, { value: "6" },
{ value: "7" }, { value: "8" }, { value: "9" }
]
}]
}],
pdf: {
landscape: false,
fitWidth: true
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.
An option indicating whether to export the cell guidelines.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
guidelines: false
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
An option indicating whether to center the content horizontally.
See also vCenter.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
hCenter: true
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Specifies the keywords of the exported PDF file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
keywords: "food order"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Set to true to reverse the paper dimensions if needed such that width is the larger edge.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
landscape: false
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Specifies the margins of the page (numbers or strings with units). Supported units are "mm", "cm", "in" and "pt" (default).
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
margin: {
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
}
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The bottom margin. Numbers are considered as "pt" units.
The left margin. Numbers are considered as "pt" units.
The right margin. Numbers are considered as "pt" units.
The top margin. Numbers are considered as "pt" units.
Specifies the paper size of the PDF document. The default "auto" means paper size is determined by content.
The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).
Supported values:
- A predefined size: "A4", "A3" etc
- An array of two numbers specifying the width and height in points (1pt = 1/72in)
- An array of two strings specifying the width and height in units. Supported units are "mm", "cm", "in" and "pt".
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
paperSize: ["100mm", "50mm"]
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The URL of the server side proxy which will stream the file to the end user.
A proxy will be used when the browser is not capable of saving files locally, for example, Internet Explorer 9 and Safari.
The developer is responsible for implementing the server-side proxy.
The proxy will receive a POST request with the following parameters in the request body:
- contentType: The MIME type of the file
- base64: The base-64 encoded file content
- fileName: The file name, as requested by the caller.
The proxy should return the decoded file with the "Content-Disposition" header set to
attachment; filename="<fileName.pdf>".
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
proxyURL: "/save"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
A name or keyword indicating where to display the document returned from the proxy.
If you want to display the document in a new window or iframe,
the proxy should set the "Content-Disposition" header to inline; filename="<fileName.pdf>".
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
forceProxy: true,
proxyURL: "/save",
proxyTarget: "_blank"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Sets the subject of the PDF file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
subject: "Products"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
Sets the title of the PDF file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
title: "Products"
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
An option indicating whether to center the content vertically.
See also hCenter.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
vCenter: true
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>
The default row height in pixels.
The number of rows in the document.
An array defining the document sheets and their content.
The active cell in the sheet, e.g. "A1".
The name of the sheet.
An array defining the columns in this sheet and their content.
The zero-based index of the column. Required to ensure correct positioning.
The width of the column in pixels. Defaults to columnWidth.
The data source instance for this sheet.
See Bind to Data Source.
Defines the filtering criteria for this sheet, if any.
An array defining the filter configuration of individual columns.
An array of filter criteria for custom filters.
The criterion operator type.
Supported types vary based on the inferred column data type (inferred):
- Text
- contains - the text contains the value
- doesnotcontain - text does not contain the value
- startswith - text starts with the value
- endswith - text ends with the value
- Date
- eq - date is the same as the value
- neq - date is not the same as the value
- lt - date is before the value
- gt - date is after the value
- Number
- eq - is equal to the value
- neq - is not equal to the value
- gte - is greater than or equal to the value
- gt - is greater than the value
- lte - is less than or equal to the value
- lt - is less than the value
The value for the criteria operator.
The filter to apply to this column.
The supported filters are:
- value - filters based on unique values
- custom - applies custom filtering criteria
- top - filters the top or bottom records
- dynamic - filters based on dynamic criteria
The index of the column relative to the filter range.
The logical operator to apply to filter criteria.
Possible values are and, or.
The filter sub-type, if any.
Applicable types according to the main filter.
- top
- topNumber
- topPercent
- bottomNumber
- bottomPercent
- dynamic
- aboveAverage
- belowAverage
- tomorrow
- today
- yesterday
- nextWeek
- thisWeek
- lastWeek
- nextMonth
- thisMonth
- lastMonth
- nextQuarter
- thisQuarter
- lastQuarter
- nextYear
- thisYear
- lastYear
- yearToDate
The filter value for filters that require a single value, e.g. "top".
The filter values for filters that support multiple values.
The active range for the filter, e.g. "B1:D8".
The number of frozen columns in this sheet.
The number of frozen rows in this sheet.
An array of merged cell ranges, e.g. "B1:D2".
The row data for this sheet.
The cells for this row.
The background color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The style information for the bottom border of the cell.
The bottom border color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The width of the border in pixels.
The style information for the left border of the cell.
The left border color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The width of the border in pixels.
The style information for the top border of the cell.
The top border color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The width of the border in pixels.
The style information for the right border of the cell.
The right border color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The width of the border in pixels.
The font color of the cell.
Many standard CSS formats are supported, but the canonical form is "#ccff00".
The font family for the cell.
The font size of the cell in pixels.
Sets the cell font to italic, if set to true.
Sets the cell font to bold, if set to true.
Disables the cell, if set to false.
The format of the cell text.
See Create or delete a custom number format on MS Office.
The cell formula without the leading equals sign, e.g. A1 * 10.
The zero-based index of the cell. Required to ensure correct positioning.
The hyperlink (URL) of the cell.
The text align setting for the cell content.
Available options are:
- left
- center
- right
- justify
Sets the cell font to underline, if set to true.
The cell value.
The validation rule applied to the cell.
<div id="spreadsheet"></div>
<script type="text/javascript" charset="utf-8">
$("#spreadsheet").kendoSpreadsheet({
sheets: [
{
name: "Populated" ,
rows: [
{
index: 2,
cells: [
{ index: 3, background: "red", color: "green", value: "D3" },
{ index: 10, color: "blue", value: "a value" }
]
},
{
index: 5,
cells: [
{
index: 0,
color: "red",
value: "A6",
validation: {
from: "1",
to: "2",
comparerType: "between",
dataType: "number",
messageTemplate: "Number should match the validation."
}
}
]
}
]
}
]
});
</script>
Defines the validation type. The acceptable options are reject or warning
Defines the comparer type used to validate the cell value, e.g. "greaterThan", "between" and etc.
Defines the data type of the cell value.
Defines a formula or value used for the comparison process. Used as only if comparer type does not require second argument.
A boolean value indicating if a button for selecting list items (dataType set to list) should be displayed.
Defines a formula or value used for the comparison process. Will be used if comparer type requires second argument.
Specifies whether to allow nulls.
Defines the hint message that will be displayed if value is invalid.
The template is giving an access to the following variables: from{0}, to{1}, fromFormula{2}, toFormula{3}, dataType{4}, type{5} and comparerType{6}.
<div id="example">
<div id="spreadsheet" style="width: 100%;"></div>
<script>
$(function() {
$("#spreadsheet").kendoSpreadsheet({
columns: 26,
rows: 30,
sheetsbar: false,
excel: {
// Required to enable Excel Export in some browsers
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
},
sheets: [
{
name: "Validation Template",
rows: [
{
height: 25,
cells: [
{
value: "15",
validation: {
dataType: "number",
from: "B1",
to:"C1",
allowNulls: true,
comparerType:"between" ,
type: "reject",
titleTemplate: "Number validation error",
messageTemplate: "The number have to be between {0} and {1}"
}
},
{
value: "10",
},
{
value: "20",
},
]
},
],
columns: [
{
width: 100
},
{
width: 215
},
{
width: 115
},
{
width: 115
},
{
width: 115
}
]
},
{
name: "ListValues",
rows: [ //A1:B1
{
cells: [
{
value: true
},
{
value: false
}
]
}
]
}
]
});
});
</script>
</div>
Defines the hint title that will be displayed if value is invalid.
The vertical align setting for the cell content.
Available options are:
- top
- center
- bottom
Will wrap the cell content if set to true.
The row height in pixels. Defaults to rowHeight.
The absolute row index. Required to ensure correct positioning.
The table row element role, in the context of the Grid table structure.
The selected range in the sheet, e.g. "A1:B10".
A boolean value indicating if the sheet grid lines should be displayed.
Defines the sort criteria for the sheet.
Specifies the sort options for individual columns.
Indicates if the data in the cell should be sorted ascending (true) or descending or (false).
The index of the column within the sheet.
For example, column C will have index 2.
The sorted range, e.g. "A1:D5".
A boolean value indicating if the sheetsbar should be displayed.
A boolean value indicating if the toolbar should be displayed.
A boolean value indicating if the "home" tab should be displayed or a collection of tools that will be shown in the "home" tab.
The available tools are:
- open
- exportAs
- [cut, copy, paste]
- [bold, italic, underline]
- backgroundColor, textColor
- borders
- fontSize, fontFamily
- alignment
- textWrap
- [formatDecreaseDecimal, formatIncreaseDecimal]
- format
- merge
- freeze
- filter
Those tools which are part of a tool group are defined as array. For example ["bold", "italic", "underline"]
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
home: [ ["bold", "italic"], "format" ]
}
});
</script>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
home: false
}
});
</script>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
home: [
// for all available options, see the toolbar items configuration
// http://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar#configuration-items
{
type: "button",
text: "Custom",
spriteCssClass: "k-icon k-font-icon k-i-cog",
click: function() {
window.alert("custom tool");
}
}
]
}
});
</script>
A boolean value indicating if the "insert" tab should be displayed or a collection of tools that will be shown in the "insert" tab.
The available tools are:
- [ addColumnLeft, addColumnRight, addRowBelow, addRowAbove ]
- [ deleteColumn, deleteRow ]
Those tools which are part of a tool group are defined as array. For example ["deleteColumn", "deleteRow"]
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
insert: [ ["deleteColumn", "deleteRow"] ]
}
});
</script>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
insert: false
}
});
</script>
A boolean value indicating if the "insert" tab should be displayed or a collection of tools that will be shown in the "insert" tab.
The available tools are:
- sort
- filter
- validation
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
data: ["validation"]
}
});
</script>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
toolbar: {
data: false
}
});
</script>
Gets or sets the active sheet.
The sheet to set as active.
kendo.spreadsheet.Sheet the active sheet.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{ name: "Sheet1" }, { name: "Sheet2" }]
});
var sheets = $("#spreadsheet").data("kendoSpreadsheet").sheets();
$("#spreadsheet").data("kendoSpreadsheet").activeSheet(sheets[1]);
</script>
Gets the cell contextMenu instance.
kendo.ui.ContextMenu The menu instance.
Gets the row header contextMenu instance.
kendo.ui.ContextMenu The menu instance.
Gets the column header contextMenu instance.
kendo.ui.ContextMenu The menu instance.
Returns an array with the sheets in the workbook.
Array the available sheets.
Clears the spreadsheets and populates it with data from the specified Excel (.xlsx) file.
Requires Internet Explorer 10 or a recent version of other browsers. The JSZip library is a
prerequisitefor the import from file functionality.
The file or blob, usually obtained through a file input.
Promise a promise that will be resolved when the import operation completes.
<input id="file" type="file" />
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
$("#file").on("change", function() {
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.fromFile(this.files[0]);
});
</script>
Initiates the Excel export. Also fires the excelExport event.
Calling this method could trigger the browser built-in popup blocker in some cases. To avoid that, always call it as a response to an end-user action e.g. button click.
<button id="export">Export to Excel</button>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}]
});
$("#export").click(function(e) {
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsExcel();
});
</script>
<!-- Load JSZIP library to enable Excel export -->
<script src="http://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/jszip.min.js"></script>
Initiates the PDF export. Also fires the pdfExport event.
Calling this method could trigger the browser built-in popup blocker in some cases. To avoid that, always call it as a response to an end-user action e.g. button click.
An options object with the same structure as the pdf options.
Promise A promise that will be resolved when the export completes. The same promise is available in the pdfExport event arguments.
<button id="export">Export to PDF</button>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdf: {
fileName: "Test.pdf"
}
});
$("#export").click(function(e) {
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF({ area: "selection" });
});
</script>
<!-- Load Pako library to enable PDF compression -->
<script src="http://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/pako_deflate.min.js"></script>
Returns a sheet matching the specified name, if any.
The name of the sheet to locate.
kendo.spreadsheet.Sheet the sheet that match the name.
Returns the index of the specified sheet.
The sheet to determine the index of.
Number the sheet index.
Locates a sheet by its index in the workbook.
The index of the sheet to locate.
kendo.spreadsheet.Sheet the sheet that match the index.
Inserts a sheet with the specified options.
The configuration options for the sheet.
The number of rows in this sheet.
The number of columns in this sheet.
The row height in this sheet in pixels.
The column width in this sheet in pixels.
The header row height in pixels.
The header column width in pixels.
The data source for this sheet.
The sheet state and data as Object. The schema follows the same structure as the widget configuration.
kendo.spreadsheet.Sheet the inserted sheet.
Moves the sheet to the specified index.
The sheet instance to move.
The new zero-based index of the sheet.
Removes the specified sheet.
The sheet instance to remove.
Renames the specified sheet.
The sheet instance to rename.
The new name of the sheet.
kendo.spreadsheet.Sheet the renamed sheet.
Serializes the workbook in the format defined in the configuration.
<div id="spreadsheet"></div>
<pre id="result"></pre>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}]
}]
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var data = spreadsheet.toJSON();
var json = JSON.stringify(data, null, 2);
$("#spreadsheet").remove();
$("#result").text(json);
</script>
Object the serialized workbook.
Loads the workbook data from an object with the format defined in the configuration.
All existing sheets and their data will be lost.
The object to load data from. This should be the deserialized object, not the JSON string.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.fromJSON({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}]
}]
});
</script>
Define a custom name to be available and used in formulas. If the function is not able to parse the name of the value, it will throw an error.
A new name to be defined. The names are case-insensitive.
It is possible to provide a name that already exists. In such cases, the value is silently updated.
To make the name available only in one sheet, qualify it in the way demonstrated in the next example.
The value has to be a valid formula in the form of a string, that is, without a leading = sign.
Generally, a name points to a reference. For maximum compatibility, it is recommended for you to use references here that are fully qualified (include the name of the sheet they refer to) and absolute (prefix both row and column with the $ sign).
hidden Boolean (default: false)
To hide this name from the custom names dropdown in the toolbar, pass true. Even if hidden is set to false, only reference names will be displayed in the dropdown.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
// cell reference
spreadsheet.defineName("MyCell", "Sheet1!$A$1");
// range reference
spreadsheet.defineName("MyRange", "Sheet1!$A$1:$C$3");
// qualified name
spreadsheet.defineName("Sheet1!Foo", "Sheet1!$B$2");
// relative reference (incompatible with other programs).
// relative refs in A1 notation are ambiguous, unless we know
// the cell where they are used, so we use the RC notation here:
spreadsheet.defineName("CellsAbove", "R1C[0]:R[-1]C[0]");
// arbitrary formula
spreadsheet.defineName("GoldenRatio", "(1+SQRT(5))/2");
</script>
After that, it is possible to use any of those names in formulas. For example, a formula like =SUM(CellsAbove) will return the sum of the cells above it, no matter where it sits. Relative references, such as the CellsAbove example, are not compatible with other spreadsheets, such as Excel, LibreOffice, or Google Sheets.
The "qualified" Sheet1!Foo name is visible without qualification only in formulas in Sheet1 and, for example, you can type =Foo * Foo. If you need the name in formulas from other sheets, you have to refer to it as =Sheet1!Foo.
Delete a name.
To delete a fully qualified name, prefix the name of the sheet - for example, spreadsheet.undefineName("Sheet1!Foo").
Triggered when sheet is inserted. Introduced in 2017 Q1.
The widget instance which fired the event.
If invoked the spreadsheet will not insert the sheet.
Triggered when sheet will be removed. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be removed.
If invoked the spreadsheet will not remove the sheet.
Triggered when sheet will be renamed. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be renamed.
The new sheet name.
If invoked the spreadsheet will not rename the sheet.
Triggered when sheet will be activated. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be activated.
If invoked the spreadsheet will not activate the sheet.
Triggered when column will be shown. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the column.
If invoked the spreadsheet will execute the change.
Triggered when row will be shown. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the row.
If invoked the spreadsheet will execute the change.
Triggered when column will be hidden. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the column.
If invoked the spreadsheet will execute the change.
Triggered when row will be hidden. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the row.
If invoked the spreadsheet will execute the change.
Triggered when column will be deleted. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the column.
If invoked the spreadsheet will execute the change.
Triggered when row will be deleted. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the row.
If invoked the spreadsheet will execute the change.
Triggered when column will be inserted. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the column.
If invoked the spreadsheet will execute the change.
Triggered when row will be inserted. Introduced in 2017 Q1.
The widget instance which fired the event.
The sheet instance which will be affected.
The index of the row.
If invoked the spreadsheet will execute the change.
Triggered when spreadsheet selection is changed. Introduced in 2017 Q1.
The widget instance which fired the event.
The Range that is selected.
Triggered when range format is changed from the UI. Introduced in 2017 Q1.
The widget instance which fired the event.
The Range which format is changed.
Triggered when a value in the spreadsheet has been changed. Introduced in 2016.Q1.SP1.
The widget instance which fired the event.
The Range that has triggered the change.
Triggered after the widget has completed rendering.
The widget instance which fired the event.
Fired when the user clicks the "Export to Excel" toolbar button.
The widget instance which fired the event.
The array of data items used to create the Excel workbook.
The Excel workbook configuration object. Used to initialize a kendo.ooxml.Workbook class. Modifications of the workbook will reflect in the output Excel document.
If invoked the spreadsheet will not save the generated file.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excelExport: function(e) {
e.workbook.fileName = "Spreadsheet1.xlsx";
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsExcel();
</script>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}]
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.bind("excelExport", function(e) {
e.workbook.fileName = "Spreadsheet1.xlsx";
});
spreadsheet.saveAsExcel();
</script>
Fired when the user clicks the "Open" toolbar button.
The widget instance which fired the event.
The file that is being imported.
If invoked the spreadsheet will not import the file.
A promise that will be resolved when the import operation completes.
The promise progress handler will be called periodically with the following arguments:
- sheet - The current sheet. An instance of kendo.spreadsheet.Sheet
- progress - Number if the range 0 to 1, indicating the progress of the current import operation
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
excelImport: function(e) {
e.promise
.progress(function(e) {
console.log(kendo.format("{0:P} complete", e.progress));
})
.done(function() {
alert("Export completed!");
});
}
});
// Click the Open command and select a file to import
</script>
Fired when the user initiates PDF export.
The widget instance which fired the event.
If invoked the spreadsheet will not save the generated file.
A promise that will be resolved when the export completes.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
rows: [{
cells: [{ value: "A" }, { value: "B" }, { value: "C" }]
}, {
cells: [{ value: "1" }, { value: "2" }, { value: "3" }]
}, {
cells: [{ value: "4" }, { value: "5" }, { value: "6" }]
}]
}],
pdfExport: function(e) {
e.promise.done(function() {
alert("Export completed!");
});
}
});
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
spreadsheet.saveAsPDF();
</script>