kendo-ui-react-jquery-panelbar

The Kendo UI for jQuery PanelBar widget wrapped as a React component.

Install

``bash npm i -S kendo-ui-react-jquery-panelbar`

`Usage Example`

`javascript import React from 'react'; import ReactDOM from 'react-dom'; import KendoPanelBar from 'kendo-ui-react-jquery-panelbar';

//Don't forget CSS, webpack 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 (


						root item 1

						root item 2
							
								child item 1

								child item 2

 
	  			);
	}
});

ReactDOM.render(, document.getElementById('app'));`

`React Props`

Every KUI React Wrapper can make use of the following React props:

* options*methods*events*unbindEvents*triggerEvents

Each is demonstrated below using a KUI React wrapper.

`javascript //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", ]}>``

KUI API

* PanelBar demos: http://demos.telerik.com/kendo-ui/panelbar/index
* PanelBar docs: http://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview
* PanelBar API: http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar

License

Apache License, Version 2.0

Usage Example

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import KendoPanelBar from 'kendo-ui-react-jquery-panelbar';

//Don't forget CSS, webpack 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 (


						root item 1

						root item 2
							
								child item 1

								child item 2

);
}
});

ReactDOM.render(, document.getElementById('app'));

React Props

Every KUI React Wrapper can make use of the following React props:

* options

methods

events

unbindEvents

triggerEvents

Each is demonstrated below using a KUI React wrapper.

javascript
	//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",
	]}>