Properties

NameTypeDefault
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

NameReturn TypeArguments
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();
    }

    
}