The Kendo UI for jQuery Grid widget wrapped as a React component.
npm install kendo-ui-react-jquery-gridThe Kendo UI for jQuery grid widget wrapped as a React component.
WARNING: Must 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
`bash`
npm i -S kendo-ui-react-jquery-grid
`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import KendoGrid from 'kendo-ui-react-jquery-grid';
//Don't forget CSS, webpack used to include CSS
import 'kendo/css/web/kendo.common.min.css';
import 'kendo/css/web/kendo.default.min.css';
var App = React.createClass({
render: function() {
return (
Car Make
Car Model
Year
Category
Air Conditioner
Volvo
S60
2010
Saloon
Yes
Audi
A4
2002
Saloon
Yes
BMW
535d
2006
Saloon
Yes
BMW
320d
2006
Saloon
No
VW
Passat
2007
Saloon
No
VW
Passat
2008
Saloon
Yes
Peugeot
407
2006
Saloon
Yes
Honda
Accord
2008
Saloon
No
Alfa Romeo
159
2008
Saloon
No
Nissan
Almera
2001
Saloon
Yes
Mitsubishi
Lancer
2008
Saloon
Yes
Opel
Vectra
2008
Saloon
Yes
Toyota
Avensis
2006
Saloon
No
Toyota
Avensis
2008
Saloon
Yes
Toyota
Avensis
2008
Saloon
Yes
Audi
Q7
2007
SUV
Yes
Hyundai
Santa Fe
2012
SUV
Yes
Hyundai
Santa Fe
2013
SUV
Yes
Nissan
Qashqai
2007
SUV
Yes
Mercedez
B Class
2007
Hatchback
Yes
Lancia
Ypsilon
2006
Hatchback
Yes
);
}
});
ReactDOM.render(
`
Every KUI React Wrapper can make use of the following React props:
* optionsmethods
* events
* unbindEvents
* triggerEvents
*
Each is demonstrated below using a KUI React wrapper.
`javascript``
//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
close:function(){console.log('dropdown closed')},
select:function(){console.log('item selected')},
open:function(){console.log('dropdown opened')}
}}
//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",
]}>
* Grid demos: http://demos.telerik.com/kendo-ui/grid/index
* Grid docs: http://docs.telerik.com/kendo-ui/controls/data-management/grid/overview
* Grid API: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid