React Component Library for Kendo UI Widgets. There exists a React Component named for every Kendo widget in the kendo.ui namespace. Tested on React 0.12 and KendoUI 2014.3.1411.
$ npm install react-kendo <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<link href='http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css' rel='stylesheet'>
<!-- and so forth... -->Please note: Kendo Professional Components require a License.
var React = require('react');
React.Kendo = require('react-kendo');
/**
* Instead of, e.g.
* $('#my-splitter').kendoSplitter(splitterOptions);
*/
var splitterOptions = {
orientation: 'horizontal',
panes: [
{ collapsible: false, size: '300px' },
{ resizable: true }
]
};
var treeOptions = { /* ... */ };
var gridOptions = { /* ... */ };
var Workstation = React.createClass({
render: function () {
return (
<React.Kendo.Splitter options={splitterOptions}>
<React.Kendo.TreeView options={treeOptions} />
<React.Kendo.Grid options={gridOptions} />
</React.Kendo.Splitter>
);
}
});A React Component that represents a Kendo Template.
Easily create a Kendo Template from a React Component. Additionally mixin
React.Kendo.TemplateMixin.
var MyListItem = React.createClass({
mixins: [
React.Kendo.TemplateMixin
],
render: function () {
var item = this.props.item;
return (
<span>{item.title}</span>
);
}
});
var KendoList = React.createClass({
render: function () {
return (
<React.Kendo.ListView options={
template: function (item) {
return React.Kendo.Template(<MyListItem item={item} />);
}
} />
);
}
});Use this component for Kendo Grid Row Templates.
var MyGridRow = React.createClass({
mixins: [
React.Kendo.TemplateMixin
],
render: function () {
var row = this.props.row;
return (
<span>{row.myField}</span>
);
}
});
var KendoList = React.createClass({
render: function () {
return (
<React.Kendo.Grid options={
template: function (row) {
return React.Kendo.RowTemplate(<MyGridRow row={row} />);
}
} />
);
}
});MIT