Skip to content

Commit

Permalink
Initial commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
jakubkottnauer committed Oct 9, 2015
1 parent 35b2eee commit 95aaa1b
Show file tree
Hide file tree
Showing 14 changed files with 745 additions and 23 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
*.sw*
node_modules

16 changes: 16 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"indent": 2,
"maxdepth": 6,
"maxlen": 120,
"esnext": true,
"expr": true,
"trailing": true,
"node": true,
"esnext": true,
"globals": {
"describe": true,
"it": true,
"before": true,
"after": true
}
}
19 changes: 19 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
language: node_js
node_js:
- '0.12'

sudo: false

notifications:
email: false

before_script:
- npm install react lodash

deploy:
provider: npm
email: [email protected]
on:
tags: true
repo: jakubkottnauer/kendo-ui-react
all_branches: true
22 changes: 0 additions & 22 deletions LICENSE

This file was deleted.

152 changes: 151 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,151 @@
# kendo-ui-react
# react-kendo

[![npm version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Dependency Status][daviddm-image]][daviddm-url]

React Component Library for Kendo UI Widgets. There exists a React Component
named for every Kendo widget in the
[kendo.ui](http://docs.telerik.com/kendo-ui/api/javascript/ui/ui), [kendo.ui.mobile](http://docs.telerik.com/kendo-ui/api/javascript/mobile/application) and [kendo.ui.dataviz](http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/) namespaces.
Tested on React 0.14 and KendoUI 2015.2.902.

This library is based on [react-kendo](https://github.com/tjwebb/react-kendo) which appears to be inactive.

## Install

```sh
$ npm install kendo-ui-react --save
```

```html
<script src="http://cdn.kendostatic.com/2015.2.902/js/kendo.all.min.js"></script>
<link href='http://cdn.kendostatic.com/2015.2.902/styles/kendo.common.min.css' rel='stylesheet'>
<!-- and so forth... -->
```

Please note: Kendo Professional Components require
[a License](http://www.telerik.com/purchase/kendo-ui).

## Usage
```js
var React = require('react');
var k = React.Kendo = require('kendo-ui-react');

/**
* 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 (
<k.Splitter options={splitterOptions}>
<k.TreeView options={treeOptions} />
<k.Grid options={gridOptions} />
</k.Splitter>
);
}
});
```

## Properties

### `options`
The main Kendo options object that is sent into the constructor. e.g.
`$('#my-splitter').kendoSplitter(options);`

### `tag`
The `tag` property specifies the html tag that the Kendo widget will be bound
to. This is `div` by default, but can be set to
[any tag supported by React](http://facebook.github.io/react/docs/tags-and-attributes.html#html-elements).

### `reactive`
Version 0.13 and later support automatically re-initializing the Kendo Widget
when the `options` property is updated. This is useful for re-loading Grids
with new data, among other things. This is `false` by default.

### `debug`
Set `debug=true` to log detailed information on the lifecycle events of your
kendo-ui-react component.

## Additional Components

### `React.Kendo.Template`

A React Component that represents a [Kendo Template](http://docs.telerik.com/kendo-ui/framework/templates/overview).
Easily create a Kendo Template from a React Component. Additionally mixin
`React.Kendo.TemplateMixin`.

```js
var k = React.Kendo;
var MyListItem = React.createClass({
mixins: [
k.TemplateMixin
],
render: function () {
var item = this.props.item;
return (
<span>{item.title}</span>
);
}
});
var KendoList = React.createClass({
render: function () {
return (
<k.ListView options={
template: function (item) {
return k.Template(<MyListItem item={item} />);
}
} />
);
}
});
```


## Supplemental Functions

`kendo-ui-react` also includes some extra functionality that isn't included in
Kendo. These functions are added to the Kendo components via React mixins.


### `Grid.enableDraggableRows(group, options)`

Invoke this function to make Grid rows draggable. This is not possible by
default in the kendo-ui library.

```js
var k = React.Kendo;
var KendoList = React.createClass({
componentDidMount: function () {
this.refs.grid.enableDraggableRows('myGroup', {
drag: function (e) {
// some custom stuff
}
});
},
render: function () {
return (
<k.Grid ref='grid' options={...} />
);
}
});
```


## License
MIT

[npm-image]: https://img.shields.io/npm/v/kendo-ui-react.svg?style=flat-square
[npm-url]: https://npmjs.org/package/kendo-ui-react
[travis-image]: https://img.shields.io/travis/jakubkottnauer/kendo-ui-react.svg?style=flat-square
[travis-url]: https://travis-ci.org/jakubkottnauer/kendo-ui-react
32 changes: 32 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "kendo-ui-react",
"version": "0.14",
"description": "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.14 and KendoUI 2015.2.902.",
"homepage": "https://github.com/jakubkottnauer/kendo-ui-react",
"main": "dist/kendo-ui-react.js",
"authors": [
"Jakub Kottnauer <[email protected]>"
],
"moduleType": [
"node"
],
"keywords": [
"react",
"kendo",
"react.js",
"react-component",
"kendo-ui",
"telerik",
"components",
"widgets",
"dataviz"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Loading

0 comments on commit 95aaa1b

Please sign in to comment.