A ReactJS Wrapper for The KendoUI Library

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

Buddha Community

A ReactJS Wrapper for The KendoUI Library

Byte Cipher

1617110327

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india

Top Reasons to Choose ReactJS for Web App Development - TopDevelopers.co

ReactJS, a JavaScript library that helps developers to build SEO Friendly web apps. Get to know more about ReactJS and why it is a good option for your next project.

#reactjs #javascript library #reactjs technology #reactjs developers #web app development

Top React JS App Development Company in USA | React JS Services

Hire ReactJS app developers for end-to-end services starting from development to customization with AppClues Infotech.

Are you looking for the best company in USA that provides high-quality ReactJS app development services? Having expertise in building robust and real-time mobile apps using React Native Library.

We can fully support your specific business idea with outstanding tech skills and deliver a perfect mobile app on time.

Our ReactJS App Development Services
• Custom ReactJS Development
• ReactJS Consulting
• React UX/UI development and design
• App modernization using React
• React Native mobile development
• Dedicated React development team
• Application migration to React

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top reactjs app development company in usa #hire best reactjs app developers #best reactjs app development services #custom reactjs app development agency #how to develop reactjs app #cost to build reactjs application

Why ReactJS is better for Web Application Development?

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.

#Why ReactJS is better for Web Application Development #Benefits of ReactJS #What is ReactJS? #ReactJS vs AngularJS

Epic Games Store ReactJS UI -NextJS, MaterialUI, ReactJS, TypeScript -Login Form Design #5

Hi, in this series we will try to build fullstack application with NestJS, NextJS, ReactJS, PostgreSQL and TypeScript. My aim is to build something bigger and more interesting. Features like authorization or using database are always tricky so I think it’s good to implement on your own to understand how they work. We will build both API and web application. Our app is a funny little approach to mimic something like a game library and we will try to recreate Epic Games Store.

Have you ever wondered how are real app design and written? In this series I will try to reproduce at least some functionalities of Epic Games Store. In the fifth episode I am recreating the login form. We’ll use NextJS, MaterialUI, ReactJS and TypeScript.

You can find me here:

https://twitter.com/wojciech_bilick
https://medium.com/@wojciech.bilicki
https://github.com/wojciech-bilicki


ignore

nextjs
materialui
reactjs
typescript
web design
html
web development
css
html5
css3
es6
programming
basics
tutorial
javascript
how to make a website
responsive design tutorial
web development tutorial
media queries
website from scratch
html css
responsive website tutorial
responsive web development
web developer
how to make a responsive website
how to build a website from scratch
how to build a website
build a website
How to

#reactjs ui #reactjs #materialui #nextjs #typescript #reactjs