React UI Components Documentation
ReactJS ListMenu Component
The ListMenu component for ReactJS represents a collection of Unordered and Ordered Lists.
By nesting child UL or OL inside list items, you can create nested lists.
Prerequisites
Refer to ReactJS Getting Started before you start with this help topic.
Configuration
The ListMenu component for ReactJS requires the following imports.
import React from 'react';import ReactDOM from 'react-dom'; import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';
Then we create our component class. Properties and methods are put as ReactJS props.
class App extends React.Component { render () { return ( <JqxListMenu width={220} height={220}> <ul id="list" data-role="listmenu"> <li> OSI <ul data-role="listmenu"> <li> Data Link Layer <ol data-role="listmenu"> <li>ATM</li> <li>SDLS</li> <li>LLC</li> </ol> </li> <li> Physical Layer <ol data-role="listmenu"> <li>EIA/TIA-232</li> <li>ITU-T V-Series</li> <li>DSL</li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ) }} Finally we render our class in the desired HTML element:
ReactDOM.render(<App />, document.getElementById('app'));
Methods & Properties
In order to change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:
<JqxListMenu ref='myListMenu' width={220} height={220}..... />
Now, when we have a reference, we need to call the desired property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.
class App extends React.Component { componentDidMount() { //your logic } render () { return ( .... ) }}; Methods & Properties
This is how you call methods & props:
//Back Methodthis.refs.myListMenu.back(); //ChangePage Methodthis.refs.myListMenu.changePage('#newPage'); //Get Propertieslet height = this.refs.myListMenu.height(); //Set Propertiesthis.refs.myListMenu.height(550);
Every component have a method setOptions which accepts a object as an argument. This object contains component settings.
this.refs.myListMenu.setOptions({ autoSeparators: true, width: 450, height: 600}) Every component also have a method getOptions which returns a object containing the component settings.
let options = this.refs.myListMenu.getOptions();
ListMenu Examples
Overview
The following example demonstrates how to create a ListMenu component.
import React from 'react';import ReactDOM from 'react-dom';import JqxListMenu from 'jqwidgets-react/react_jqxlistmenu.js';class App extends React.Component { render () { return ( <JqxListMenu width={600} autoSeparators={true} enableScrolling={false} showHeader={true} placeHolder={'Find contact...'}> <ul id="list" data-role="listmenu"> <li> <img src="images/andrew.png" alt="" /> <div>Andrew Fuller</div> <ul data-role="listmenu"> <li> <div data-role="content"> <table> <tr> <td><img width="50" height="50" src="images/andrew.png" alt="" /></td> <td><b>Andrew Fuller</b></td> </tr> <tr><td>Title</td><td>Sales Representative</td></tr> <tr> <td>Notes</td> <td> "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association. </td> </tr> <tr><td>Birth Date</td><td>19-Feb-52</td></tr> <tr><td>Hire Date</td><td>14-Aug-92</td></tr> <tr><td>Home Phone</td><td>(206) 555-9482</td></tr> <tr><td>Address</td><td>908 W. Capital Way.</td></tr> <tr><td>Postal Code</td><td>98401</td></tr> <tr><td>City</td><td>Tacoma</td></tr> <tr><td>Country</td><td>USA</td></tr> </table> </div> </li> </ul> </li> <li> <img src="images/janet.png" alt="" /> <div>Janet Leverling</div> <ul data-role="listmenu"> <li> <div data-role="content"> <table> <tr> <td><img width="50" height="50" src="images/janet.png" alt="" /></td> <td><b>Janet Leverling</b></td> </tr> <tr><td>Title</td><td>Sales Representative</td></tr> <tr> <td>Notes</td> <td> Janet has a BS degree in chemistry from Boston College (1984). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992. </td> </tr> <tr><td>Birth Date</td><td>27-Jan-69</td></tr> <tr><td>Hire Date</td><td>15-Nov-94</td></tr> <tr><td>Home Phone</td><td>(71) 555-4444</td></tr> <tr><td>Address</td><td>Miner Rd.</td></tr> <tr><td>Postal Code</td><td>WG2 7LT</td></tr> <tr><td>City</td><td>London</td></tr> <tr><td>Country</td><td>UK</td></tr> </table> </div> </li> </ul> </li> </ul> </JqxListMenu> ) }} ReactDOM.render(<App />, document.getElementById('app'));
