| 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 {
|
|
|
|
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 {
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 {
|
|
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
|
|
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
|
|
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
|
|
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 {
|
|
|
| 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;
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
|
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();
|
