React UI Components Documentation

Sets or gets the duration of the show animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} animationShowDuration={1000}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the hide animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} animationHideDuration={1000}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the dragging of Tree Items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} allowDrop={true} allowDrag={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the dropping of Tree Items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} allowDrop={true} allowDrag={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tree should display a checkbox next to each item. In order to use this feature, you need to include the jqxcheckbox.js.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} checkboxes={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when a drag operation starts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      dragStart: (item: object): any => {
        console.log(item);
      }
    }
  }  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} dragStart={this.state.dragStart}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when a drag operation ends.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      dragEnd: (dragItem: any, dropItem: any, args: any, dropPosition: any, tree: any): any => {
        console.log(dragItem);
        console.log(dropItem)
        console.log(args);
        console.log(dropPosition);
        console.log(tree);
      }
    }
  }  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} dragEnd={this.state.dragEnd}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether the tree is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} disabled={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the animation's easing to one of the JQuery's supported easings.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} easing={'easeInOutCirc'}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the hover state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} enableHover={false}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tree's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} height={300}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} checkboxes={true} hasThreeStates={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the incremental search is enabled. The feature allows you to quickly find and select items by typing when the widget is on focus.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} incrementalSearch={false}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the key navigation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} keyboardNavigation={false}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} rtl={true}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies the jqxTree's data source. Use this property to populate the jqxTree.

• label - sets the item's label.
• value - sets the item's value.
• html - item's html. The html to be displayed in the item.
• id - sets the item's id.
• disabled - sets whether the item is enabled/disabled.
• checked - sets whether the item is checked/unchecked(when checkboxes are enabled).
• expanded - sets whether the item is expanded or collapsed.
• selected - sets whether the item is selected.
• items - sets an array of sub items.
• icon - sets the item's icon(url is expected).
• iconsize - sets the size of the item's icon.

Sets or gets the size of the expand/collapse arrows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} toggleIndicatorSize={20}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets user interaction used for expanding or collapsing any item.

'click'

'dblclick'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} toggleMode={'click'}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400} theme={'material'}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tree's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user adds a new tree item.

Code examples

Bind to the added event of jqxTree.

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.

This event is triggered when the user collapses a tree item.

Code examples

Bind to the collapse event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onCollapse={this.onCollapse} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onCollapse(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user starts a drag operation.

Code examples

Bind to the dragStart event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onDragStart={this.onDragStart} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onDragStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user drops an item.

Code examples

Bind to the dragEnd event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onDragEnd={this.onDragEnd} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onDragEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user expands a tree item.

Code examples

Bind to the expand event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onExpand={this.onExpand} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onExpand(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user clicks a tree item.

Code examples

Bind to the itemClick event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onItemClick={this.onItemClick} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onItemClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user removes a tree item.

Code examples

Bind to the removed event of jqxTree.

This event is triggered when the user selects a tree item.

Code examples

Bind to the select event of jqxTree.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();  
  
  public render() {
    return (
      <JqxTree ref={this.myTree} onSelect={this.onSelect} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
 
  private onSelect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds an item as a sibling of another item.

Adds an item as a sibling of another item.

Adds an item.

Removes all elements.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.clear();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Checks all tree items.

Checks a tree item.

Collapses all items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.collapseAll();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Collapses a tree item by passing an element as parameter.

Destroy the jqxTree widget. The destroy method removes the jqxTree widget from the web page.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables a tree item.

Ensures the visibility of an element.

Enables a tree item.

Enables all items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.enableAll();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Expandes all items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.expandAll();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Expands a tree item by passing an element as parameter.

Sets the focus to the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets an array with all checked tree items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Gets an array with all unchecked tree items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Gets an array with all tree items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.getItems();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the tree item associated to a LI tag passed as parameter. The returned value is an object.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Gets the selected tree item.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.getSelectedItem();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the item above another item. The returned value is an object.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Gets the item below another item. The returned value is an object.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Gets an item at specific position. The method expects 2 parameters - left and top. The coordinates are relative to the document.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.hitTest(100,100);
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes an item.

Renders the jqxTree widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.render();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the jqxTree widget. The refresh method will update the jqxTree's layout and size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, ITreeProps> {
  private myTree = React.createRef<JqxTree>();
 
  public componentDidMount(): void {
    this.myTree.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxTree ref={this.myTree} 
        width={400}>
        <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>Consumer photo and video</li>
               <li>Mobile</li>
               <li>Rich Internet applications</li>
               <li>Technical communication</li>
               <li>Training and eLearning</li>
               <li>Web conferencing</li>
             </ul>
           </li>
           <li>All industries and solutions</li>
         </ul>
       </li>
     </ul>
      </JqxTree>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects an item.

Unchecks all tree items.

Unchecks a tree item.

Updates an item.

Sets or gets the selected item.