React UI Components

Show Demo List

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id="Description"> ReactJS Menu demo. In this demo the jqxMenu is built from XML data. </title> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body> <div class="example-description" style="margin-bottom:3em"> ReactJS Menu demo. In this demo the jqxMenu is built from XML data. </div> <div id="app"></div> <script src="../build/menu_xmlmenu.bundle.js"></script> </body> </html>

import React from 'react';import ReactDOM from 'react-dom';import JqxMenu from '../../../jqwidgets-react/react_jqxmenu.js';class App extends React.Component { render() { let source = { datatype: 'xml', datafields: [ { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' }, { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' }, { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' }, { name: 'City', map: 'm\\:properties>d\\:City' }, { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' }, { name: 'Country', map: 'm\\:properties>d\\:Country' } ], root: 'entry', record: 'content', id: 'm\\:properties>d\\:CustomerID', url: '../sampledata/customers.xml', async: false }; // create data adapter. let dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the tree items. The first parameter is the grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name. // Each jqxMenu item has a 'label' property, but in the data source, we have a 'CompanyName' field. The last parameter // specifies the mapping between the 'CompanyName' and 'label' fields. let records = dataAdapter.getGroupedRecords(['ContactTitle', 'ContactName'], 'items', 'label', [{ name: 'ContactName', map: 'label' }]); return ( <JqxMenu width={150} mode={'vertical'} source={records} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));