| Name | Type | Default |
|---|---|---|
| animationShowDuration | number | 350 |
|
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);
|
||
| animationHideDuration | number | fast |
|
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);
|
||
| allowDrag | boolean | false |
|
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);
|
||
| allowDrop | boolean | false |
|
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);
|
||
| checkboxes | boolean | false |
|
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);
|
||
| dragStart | (item: TreeDragStart['item']) => boolean | null |
|
Interface TreeDragStart {
item?: object; } 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);
|
||
| dragEnd | (dragItem?: TreeDragEnd['dragItem'], dropItem?: TreeDragEnd['dropItem'], args?: TreeDragEnd['args'], dropPosition?: TreeDragEnd['dropPosition'], tree?: TreeDragEnd['tree']) => boolean | null |
|
Interface TreeDragEnd {
dragItem?: any; dropItem?: any; args?: any; dropPosition?: any; tree?: any; } 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);
|
||
| disabled | boolean | false |
|
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);
|
||
| easing | string | 'easeInOutCirc' |
|
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);
|
||
| enableHover | boolean | true |
|
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);
|
||
| height | number | string | null |
|
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);
|
||
| hasThreeStates | boolean | false |
|
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);
|
||
| incrementalSearch | boolean | true |
|
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);
|
||
| keyboardNavigation | boolean | true |
|
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);
|
||
| rtl | boolean | false |
|
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);
|
||
| source | any | null |
|
Specifies the jqxTree's data source. Use this property to populate the jqxTree.
|
||
| toggleIndicatorSize | number | 16 |
|
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);
|
||
| toggleMode | TreeToggleMode | dblclick |
|
TreeToggleMode: "click" | "dblclick"
Sets or gets user interaction used for expanding or collapsing any item. Possible Values:/* 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);
|
||
| theme | string | '' |
/* 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);
|
||
| width | string | number | null |
|
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);
|
||
Events |
||
| added | Event | |
|
This event is triggered when the user adds a new tree item. Code examples
Bind to the
|
||
| checkChange | Event | |
|
This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state. Code examples
Bind to the
|
||
| collapse | Event | |
|
This event is triggered when the user collapses a tree item. Code examples
Bind to the
/* 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);
|
||
| dragStart | Event | |
|
This event is triggered when the user starts a drag operation. Code examples
Bind to the
/* 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);
|
||
| dragEnd | Event | |
|
This event is triggered when the user drops an item. Code examples
Bind to the
/* 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);
|
||
| expand | Event | |
|
This event is triggered when the user expands a tree item. Code examples
Bind to the
/* 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);
|
||
| itemClick | Event | |
|
This event is triggered when the user clicks a tree item. Code examples
Bind to the
/* 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);
|
||
| removed | Event | |
|
This event is triggered when the user removes a tree item. Code examples
Bind to the
|
||
| select | Event | |
|
This event is triggered when the user selects a tree item. Code examples
Bind to the
/* 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);
|
||
Methods |
||
| Name | Arguments | Return Type |
| addBefore | item, id | |
|
Adds an item as a sibling of another item. |
||
| addAfter | item, id | |
|
Adds an item as a sibling of another item. |
||
| addTo | item, id | |
|
Adds an item. |
||
| clear | None | |
|
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);
|
||
| checkAll | None | |
|
Checks all tree items. |
||
| checkItem | item, checked | |
|
Checks a tree item. |
||
| collapseAll | None | |
|
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);
|
||
| collapseItem | item | |
|
Collapses a tree item by passing an element as parameter. |
||
| destroy | None | |
|
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);
|
||
| disableItem | item | |
|
Disables a tree item. |
||
| ensureVisible | item | |
|
Ensures the visibility of an element. |
||
| enableItem | item | |
|
Enables a tree item. |
||
| enableAll | None | |
|
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);
|
||
| expandAll | None | |
|
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);
|
||
| expandItem | item | |
|
Expands a tree item by passing an element as parameter. |
||
| focus | None | |
|
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);
|
||
| getCheckedItems | None | |
|
Gets an array with all checked tree items.
|
||
| getUncheckedItems | None | |
|
Gets an array with all unchecked tree items.
|
||
| getItems | None | |
|
Gets an array with all 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 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);
|
||
| getItem | element | |
|
Gets the tree item associated to a LI tag passed as parameter. The returned value is an object.
|
||
| getSelectedItem | None | |
|
Gets the selected tree item.
/* 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);
|
||
| getPrevItem | item | |
|
Gets the item above another item. The returned value is an object.
|
||
| getNextItem | item | |
|
Gets the item below another item. The returned value is an object.
|
||
| hitTest | left, top | |
|
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);
|
||
| removeItem | item | |
|
Removes an item. |
||
| render | None | |
|
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);
|
||
| refresh | None | |
|
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);
|
||
| selectItem | item | |
|
Selects an item. |
||
| uncheckAll | None | |
|
Unchecks all tree items. |
||
| uncheckItem | item | |
|
Unchecks a tree item. |
||
| updateItem | item, newItem | |
|
Updates an item. |
||
| val | value | |
|
Sets or gets the selected item. |
||