React UI Components Documentation

Sets or gets the type of the animation.

'fade'

'slide'

'none'

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        animationType={'fade'}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        arrowSize={20}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        autoOpen={true}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the delay of the 'close' animation.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        closeDelay={800}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the dropDownButton.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        disabled={true}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DropDown's alignment.

'left' 

'right'

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        dropDownHorizontalAlignment={'right'}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DropDown's alignment.

'top'

'bottom'

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        dropDownVerticalAlignment={'bottom'}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        dropDownWidth={500}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When this property is set to true, the popup may open above the button, if there's not enough available space below the button.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        enableBrowserBoundsDetection={true}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's height.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        height={40}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Function, called after the first open of the dropdown button popup.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        initContent={this.state.initContent}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the delay of the 'open' animation.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        openDelay={1000}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the popup's z-index.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        popupZIndex={9999}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
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.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        rtl={true}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        template={'success'}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        theme={'material'}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's width.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
        width={400}>
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the button's popup is closed.

Code examples

Bind to the close event of jqxDropDownButton.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} onClose={this.onClose} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the button's popup is opened.

Code examples

Bind to the open event of jqxDropDownButton.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} onOpen={this.onOpen} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hides the button's content.

Destroys the widget.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    this.myDropDownButton.current!.destroy();
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    this.myDropDownButton.current!.focus();
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the button's content. The returned value is the button's content set through the "setContent" method.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    this.myDropDownButton.current!.getContent();
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns true, if the drop down is opened. Otherwise returns false.

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    this.myDropDownButton.current!.isOpened();
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows the button's content.

Sets the button's content. The parameter could be a "string" or "html".

/* CSSStylesheet.css */
  .jqx-tree {
    border: none;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxDropDownButton, { IDropDownButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownbutton';
import JqxTree, { ITreeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree';
 
class App extends React.PureComponent<{}, IDropDownButtonProps> {
  private myDropDownButton = React.createRef<JqxDropDownButton>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myDropDownButton.current!.setContent(`<div style='position: relative; margin-left: 3px; margin-top: 4px;'>Home</div>`);
    this.myDropDownButton.current!.setContent('New Content!');
  }
  
  public render() {
    return (
      <JqxDropDownButton ref={this.myDropDownButton} 
       >
        <jqxTree ref='myTree' @select='myTreeOnSelect($event)' :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>
            </ul>
        </li>
        <li> 
          Products
            <ul> 
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
        </li>
      </ul>
    </jqxTree>
      </JqxDropDownButton>
    );
  }
 
  private myTreeOnSelect(event) {
    const item = this.myTree.getItem(event.args.element);
    const dropDownContent = `<div style='position: relative; margin-left: 3px; margin-top: 4px;'>` + item.label + `</div>`;
    this.myDropDownButton.current!.setContent(dropDownContent);
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);