Angular Tree API Reference

Name	Type	Default
animationShowDuration	Number	350
Sets or gets the `animationShowDuration` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [animationShowDuration]="1000"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
animationHideDuration	Number	fast
Sets or gets the `animationHideDuration` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [animationHideDuration]="1000"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
allowDrag	Boolean	false
Sets or gets the `allowDrag` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [allowDrop]="true" [allowDrag]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
allowDrop	Boolean	false
Sets or gets the `allowDrop` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [allowDrop]="true" [allowDrag]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
checkboxes	Boolean	false
Sets or gets the `checkboxes` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [checkboxes]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
dragStart	(item: Any) => Boolean	null
Sets or gets the `dragStart` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [dragStart]="dragStart"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
dragEnd	(dragItem?: Any, dropItem?: Any, args?: Any, dropPosition?: Any, tree?: Any) => Boolean	null
Sets or gets the `dragEnd` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [dragEnd]="dragEnd"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [disabled]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
easing	String	'easeInOutCirc'
Sets or gets the `easing` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [easing]="'easeInOutCirc'"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
enableHover	Boolean	true
Sets or gets the `enableHover` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [enableHover]="false"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
height	String \| Number	null
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [height]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
hasThreeStates	Boolean	false
Sets or gets the `hasThreeStates` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [hasThreeStates]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
incrementalSearch	Boolean	true
Sets or gets the `incrementalSearch` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [incrementalSearch]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
keyboardNavigation	Boolean	true
Sets or gets the `keyboardNavigation` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [keyboardNavigation]="false"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [rtl]="true"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
selectedItem	Any	null
Sets or gets the `selectedItem` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [selectedItem]="selectedItem"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
source	Any	null
Sets or gets the `source` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [source]="source"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
toggleIndicatorSize	Number	16
Sets or gets the `toggleIndicatorSize` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [toggleIndicatorSize]="20"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
toggleMode	enum:TreeToggleMode	dblclick
enum TreeToggleMode { click, dblclick } Sets or gets the `toggleMode` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [toggleMode]="'click'"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
theme	String	''
Sets or gets the `theme` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300" [theme]="'energyblue'"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
width	String \| Number	null
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { }
Events
added	Event
This event is triggered when the user adds a new tree item. Code examples Bind to the `added` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onAdded)="Added($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Added(event: any): void { // Do Something } }
checkChange	Event
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. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onCheckChange)="CheckChange($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { CheckChange(event: any): void { // Do Something } }
collapse	Event
This event is triggered when the user collapses a tree item. Code examples Bind to the `collapse` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onCollapse)="Collapse($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Collapse(event: any): void { // Do Something } }
dragStart	Event
This event is triggered when the user starts a drag operation. Code examples Bind to the `dragStart` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onDragStart)="DragStart($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { DragStart(event: any): void { // Do Something } }
dragEnd	Event
This event is triggered when the user drops an item. Code examples Bind to the `dragEnd` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onDragEnd)="DragEnd($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { DragEnd(event: any): void { // Do Something } }
expand	Event
This event is triggered when the user expands a tree item. Code examples Bind to the `expand` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onExpand)="Expand($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Expand(event: any): void { // Do Something } }
initialized	Event
This event is triggered when the jqxTree is created and initialized. Code examples Bind to the `initialized` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onInitialized)="Initialized($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Initialized(event: any): void { // Do Something } }
itemClick	Event
This event is triggered when the user clicks a tree item. Code examples Bind to the `itemClick` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onItemClick)="ItemClick($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { ItemClick(event: any): void { // Do Something } }
removed	Event
This event is triggered when the user removes a tree item. Code examples Bind to the `removed` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onRemoved)="Removed($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Removed(event: any): void { // Do Something } }
select	Event
This event is triggered when the user selects a tree item. Code examples Bind to the `select` event of jqxTree. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree(onSelect)="Select($event)" [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent { Select(event: any): void { // Do Something } }
Methods
Name	Return Type	Arguments
addBefore	Void	item: Any, id: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.addBefore('item',1); } }
addAfter	Void	item: Any, id: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.addAfter('item','item2'); } }
addTo	Void	item: Any, id: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.addTo('item','parentItem'); } }
clear	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.clear(); } }
checkAll	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.checkAll(); } }
checkItem	Void	item: Any, checked: Boolean
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.checkItem('item',true); } }
collapseAll	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.collapseAll(); } }
collapseItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.collapseItem('item'); } }
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.destroy(); } }
disableItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.disableItem('item'); } }
ensureVisible	Void	item: Object
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.ensureVisible('item'); } }
enableItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.enableItem('item'); } }
enableAll	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.enableAll(); } }
expandAll	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.expandAll(); } }
expandItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.expandItem('item'); } }
focus	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.focus(); } }
getCheckedItems	Array<TreeItem>	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getCheckedItems(); } }
getUncheckedItems	Array<TreeItem>	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getUncheckedItems(); } }
getItems	Array<TreeItem>	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getItems(); } }
getItem	TreeItem	element: Any
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getItem('item'); } }
getSelectedItem	TreeItem	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getSelectedItem(); } }
getPrevItem	TreeItem	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getPrevItem(); } }
getNextItem	TreeItem	None
interface TreeItem { label?: String; value?: String; disabled?: Boolean; checked?: Boolean; element?: Any; parentElement?: Any; isExpanded?: Boolean; selected?: Boolean; } import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.getNextItem(); } }
hitTest	Any	left: Number, top: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.hitTest(100,100); } }
removeItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.removeItem('item'); } }
render	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.render(); } }
refresh	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.refresh(); } }
selectItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.selectItem('item'); } }
uncheckAll	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.uncheckAll(); } }
uncheckItem	Void	item: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.uncheckItem('item'); } }
updateItem	Void	item: Any, newItem: Any
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { this.myTree.updateItem('item','newItem'); } }
val	String	value: String
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxTree #myTree [width]="300"> <ul> <li id='home'>Home</li> <li item-expanded='true'> Solutions <ul> <li>Education</li> <li>Financial services</li> <li> Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li> Products <ul> <li>PC products</li> <li>Mobile products</li> </ul> </li> <li> Communities <ul> <li>Designers</li> <li>Developers</li> <li> By resource <ul> <li>Labs</li> <li>TV</li> </ul> </li> </ul> </li> </ul> </jqxTree> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myTree') myTree: jqxTreeComponent; ngAfterViewInit(): void { let value = this.myTree.val(); } }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods