| Name | Type | Default |
|---|
|
animationType
|
String
|
'slide'
|
Sets or gets the animationType property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} animationType={ 'fade'}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
arrowSize
|
Number
|
16
|
Sets or gets the arrowSize property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} arrowSize={20}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoOpen
|
Boolean
|
false
|
Sets or gets the autoOpen property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} autoOpen={true}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
closeDelay
|
Number
|
400
|
Sets or gets the closeDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} closeDelay={200}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } 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 JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} disabled={true}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dropDownHorizontalAlignment
|
String
|
'left'
|
Sets or gets the dropDownHorizontalAlignment property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} dropDownHorizontalAlignment={ 'right'}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dropDownVerticalAlignment
|
String
|
'bottom'
|
Sets or gets the dropDownVerticalAlignment property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} dropDownVerticalAlignment={ 'top'}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
dropDownWidth
|
String | Number
|
null
|
Sets or gets the dropDownWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} dropDownWidth={200}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableBrowserBoundsDetection
|
Boolean
|
false
|
Sets or gets the enableBrowserBoundsDetection property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} enableBrowserBoundsDetection={true}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } 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 JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
initContent
|
Function
|
null
|
Sets or gets the initContent property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} initContent={initContent}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
openDelay
|
Number
|
350
|
Sets or gets the openDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} openDelay={1000}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
popupZIndex
|
Number
|
20000
|
Sets or gets the popupZIndex property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} popupZIndex={9999}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } 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 JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} rtl={true}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
template
|
String
|
'default'
|
Sets or gets the template property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} template={ 'success'}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25} theme={ 'energyblue'}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } 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 JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
close
|
Event
|
|
This event is triggered when the button's popup is closed.
Code examples
Bind to the close event of jqxDropDownButton.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.on('close', (event) => { // Do Something... }); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
open
|
Event
|
|
This event is triggered when the button's popup is opened.
Code examples
Bind to the open event of jqxDropDownButton.
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.on('open', (event) => { // Do Something... }); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
close
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.close(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.destroy(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
focus
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.focus(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getContent
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myDropDownButton.getContent(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
isOpened
|
Boolean
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myDropDownButton.isOpened(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
open
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.open(); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
setContent
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxDropDownButton from 'jqwidgets-react/react_jqxdropdownbutton.js';import JqxTree from 'jqwidgets-react/react_jqxtree.js'; class App extends React.Component { componentDidMount() { this.refs.myDropDownButton.setContent('content'); } render() { return ( <JqxDropDownButton ref= 'myDropDownButton' width={300} height={25}> <JqxTree width={200}> <ul> <li item-selected='true'>Home </li> <li item-expanded='true'> Solutions <ul> <li>Education </li> <li>Financial services </li> <li>Government </li> <li>Manufacturing </li> <li> Solutions <ul> <li>eLearning </li> <li>Mobile </li> <li>RIA </li> <li>Training </li> </ul> </li> </ul> </li> <li> Products <ul> <li>PC products </li> <li>Mobile products </li> <li>All products </li> </ul> </li> </ul> </JqxTree> </JqxDropDownButton> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
