kendo-ui-react-jquery-spreadsheet
The Kendo UI for jQuery Spreadsheet widget wrapped as a React component.
WARNING: Must npm install professional version of Kendo UI using credentials.
You'll need to setup a .netrc
file on your local system. This file contains the login (username & password) of the account on telerik.com in which you purchased Kendo UI professional or DevCraft.
Below are the instructions for both Windows and Mac users.
On Windows:
Create a text file called \_netrc
in your home directory (e.g. c:\users\jane\_netrc
).
Next, Declare a HOME environment variable.
EXAMPLE
C:\> SETX HOME %USERPROFILE%
Add the credentials using the format in the example above.
Git might have problems resolving your home directory if it contains spaces in its path—for example, c:\Documents and Settings\jane
). Therefore, update your %HOME% environment variable to point to a directory having no spaces in its name.
On Mac:
Create a file called .netrc
in your home directory ~/.netrc
(i.e /User/USERNAME/.netrc
). Make sure you modify the file permissions to make it readable only to you.
Add your credentials to the ~/.netrc
(i.e /User/USERNAME/.netrc
) file using the format from the example below.
EXAMPLE:
machine bower.telerik.com
login my-telerik.identity@example.com-here
password my-password-here
Install
npm i kendo-ui-react-jquery-spreadsheet
Usage Example
;;; //Don't forget CSS, webpack used to include CSS;; var sheets = name: "Food Order" mergedCells: "A1:G1" "C15:E15" rows: height: 70 cells: index: 0 value: "Invoice #52 - 06/23/2015" fontSize: 32 background: "rgb(96,181,255)" textAlign: "center" color: "white" height: 25 cells: value: "ID" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" value: "Product" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" value: "Quantity" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" value: "Price" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" value: "Tax" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" value: "Amount" background: "rgb(167,214,255)" textAlign: "center" color: "rgb(0,62,117)" background: "rgb(167,214,255)" color: "rgb(0,62,117)" cells: value: 216321 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: "Calzone" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 1 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 1239 format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C3*D3*0.2" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C3*D3+E3" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" cells: value: 546897 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: "Margarita" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 2 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 879 format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C4*D4*0.2" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C4*D4+E4" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" cells: value: 456231 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: "Pollo Formaggio" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 1 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 1399 format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C5*D5*0.2" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C5*D5+E5" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" cells: value: 455873 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: "Greek Salad" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 1 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 949 format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C6*D6*0.2" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C6*D6+E6" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" cells: value: 456892 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: "Spinach and Blue Cheese" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 3 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 1149 format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C7*D7*0.2" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C7*D7+E7" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" cells: value: 546564 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: "Rigoletto" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 1 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 1099 format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C8*D8*0.2" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C8*D8+E8" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" cells: value: 789455 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: "Creme Brulee" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 5 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 699 format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C9*D9*0.2" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C9*D9+E9" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" cells: value: 123002 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: "Radeberger Beer" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 4 textAlign: "center" background: "rgb(229,243,255)" color: "rgb(0,62,117)" value: 499 format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C10*D10*0.2" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" formula: "C10*D10+E10" format: "$#,##0.00" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" cells: value: 564896 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: "Budweiser Beer" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 3 textAlign: "center" background: "rgb(255,255,255)" color: "rgb(0,62,117)" value: 449 format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C11*D11*0.2" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" formula: "C11*D11+E11" format: "$#,##0.00" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" index: 11 cells: background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" background: "rgb(229,243,255)" color: "rgb(0,62,117)" index: 12 cells: background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" background: "rgb(255,255,255)" color: "rgb(0,62,117)" height: 25 index: 13 cells: background: "rgb(193,226,255)" color: "rgb(0,62,117)" background: "rgb(193,226,255)" color: "rgb(0,62,117)" background: "rgb(193,226,255)" color: "rgb(0,62,117)" background: "rgb(193,226,255)" color: "rgb(0,62,117)" value: "Tip:" background: "rgb(193,226,255)" color: "rgb(0,62,117)" textAlign: "right" verticalAlign: "bottom" formula: "SUM(F3:F11)*0.1" background: "rgb(193,226,255)" color: "rgb(0,62,117)" format: "$#,##0.00" bold: "true" verticalAlign: "bottom" background: "rgb(193,226,255)" color: "rgb(0,62,117)" height: 50 index: 14 cells: index: 0 background: "rgb(193,226,255)" color: "rgb(0,62,117)" index: 1 background: "rgb(193,226,255)" color: "rgb(0,62,117)" index: 2 fontSize: 20 value: "Total Amount:" background: "rgb(193,226,255)" color: "rgb(0,62,117)" textAlign: "right" index: 5 fontSize: 20 formula: "SUM(F3:F14)" background: "rgb(193,226,255)" color: "rgb(0,62,117)" format: "$#,##0.00" bold: "true" index: 6 background: "rgb(193,226,255)" color: "rgb(0,62,117)" columns: width: 100 width: 215 width: 115 width: 115 width: 115 width: 155 ; var App = React; ReactDOM;
React Props
Every KUI React Wrapper can make use of the following React props:
options
methods
events
unbindEvents
triggerEvents
Each is demonstrated below using a <KendoDropDownList>
KUI React wrapper.
<KendoDropDownList //only updates upon state change from above if widget supports setOptions() //don't define events here, do it in events prop options= //nothing new here, object of KUI configuration values dataSource: text: "Item1" value: "1" text: "Item2" value: "2" text: "Item3" value: "3" dataTextField: "text" dataValueField: "value" //updates if object is different from initial mount methods= //name of method and array of arguments to pass to method open: //send empty array if no arguments value:'2' //Right now, always updates events= //name of event, and callback {console} {console} {console} //updates if array is different from initial mount unbindEvents= //name of event to unbind, string "select" //updates if array is different from initial mount triggerEvents= //name of event to trigger, string "open" > <input className="kendoDropDownList" /></KendoDropDownList>
KUI API
- Spreadsheet demos: http://demos.telerik.com/kendo-ui/spreadsheet/index
- Spreadsheet docs: http://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview
- Spreadsheet API: http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet