Skip to content

kendo-labs/k-ui-react-jquery-wrappers

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Kendo UI (for jQuery) React Component Wrappers

React component wrappers (around Kendo UI) that you can include via npm so that Kendo UI for jQuery widgets can be used in a React app.

Read more about it here: http://developer.telerik.com/featured/using-kendo-ui-jquery-react-app/

For example:

<KendoDropDownList options={{index: 0}}>
	<select>
		<option>S - 6 3/5"</option>
		<option>M - 7 1/4"</option>
		<option>L - 7 1/8"</option>
		<option>XL - 7 5/8"</option>
	</select>
</KendoDropDownList>

Available Wrappers on npm

Feature Core (free) Professional ($) wrapper on npm github
Data Management
Grid npm install kendo-ui-react-jquery-grid source
Spreadsheet BUG telerik/kendo-ui-core#2162
ListView npm install kendo-ui-react-jquery-listview source
PivotGrid npm install kendo-ui-react-jquery-pivotgrid source
TreeList npm install kendo-ui-react-jquery-treelist source
Editors
AutoComplete npm install kendo-ui-react-jquery-autocomplete source
Color Picker npm install kendo-ui-react-jquery-colorpicker source
ComboBox npm install kendo-ui-react-jquery-combobox source
DatePicker npm install kendo-ui-react-jquery-datepicker source
DateTimePicker npm install kendo-ui-react-jquery-datetimepicker source
DropDownList npm install kendo-ui-react-jquery-dropdownlist source
Editor BUG telerik/kendo-ui-core#2176
MaskedTextBox npm install kendo-ui-react-jquery-maskedtextbox source
MultiSelect npm install kendo-ui-react-jquery-multiselect source
NumericTextBox npm install kendo-ui-react-jquery-numerictextbox source
Slider npm install kendo-ui-react-jquery-slider source
TimePicker npm install kendo-ui-react-jquery-timepicker source
Upload npm install kendo-ui-react-jquery-upload source
Validator npm install kendo-ui-react-jquery-validator source
Charts
Area
Bar
Box Plot
Bubble
Bullet
Donut
Funnel
Line
Pie
Polar
Radar
Range Bar
Scatter
Waterfall
npm install kendo-ui-react-jquery-charts source
Sparklines npm install kendo-ui-react-jquery-sparklines source
Stock Charts npm install kendo-ui-react-jquery-stockchart source
TreeMap npm install kendo-ui-react-jquery-treemap source
Gauges
LinearGauge npm install kendo-ui-react-jquery-lineargauge source
RadialGauge npm install kendo-ui-react-jquery-radialgauge source
Barcodes
Barcode npm install kendo-ui-react-jquery-barcode source
QR Code npm install kendo-ui-react-jquery-qrcode source
Diagram and Maps
Diagram BUG telerik/kendo-ui-core#2202
Map BUG telerik/kendo-ui-core#2203
Scheduling
Calendar npm install kendo-ui-react-jquery-calendar source
Gantt npm install kendo-ui-react-jquery-gantt source
Scheduler npm install kendo-ui-react-jquery-scheduler source
Layout
Dialog npm install kendo-ui-react-jquery-dialog source
Notification npm install kendo-ui-react-jquery-notification source
Responsive Panel npm install kendo-ui-react-jquery-responsivepanel source
Splitter npm install kendo-ui-react-jquery-splitter source
Tooltip npm install kendo-ui-react-jquery-tooltip source
Window npm install kendo-ui-react-jquery-window source
Media
MediaPlayer npm install kendo-ui-react-jquery-mediaplayer source
Navigation
Button npm install kendo-ui-react-jquery-button source
Menu npm install kendo-ui-react-jquery-menu source
PanelBar npm install kendo-ui-react-jquery-panelbar source
TabStrip npm install kendo-ui-react-jquery-tabstrip source
ToolBar npm install kendo-ui-react-jquery-toolbar source
TreeView npm install kendo-ui-react-jquery-treeview source
Interactivity and UX
Drag-and-Drop
Effects
ProgressBar npm install kendo-ui-react-jquery-progressbar source
Sortable npm install kendo-ui-react-jquery-sortable source

Installing Wrappers from npm

npm i kendo-ui-react-jquery-[NAME OF WIDGET ALL LOWERCASE e.g. dropdownlist]

For example the following command will install the dropDownList wrapper:

npm i kendo-ui-react-jquery-dropdownlist

Example Usage in React app (assumes webpack)

import React from 'react';
import ReactDOM from 'react-dom';
import KendoDropDownList from 'kendo-ui-react-jquery-dropdownlist';

//Don't forget CSS, webpack plugin used to include CSS
import 'kendo-ui-core/css/web/kendo.common.core.min.css';
import 'kendo-ui-core/css/web/kendo.default.min.css';

var App = React.createClass({
  render: function() {
	  return (
				<KendoDropDownList
					//only updates upon state change from above if widget supports setOptions()
					//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",
					]}>
						<input className="kendoDropDownList" />
				</KendoDropDownList>
			);
	}
});

ReactDOM.render(<App />, document.getElementById('app'));

License

Apache License, Version 2.0

About

Kendo UI for jQuery widgets wrapped as React components.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.8%
  • Other 0.2%