| Name | Type | Default |
|---|
|
animationShowDuration
|
Number
|
350
|
Sets or gets the animationShowDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} animationShowDuration={1000}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationHideDuration
|
Number
|
fast
|
Sets or gets the animationHideDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} animationHideDuration={1000}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
allowDrag
|
Boolean
|
false
|
Sets or gets the allowDrag property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} allowDrop={true} allowDrag={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
allowDrop
|
Boolean
|
false
|
Sets or gets the allowDrop property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} allowDrop={true} allowDrag={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
checkboxes
|
Boolean
|
false
|
Sets or gets the checkboxes property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} checkboxes={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dragStart
|
Function
|
null
|
Sets or gets the dragStart property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} dragStart={dragStart}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dragEnd
|
Function
|
null
|
Sets or gets the dragEnd property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} dragEnd={dragEnd}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} disabled={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
easing
|
String
|
'easeInOutCirc'
|
Sets or gets the easing property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} easing={'easeInOutCirc'}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} enableHover={false}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
null
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} height={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hasThreeStates
|
Boolean
|
false
|
Sets or gets the hasThreeStates property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} hasThreeStates={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
incrementalSearch
|
Boolean
|
true
|
Sets or gets the incrementalSearch property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} incrementalSearch={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
keyboardNavigation
|
Boolean
|
true
|
Sets or gets the keyboardNavigation property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} keyboardNavigation={false}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} rtl={true}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectedItem
|
Object
|
null
|
Sets or gets the selectedItem property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} selectedItem={selectedItem}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
source
|
Object
|
null
|
Sets or gets the source property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} source={source}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toggleIndicatorSize
|
Number
|
16
|
Sets or gets the toggleIndicatorSize property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} toggleIndicatorSize={20}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toggleMode
|
String
|
dblclick
|
Sets or gets the toggleMode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} toggleMode={'click'}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300} theme={'energyblue'}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
width
|
Number
|
null
|
Sets or gets the width property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
added
|
Event
|
|
This event is triggered when the user adds a new tree item.
Code examples
Bind to the added event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('added', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
checkChange
|
Event
|
|
This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state.
Code examples
Bind to the checkChange event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('checkChange', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
collapse
|
Event
|
|
This event is triggered when the user collapses a tree item.
Code examples
Bind to the collapse event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('collapse', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dragStart
|
Event
|
|
This event is triggered when the user starts a drag operation.
Code examples
Bind to the dragStart event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('dragStart', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dragEnd
|
Event
|
|
This event is triggered when the user drops an item.
Code examples
Bind to the dragEnd event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('dragEnd', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
expand
|
Event
|
|
This event is triggered when the user expands a tree item.
Code examples
Bind to the expand event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('expand', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
initialized
|
Event
|
|
This event is triggered when the jqxTree is created and initialized.
Code examples
Bind to the initialized event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('initialized', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
itemClick
|
Event
|
|
This event is triggered when the user clicks a tree item.
Code examples
Bind to the itemClick event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('itemClick', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
removed
|
Event
|
|
This event is triggered when the user removes a tree item.
Code examples
Bind to the removed event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('removed', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
select
|
Event
|
|
This event is triggered when the user selects a tree item.
Code examples
Bind to the select event of jqxTree.
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.on('select', (event) => { // Do Something... }); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
addBefore
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.addBefore('item',1); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
addAfter
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.addAfter('item','item2'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
addTo
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.addTo('item','parentItem'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
clear
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.clear(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
checkAll
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.checkAll(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
checkItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.checkItem('item',true); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
collapseAll
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.collapseAll(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
collapseItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.collapseItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.destroy(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disableItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.disableItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
ensureVisible
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.ensureVisible('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.enableItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableAll
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.enableAll(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
expandAll
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.expandAll(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
expandItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.expandItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
focus
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.focus(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getCheckedItems
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getCheckedItems(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getUncheckedItems
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getUncheckedItems(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getItems
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getItems(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getItem
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getSelectedItem
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getSelectedItem(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getPrevItem
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getPrevItem(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getNextItem
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.getNextItem(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hitTest
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.hitTest(100,100); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
removeItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.removeItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
render
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.render(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refresh
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.refresh(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.selectItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
uncheckAll
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.uncheckAll(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
uncheckItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.uncheckItem('item'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
updateItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myTree.updateItem('item','newItem'); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
val
|
String
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myTree.val(); } render() { return ( <JqxTree ref='myTree' width={300}> <ul> <li id='home'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li> Solutions <ul> <li>Consumer photo and video </li> <li>Mobile </li> </ul> </li> <li>All industries and solutions </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> </ul> </li> <li> Communities <ul> <li>Designers </li> <li>Developers </li> <li> By resource <ul> <li>Labs </li> <li>TV </li> </ul> </li> </ul> </li> </ul> </JqxTree> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
