A ReactJS Wrapper for The KendoUI Library

A ReactJS Wrapper for The KendoUI Library

React Component Library for Kendo UI Widgets. There exists a React Component named for every Kendo widget in the kendo.ui, kendo.ui.mobile and kendo.ui.dataviz namespaces. Tested on React 0.14 and KendoUI 2015.2.902.

kendo-ui-react - NOT MAINTAINED

React Component Library for Kendo UI Widgets. There exists a React Component named for every Kendo widget in the kendo.ui, kendo.ui.mobile and kendo.ui.dataviz namespaces. Tested on React 0.14 and KendoUI 2015.2.902.

This library is based on react-kendo which appears to be inactive.

Install

$ npm install kendo-ui-react --save
  <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.

Usage

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.

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. Easily create a Kendo Template from a React Component. Additionally mixin React.Kendo.TemplateMixin.

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.

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={...} />
    );
  }
});

Download Details:

Author: jakubkottnauer

Source Code: https://github.com/jakubkottnauer/kendo-ui-react

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.