Getting Started with the Spreadsheet
This guide demonstrates how to get up and running with the Kendo UI for jQuery Spreadsheet.
After the completion of this guide, you will achieve the following end result:
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Products",
rows: [
{
cells: [{
value: 'Product', background: 'lightgreen', color: 'darkgreen', fontSize: 14
},{
value: "Price", background: 'lightgreen', color: 'darkgreen', fontSize: 14
},{
value: "Profit", background: 'lightgreen', color: 'darkgreen', fontSize: 14
}]
},
{
cells: [{
value: 'Bread'
},{
value: 12.39, format: "$#,##0.00"
},{
formula: 'B2 * 0.07'
}]
}
],
},{
name: "Sheet2"
}]
});
</script>
1. Create a Div Element
First, create a <div> element on the page where you want to initialize the component.
<div id="spreadsheet"></div>
2. Initialize the Spreadsheet
In this step, initialize the Spreadsheet from the <div> element.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
</script>
3. Add Sheets and Cells with Data
Next, populate the Spreadsheet with data.
You can add multiple sheets in the sheets configuration array. Use the sheets.rows and sheets.rows.cells options to define the data.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Products",
rows: [
{
cells: [{
value: 'Product'
},{
value: "Price"
},{
value: "Profit"
}]
},
{
cells: [{
value: 'Bread'
},{
value: 12.39
}]
}
],
},{
name: "Sheet2"
}]
});
</script>
4. Add Formula in the Cells
You can use the formula method to add formulas, reference other cells and sheets, and calculate values. You can find the full list of the supported formulas and functions here.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Products",
rows: [
{
cells: [{
value: 'Product'
},{
value: "Price"
},{
value: "Profit"
}]
},
{
cells: [{
value: 'Bread'
},{
value: 12.39
},{
formula: 'B2 * 0.07'
}]
}
],
},{
name: "Sheet2"
}]
});
</script>
5. Customize the Cells Appearance
The Spreadsheet component provides multiple configuration options that let you customize the cells appearance. You can use the format configuration to format the numbers and dates displayed in the cells. You can also customize the font-size, color, borders, etc.
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
name: "Products",
rows: [
{
cells: [{
value: 'Product', background: 'lightgreen', color: 'darkgreen', fontSize: 14
},{
value: "Price", background: 'lightgreen', color: 'darkgreen', fontSize: 14
},{
value: "Profit", background: 'lightgreen', color: 'darkgreen', fontSize: 14
}]
},
{
cells: [{
value: 'Bread'
},{
value: 12.39, format: "$#,##0.00"
},{
formula: 'B2 * 0.07'
}]
}
],
},{
name: "Sheet2"
}]
});
</script>