ejTreeView

The TreeView can be easily configured with the DOM element, such as div or ul. you can create a TreeView with a highly customizable look and feel.

Name Type Description
options object settings for TreeView.

Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
    }
    </script>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:ej.core.js

    • module:ej.treeview.js

    • module:ej.data.js

    • module:ej.checkbox.js

    • module:ej.waitingpopup.js

    • module:ej.draggable.js

    Members

    allowDragAndDrop boolean

    Gets or sets a value that indicates whether to enable drag and drop a node within the same tree.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowDragAndDrop:boolean = true;
    }
    </script>

    allowDragAndDropAcrossControl boolean

    Gets or sets a value that indicates whether to enable drag and drop a node in inter ej.TreeView.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDragAndDropAcrossControl]='allowDragAndDropAcrossControl'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowDragAndDrop:boolean = true;
        public allowDragAndDropAcrossControl:boolean = true;
    }
    </script>

    allowDropSibling boolean

    Gets or sets a value that indicates whether to drop a node to a sibling of particular node.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDropSibling]='allowDropSibling'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowDragAndDrop:boolean = true;
        public allowDropSibling:boolean = true;
    }
    </script>

    allowDropChild boolean

    Gets or sets a value that indicates whether to drop a node to a child of particular node.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowDropChild]='allowDropChild'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowDragAndDrop:boolean = true;
        public allowDropChild:boolean = true;
    }
    </script>

    allowEditing boolean

    Gets or sets a value that indicates whether to enable node editing support for TreeView.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' [allowEditing]='allowEditing'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowDragAndDrop:boolean = true;
        public allowEditing:boolean = true;
    }
    </script>

    allowKeyboardNavigation boolean

    Gets or sets a value that indicates whether to enable keyboard support for TreeView actions like nodeSelection, nodeEditing, nodeExpand, nodeCollapse, nodeCut and Paste.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowKeyboardNavigation]='allowKeyboardNavigation'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowKeyboardNavigation:boolean = true;
    }
    </script>

    allowMultiSelection boolean

    Gets or sets a value that indicates whether to enable multi selection support for TreeView.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowMultiSelection:boolean = true;
    }
    </script>

    autoCheck boolean

    Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [autoCheck]='allowMultiSelection' [showCheckbox]='showCheckbox'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public autoCheck:boolean = true;
        public showCheckbox:boolean = true;
    }
    </script>

    autoCheckParentNode boolean

    Allow us to specify the parent node to be retain in checked or unchecked state instead of going for indeterminate state.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [autoCheckParentNode]='autoCheckParentNode' [showCheckbox]='showCheckbox'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public autoCheckParentNode:boolean = true;
        public showCheckbox:boolean = true;
    }
    </script>

    checkedNodes array

    Gets or sets a value that indicates the checkedNodes index collection as an array. The given array index position denotes the nodes, that are checked while rendering TreeView.

    Default Value

    • []

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [checkedNodes]='checkedNodes' [showCheckbox]='showCheckbox'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public checkedNodes:number = [1,2];
        public showCheckbox:boolean = true;
    }
    </script>

    cssClass string

    Sets the root CSS class for TreeView which allow us to customize the appearance.

    Default Value

    • ””

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [cssClass]='cssClass'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public cssClass:string = "gradient-lime";
    }
    </script>

    enableAnimation boolean

    Gets or sets a value that indicates whether to enable or disable the animation effect while expanding or collapsing a node.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [enableAnimation]='enableAnimation'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public enableAnimation:boolean = true;
    }
    </script>

    enabled boolean

    Gets or sets a value that indicates whether a TreeView can be enabled or disabled. No actions can be performed while this property is set as false

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [enabled]='enabled'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public enabled:boolean = true;
    }
    </script>

    enableMultipleExpand boolean

    Allow us to prevent multiple nodes to be in expanded state. If it set to false, previously expanded node will be collapsed automatically, while we expand a node.

    Default Value

    • true

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [enableMultipleExpand]='enableMultipleExpand'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public enableMultipleExpand:boolean = true;
    }
    </script>

    enablePersistence boolean

    Sets a value that indicates whether to persist the TreeView model state in page using applicable medium i.e., HTML5 localStorage or cookies

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [enablePersistence]='enablePersistence'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public enablePersistence:boolean = true;
    }
    </script>

    enableRTL boolean

    Gets or sets a value that indicates to align content in the TreeView control from right to left by setting the property as true.

    Default Value

    • false

    Example

  • html
  • <div id="treeView"></div>
    <script>
    // Initialize the TreeView with the enableRTL value specified.
    $("#treeView").ejTreeView({
        fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
        enableRTL: true
    });
     </script>
  • html
  • <ej-treeview id="treeView" [fields]='field' [enableRTL]='enableRTL'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public enableRTL:boolean = true;
    }
    </script>

    expandedNodes array

    Gets or sets a array of value that indicates the expandedNodes index collection as an array. The given array index position denotes the nodes, that are expanded while rendering TreeView.

    Default Value

    • []

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [expandedNodes]='expandedNodes'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public expandedNodes:number = [0,7];
    }
    </script>

    expandOn string

    Gets or sets a value that indicates the TreeView node can be expand or collapse by using the specified action.

    Default Value

    • “dblclick”

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [expandOn]='expandOn'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public expandOn:string ="dblclick";
    }
    </script>

    fields object

    Gets or sets a fields object that allow us to map the data members with field properties in order to make the data binding easier.

    Default Value

    • null

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
    }
    </script>

    fields.child object

    It receives the child level or inner level data source such as Essential DataManager object and JSON object.

  • html
  • <div id="treeView"></div>
    <script>
    // Initialize the TreeView with the fields value specified. 
    $("#treeView").ejTreeView({
        fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" ,
        child:{
            dataSource:window.childData, id:"id",parentId:"parentTd", text: "name"
        }
        }
    });
     </script>

    fields.dataSource object

    It receives Essential DataManager object and JSON object.

    To know more details about dataSource , please click here

    fields.expanded string

    Specifies the node to be in expanded state.

    fields.hasChild string

    Its allow us to indicate whether the node has child or not in load on demand

    fields.htmlAttribute object

    Specifies the HTML Attributes to “li” item list.

    fields.id string

    Specifies the id to TreeView node items list.

    fields.imageAttribute object

    Specifies the image attribute to “img” tag inside items list

    fields.imageUrl string

    Specifies the HTML Attributes to “li” item list.

    fields.isChecked string

    If its true Checkbox node will be checked when rendered with checkbox.

    fields.linkAttribute object

    Specifies the link attribute to “a” tag in item list.

    fields.parentId string

    Specifies the parent id of the node. The nodes are listed as child nodes of the specified parent node by using its parent id.

    fields.query object

    It receives query to retrieve data from the table (query is same as SQL).

    To know more details to add the query, please click here

    fields.selected string

    Allow us to specify the node to be in selected state

    fields.spriteCssClass string

    Specifies the sprite CSS class to “li” item list.

    fields.tableName string

    It receives the table name to execute query on the corresponding table.

    fields.text string

    Specifies the text of TreeView node items list.

    To know more details about treeview fields, please click here

    fullRowSelect boolean

    Gets or sets a value that indicates whether to enable full row selection support for TreeView.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [fullRowSelect]='fullRowSelect'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public fullRowSelect:boolean = true;
    }
    </script>

    height string number

    Defines the height of the TreeView.

    Default Value

    • Null

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [height]='height'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public height:number = 300;
    }
    </script>

    htmlAttributes object

    Specifies the HTML Attributes for the TreeView. Using this API we can add custom attributes in TreeView control.

    Default Value

    • {}

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [htmlAttributes]='htmlAttributes'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public htmlAttributes:Object = {class:"my-class"};
    }
    </script>

    loadOnDemand boolean

    Specifies the child nodes to be loaded on demand

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [loadOnDemand]='loadOnDemand'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public loadOnDemand:boolean = true;
    }
    </script>

    selectedNode number

    Gets or Sets a value that indicates the index position of a tree node. The particular index tree node will be selected while rendering the TreeView.

    Default Value

    • -1

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [selectedNode]='selectedNode'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public selectedNode:number = 2;
    }
    </script>

    selectedNodes array

    Gets or sets a value that indicates the selectedNodes index collection as an array. The given array index position denotes the nodes, that are selected while rendering TreeView.

    If we enable the allowMultiSelection property then it will select TreeView node of all given array indexes otherwise it will select TreeView node of the first index from the given array.

    Default Value

    • []

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection' selectedNodes='selectedNodes'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public allowMultiSelection:boolean = true;
        public selectedNodes:number =[1,2];
    }
    </script>

    showCheckbox boolean

    Gets or sets a value that indicates whether to display or hide checkbox for all TreeView nodes.

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public showCheckbox:boolean = true;
    }
    </script>

    sortSettings object

    By using sortSettings property, you can customize the sorting option in TreeView control.

    sortSettings.allowSorting boolean

    Enables or disables the sorting option in TreeView control

    Default Value

    • false

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [sortSettings]='sortSettings'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public sortSettings:Object ={allowSorting: true};
    }
    </script>

    sortSettings.sortOrder enum

    Sets the sorting order type. There are two sorting types available, such as “ascending”, “descending”.

    Name Description
    Ascending Enum for Ascending sort order
    Descending Enum for Descending sort order

    Default Value

    • ej.sortOrder.Ascending

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [sortSettings]='sortSettings'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public sortSettings:Object ={allowSorting: true,sortOrder: ej.sortOrder.Descending};
    }
    </script>

    template string

    Allow us to use custom template in order to create TreeView.

    Default Value

    • null

    Example

  • html
  • <ej-treeview id="template" [fields]="field" cssClass="custom">
                <ng-template #nodeTemplate="" let-data="">
                    <div>
                        <img class="eimage" src="src/treeview/Employees/.png" alt=""/>
                        <div class="ename"></div>
                        <div class="ejob"></div>
                    </div>
                </ng-template>
            </ej-treeview>
  • ts
  • <script>
    
     export class TreeViewComponent {
    
       public localData: Object[] = [
            { id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
            { id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
            { id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
            { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
            { id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
            { id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
            { id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
            { id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
            { id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
        ];
        public field:Object ={ dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
    }
     
    <script>

    width string|number

    Defines the width of the TreeView.

    Default Value

    • Null

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [width]='width'></ej-treeview>
  • ts
  • <script>
    
    export class TreeViewComponent {
    
       public hierarchicalData: Object[] = [
            { id: '01', name: 'Local Disk (C:)', expanded: true,
                subChild: [
                    {
                        id: '01-01', name: 'Program Files',
                        subChild: [
                            { id: '01-01-01', name: 'Windows NT' },
                            { id: '01-01-02', name: 'Windows Mail' },
                            { id: '01-01-03', name: 'Windows Photo Viewer' },
                        ]
                    },
                    {
                        id: '01-02', name: 'Users', expanded: true,
                        subChild: [
                            { id: '01-02-01', name: 'Smith' },
                            { id: '01-02-02', name: 'Public' },
                            { id: '01-02-03', name: 'Admin' },
                        ]
                    },
                    {
                        id: '01-03', name: 'Windows',
                        subChild: [
                            { id: '01-03-01', name: 'Boot' },
                            { id: '01-03-02', name: 'FileManager' },
                            { id: '01-03-03', name: 'System32' },
                        ]
                    },
                ]
            },       
        ];
        public field:Object ={ dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
        public width:number = 300;
    }
    </script>

    Methods

    addNode(newNodeText, target)

    To add a Node or collection of nodes in TreeView. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.

    Name Type Description
    newNodeText string|object New node text or JSON object
    target string|object ID of TreeView node/object of TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    // Create Treeview control object
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.addNode("NodeNew", "book"); // First argument is new node text and it will be appended as child of node, which node is having ID book.
    
    </script>

    addNodes(collection, target)

    To add a collection of nodes in TreeView. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.

    Name Type Description
    collection object|Array New node details in JSON object
    target string|object ID of TreeView node/object of TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.addNodes(obj, "book"); // First argument is new nodes object in Array and this will be appended as child of node, which node is having ID book.
    </script>

    checkAll()

    To check all the nodes in TreeView.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.checkAll(); // All the TreeView nodes will be checked.
    
    </script>

    checkNode(element)

    To check a node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.checkNode($("#book")); // // Given TreeView node will be checked.
    
    </script>

    collapseAll([levelUntil],[excludeHiddenNodes])

    This method is used to collapse all nodes in TreeView control. If you want to collapse all nodes up to the specific level in TreeView control then we need to pass levelUntil as argument to this method.

    If you want to collapse all nodes except the hidden nodes then we need to pass excludeHiddenNodes as true to this method.

    If you want to collapse all nodes up to the specific level except the hidden nodes then we need to pass levelUntil and excludeHiddenNodes as arguments to this method.

    Name Type Description
    levelUntil number TreeView nodes will collapse until the given level
    excludeHiddenNodes boolean Weather exclude the hidden nodes of TreeView while collapse all nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.collapseAll(); // All the TreeView nodes will be collapsed.
    treeObj.collapseAll(2); // All the TreeView nodes up to level 2 will be collapsed.
    treeObj.collapseAll(null, true); // All the Treeview nodes except hidden nodes will be collapsed.
    treeObj.collapseAll(2, true); // All the Treeview nodes except hidden nodes will be collapsed up to the level 2.
    
    </script>

    collapseNode(element)

    To collapse a particular node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node|object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.collapseNode($("#book")); // Given TreeView node will be collapsed.
    
    </script>

    disableNode(element)

    To disable the node in the TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.disableNode($("#book")); // Given TreeView node will be disabled and child nodes also disabled.
    
    </script>

    enableNode(element)

    To enable the node in the TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.enableNode($("#book")); // Given TreeView node will be enabled and child nodes also enabled.
    
    </script>

    ensureVisible(element)

    To ensure that the TreeView node is visible in the TreeView. This method is useful if we need select a TreeView node dynamically.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    // Given TreeView node is present in TreeView, then the tree is expanded and scrolled automatically to ensure that the current tree node is visible in the TreeView.
    treeObj.ensureVisible($("#book")); 
    
    </script>

    expandAll([levelUntil],[excludeHiddenNodes])

    This method is used to expand all nodes in TreeView control. If you want to expand all nodes up to the specific level in TreeView control then we need to pass levelUntil as argument to this method.

    If you want to expand all nodes except the hidden nodes then we need to pass excludeHiddenNodes as true to this method.

    If you want to expand all nodes up to the specific level except the hidden nodes then we need to pass levelUntil and excludeHiddenNodes as arguments to this method.

    Name Type Description
    levelUntil number TreeView nodes will expand until the given level
    excludeHiddenNodes boolean Weather exclude the hidden nodes of TreeView while expand all nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.expandAll(); // All the TreeView nodes will be expanded.
    treeObj.expandAll(2); // All the TreeView nodes up to the level 2 will be expanded.
    treeObj.expandAll(null, true); // All the Treeview nodes except hidden nodes will be expanded.
    treeObj.expandAll(2, true); // All the Treeview nodes except hidden nodes will be expanded up to the level 2.
    
    </script>

    expandNode(element)

    To expandNode particular node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.expandNode($("#book")); // Given TreeView node will be expanded.
    
    </script>

    getCheckedNodes()

    To get currently checked nodes in TreeView.

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getCheckedNodes(); // All checked TreeView nodes will be returned.
    
    </script>

    getCheckedNodesIndex()

    To get currently checked nodes indexes in TreeView.

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getCheckedNodesIndex(); // All checked TreeView nodes indexes will be returned as array.
    
    </script>

    getChildren(element, [includeNestedChild])

    This method is used to get immediate child nodes of a node in TreeView control. If you want to get the all child nodes include nested child nodes then we need to pass includeNestedChild as true along with element arguments to this method.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node
    includeNestedChild boolean Weather include nested child nodes of TreeView node

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getChildren("book"); // return all immediate child nodes of node ("book") in TreeView as array.
    treeObj.getChildren($("#book"), true); // return all child nodes include nested child nodes of node ("book") in TreeView as array.
    
    </script>

    getNodeCount()

    To get number of nodes in TreeView.

    Returns:

    number

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getNodeCount(); // It will return the TreeView nodes count.
    
    </script>

    NOTE

    “getCount” method name has been renamed as “getNodeCount”

    getExpandedNodes()

    To get currently expanded nodes in TreeView.

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getExpandedNodes(); // All expanded TreeView nodes will be returned.
    
    </script>

    getExpandedNodesIndex()

    To get currently expanded nodes indexes in TreeView.

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getExpandedNodesIndex(); // All expanded TreeView nodes indexes will be returned as array.
    
    </script>

    getNodeByIndex(index)

    To get TreeView node by using index position in TreeView.

    Name Type Description
    index number Index position of TreeView node

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getNodeByIndex(3); // It will return the TreeView node of specified index.
    
    </script>

    getNode(element)

    To get TreeView node data such as id, text, parentId, selected, checked, expanded, level, childes and index.

    Name Type Description
    element string/object ID of TreeView node/object of TreeView node

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getNode($("#book")); // Given TreeView node details will be returned as JSON object.
    
    </script>

    getNodeIndex(element)

    To get current index position of TreeView node.

    Name Type Description
    element string/object ID of TreeView node/object of TreeView node

    Returns:

    number

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [showCheckbox]='showCheckbox'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getNodeIndex($("#book")); // Given TreeView node index position will be returned.
    
    </script>

    getParent(element)

    To get immediate parent TreeView node of particular TreeView node.

    Name Type Description
    element string/object ID of TreeView node/object of TreeView node

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getParent($("#book")); // It will return the immediate parent TreeView node of given TreeView node.
    
    </script>

    getSelectedNode()

    To get the currently selected node in TreeView.

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • html
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getSelectedNode(); // Currently selected TreeView node will be returned.
    
    </script>

    getSelectedNodes()

    To get the currently selected nodes in TreeView.

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getSelectedNodes(); // Currently selected TreeView nodes will be returned as array.
    
    </script>

    getSelectedNodeIndex()

    To get the index position of currently selected node in TreeView.

    Returns:

    number

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getSelectedNodeIndex(); // Currently selected TreeView node index position will be returned.
    
    </script>

    getSelectedNodesIndex()

    To get the index positions of currently selected nodes in TreeView.

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getSelectedNodesIndex(); // Currently selected TreeView nodes index positions will be returned as array.
    
    </script>

    getText(element)

    To get the text of a node in TreeView.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    string

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getText($("#book")); // Given TreeView node text will be returned.
    
    </script>

    getTreeData([id])

    To get the updated datasource of TreeView after performing some operation like drag and drop, node editing, adding and removing node.

    If you pass the ID of TreeView node as arguments for this method then it will return the updated data source with child of specified node otherwise it will return the entire updated data source of TreeView.

    You can also get the updated data source for remote data binding after performing the operation like editing, selecting/unselecting, expanding/collapsing, checking/unchecking and removing node. You cannot get the updated data source when you perform operation like drag and drop, adding node for remote data binding.

    The updated data source also contains custom attributes (“ContactTitle”, “OrderID”, “EmployeeID”, “Freight”) if you return these from server.

    Name Type Description
    id string|number ID of TreeView node

    Returns:

    array

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getTreeData(); // It will return the updated data source as array of JSON object, after performing some operation.
    treeObj.getTreeData("VINET"); // It will return the updated data source with child of specified node as array of JSON object, after performing some operation.
    
    </script>

    getVisibleNodes()

    To get currently visible nodes in TreeView.

    Returns:

    object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.getVisibleNodes(); // It will return the currently visible TreeView nodes.
    
    </script>

    hasChildNode(element)

    To check a node having child or not.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.hasChildNode($("#book")); // It will return true, if the given TreeView node having child node's, else false.
    
    </script>

    hide()

    To show nodes in TreeView.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.hide(); // It will hide all the nodes in TreeView.
    
    </script>

    hideNode(element)

    To hide particular node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.hideNode($("#book")); // It will hide the given TreeView node.
    
    </script>

    insertAfter(newNodeText, target)

    To add a Node or collection of nodes after the particular TreeView node.

    Name Type Description
    newNodeText string|object New node text or JSON object
    target string|object ID of TreeView node/object of TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.insertAfter("NodeNew", "book"); // First argument is new node text and it will be appended after the specified TreeView node, which node is having ID book.
    
    </script>

    insertBefore(newNodeText, target)

    To add a Node or collection of nodes before the particular TreeView node.

    Name Type Description
    newNodeText string|object New node text or JSON object
    target string|object ID of TreeView node/object of TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.insertBefore("NodeNew", "book"); // First argument is new node text and it will be appended before the specified TreeView node, which node is having ID book.
    
    </script>

    isNodeChecked(element)

    To check the given TreeView node is checked or unchecked.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isNodeChecked($("#book")); // It will return true, if the given TreeView node is checked, else false. 
    
    </script>

    isChildLoaded(element)

    To check whether the child nodes are loaded of the given TreeView node.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isChildLoaded($("#book")); // It will return true, if the given TreeView node is child nodes are loaded, else false. 
    
    </script>

    isDisabled(element)

    To check the given TreeView node is disabled or enabled.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isDisabled($("#book")); // It will return true, if the given TreeView node is disabled, else false.
    
    </script>

    isExist(element)

    To check the given node is exist in TreeView.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isExist($("#book")); // It will return true, if the given node is exist in TreeView, else false. 
    
    </script>

    isExpanded(element)

    To get the expand status of the given TreeView node.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isExpanded($("#book")); // It will return true, if the given TreeView node is expanded, else false. 
    
    </script>

    isSelected(element)

    To get the select status of the given TreeView node.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isSelected($("#book")); // It will return true, if the given TreeView node is selected, else false.
    
    </script>

    isVisible(element)

    To get the visibility status of the given TreeView node.

    Name Type Description
    element string|object ID of TreeView node/object of TreeView node

    Returns:

    boolean

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.isVisible($("#book")); // It will return true, if the given TreeView node is visible, else false.
    
    </script>

    loadData(newNodeText, target)

    To load the TreeView nodes from the particular URL. If target tree node is specified, then the given nodes are added as child of target tree node, otherwise nodes are added in TreeView.

    Name Type Description
    URL string URL location, the data returned from the URL will be loaded in TreeView
    target string|object ID of TreeView node/object of TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.loadData("myApplication/childData", "book"); // The array of JSON data returned from the given URL, will be appended as child of node, which node is having ID book.
    
    </script>

    moveNode(sourceNode, destinationNode, index)

    To move the TreeView node with in same TreeView. The new position of given TreeView node will be based on destination node and index position.

    Name Type Description
    sourceNode string|object ID of TreeView node/object of TreeView node
    destinationNode string|object ID of TreeView node/object of TreeView node
    index number New index position of given source node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.moveNode("#art", "#book"); // The source node(#art) will be appended as a child of destination node(book).
    
    </script>

    refresh()

    To refresh the TreeView

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.refresh(); // It will refresh the TreeView.
    
    </script>

    removeAll()

    To remove all the nodes in TreeView.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.removeAll(); // It will remove all the nodes in TreeView.
    
    </script>

    removeNode(element)

    To remove a node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.removeNode($("#book")); // Given TreeView node will be removed and child nodes also removed.
    
    </script>

    selectAll()

    To select all the TreeView nodes when enable allowMultiSelection property.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.selectAll(); // All the TreeView nodes will be selected.
    
    </script>

    selectNode(element)

    This method is used to select a node in TreeView control. If you want to select the collection of nodes in TreeView control then we need to enable allowMultiSelection property.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/ collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.selectNode($("#book")); // Given TreeView node will be selected.
    treeObj.selectNode([$("#book"), "art"]); // Given TreeView nodes will be selected when enable `allowMultiSelection` property.
    
    </script>

    show()

    To show nodes in TreeView.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.show(); // It will show all the nodes in TreeView.
    
    </script>

    showNode(element)

    To show a node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.showNode($("#book")); // It will show the given TreeView node.
    
    </script>

    unCheckAll()

    To uncheck all the nodes in TreeView.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.unCheckAll(); // All the TreeView nodes will be unchecked.
    
    </script>

    uncheckNode(element)

    To uncheck a node in TreeView.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.uncheckNode($("#book")); // Given TreeView node will be unchecked.
    
    </script>

    unselectAll()

    To unselect all the TreeView nodes when enable allowMultiSelection property.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.unselectAll(); // All the TreeView nodes will be unselected.
    
    </script>

    unselectNode(element)

    This method is used to unselect a node in TreeView control. If you want to unselect the collection of nodes in TreeView control then we need to enable allowMultiSelection property.

    Name Type Description
    element string|object|array ID of TreeView node/object of TreeView node/ collection of ID/object of TreeView nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.unselectNode($("#book")); // Given TreeView node will be unselected.
    treeObj.unselectNode([$("#book"), "art"]); // Given TreeView nodes will be unselected when enable `allowMultiSelection` property.
    
    </script>

    updateText(target, newText)

    To edit or update the text of the TreeView node.

    Name Type Description
    target string|object ID of TreeView node/object of TreeView node
    newText string New text

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'></ej-treeview>
  • ts
  • <script>
    
    var treeObj = $("#treeView").data("ejTreeView");
    treeObj.updateText("book", "NewText"); // It will update the text of the given TreeView node.
    
    </script>

    Events

    beforeAdd

    Fires before adding node to TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    data string/object returns the given new node data
    targetParent object returns the parent element, the given new nodes to be appended to the given parent element
    parentDetails object returns the given parent node details

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeAdd)="onBeforeAdd($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeAdd(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeCollapse

    Fires before collapse a node.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    value string returns the value of the node
    currentElement object returns the current element of the node clicked
    isChildLoaded boolean returns the child nodes are loaded or not
    id string returns the id of currently clicked node
    parentId string returns the parent id of currently clicked node
    async boolean returns the format asynchronous or synchronous

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeCollapse)="onBeforeCollapse($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeCollapse(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeCut

    Fires before cut node in TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    target object returns the target element, the given node to be cut
    nodeDetails object returns the given target node values
    keyCode number returns the key pressed key code value

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeCut)="onBeforeCut($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeCut(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeDelete

    Fires before deleting node in TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    target object returns the target element, the given node to be deleted
    nodeDetails object returns the given target node values
    parentElement object returns the current parent element of the target node
    parentDetails object returns the parent node values
    removedNodes array returns the currently removed nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeDelete)="onBeforeDelete($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeDelete(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeEdit

    Fires before editing the node in TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    currentElement object returns the current element of the node clicked

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeEdit)="onBeforeEdit($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeEdit(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeExpand

    Fires before expanding the node.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    value string returns the value of the node
    isChildLoaded boolean if the child node is ready to expanded state; otherwise, false.
    currentElement object returns the current element of the node clicked
    id string returns the id of currently clicked node
    parentId string returns the parent id of currently clicked node
    async boolean returns the format asynchronous or synchronous

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeExpand)="onBeforeExpand($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeExpand(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeLoad

    Fires before loading nodes to TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    AjaxOptions object returns the AJAX settings object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeLoad)="onBeforeLoad($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeLoad(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforePaste

    Fires before paste node in TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    target object returns the target element, the given node to be pasted
    nodeDetails object returns the given target node values
    keyCode number returns the key pressed key code value

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforePaste)="onBeforePaste($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforePaste(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    beforeSelect

    Fires before selecting node in TreeView.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    target object returns the target element, the given node to be selected
    nodeDetails object returns the given target node values

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (beforeSelect)="onBeforeSelect($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onBeforeSelect(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    create

    Fires when TreeView created successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (create)="onCreate($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onCreate(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    destroy

    Fires when TreeView destroyed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (destroy)="onDestroy($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onDestroy(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    inlineEditValidation

    Fires before nodeEdit Successful.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    newText string returns the new entered text for the node
    id object returns the current node element id
    oldText string returns the old node text

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (inlineEditValidation)="onInlineEditValidation($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onInlineEditValidation(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    keyPress

    Fires when key pressed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    currentElement object returns the current element of the node clicked
    value string returns the value of the node
    path string returns node path from root element
    keyCode number returns the key pressed key code value
    isExpanded boolean it returns when the current node is in expanded state; otherwise, false.
    id string returns the id of current TreeView node
    parentId string returns the parentId of current TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (keyPress)="onKeyPress($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onKeyPress(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    loadError

    Fires when data load fails.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    error object returns the AJAX error object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (loadError)="onLoadError($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onLoadError(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    loadSuccess

    Fires when data loaded successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    data object returns the success data from the URL
    targetParent object returns the target parent element, the data returned from the URL to be appended to the given parent element, else in TreeView
    parentDetails object returns the given parent node details

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (loadSuccess)="onLoadSuccess($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onLoadSuccess(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeAdd

    Fires once node added successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    data object returns the added data, that are given initially
    nodes object returns the newly added elements
    parentElement object returns the target parent element of the added element
    parentDetails object returns the given parent node details

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeAdd)="onNodeAdd($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeAdd(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeCheck

    Fires once node checked successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    value string returns the value of the node
    id string returns the id of the current element of the node clicked
    parentId string returns the id of the parent element of current element of the node clicked
    currentElement object returns the current element of the node clicked
    isChecked boolean it returns true when the node checkbox is checked; otherwise, false.
    currentNode Array it returns the currently checked node name
    currentCheckedNodes Array it returns the currently checked and its child node details

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeCheck)="onNodeCheck($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeCheck(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeClick

    Fires when node clicked successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    currentElement object returns the current element of the node clicked
    id string returns the id of currently clicked TreeView node
    parentId string returns the parentId of currently clicked TreeView node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeClick)="onNodeClick($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeClick(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeCollapse

    Fires when node collapsed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    id string returns the id of the current element of the node clicked
    type string returns the name of the event
    parentId string returns the id of the parent element of current element of the node clicked
    value string returns the value of the node
    currentElement object returns the current element of the node clicked
    isChildLoaded boolean returns the child nodes are loaded or not
    async boolean returns the format asynchronous or synchronous

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeCollapse)="onNodeCollapse($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeCollapse(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeCut

    Fires when node cut successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    parentElement object returns the current parent element of the cut node
    parentDetails object returns the given parent node details
    keyCode number returns the key pressed key code value

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeCut)="onNodeCut($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeCut(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeDelete

    Fires when node deleted successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    parentElement object returns the current parent element of the deleted node
    parentDetails object returns the given parent node details
    removedNodes array returns the currently removed nodes

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeDelete)="onNodeDelete($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeDelete(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeDrag

    Fires when node dragging.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    dragTarget object returns the original drag target
    target object returns the current target TreeView node
    targetElementData object returns the current target details
    draggedElement object returns the current parent element of the target node
    draggedElementData object returns the given parent node details
    event object returns the event object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeDrag)="onNodeDrag($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeDrag(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeDragStart

    Fires once node drag start successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    dragTarget object returns the original drag target
    parentElement object returns the current dragging parent TreeView node
    parentElementData object returns the current dragging parent TreeView node details
    target object returns the current parent element of the dragging node
    targetElementData object returns the given parent node details
    event object returns the event object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeDragStart)="onNodeDragStart($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeDragStart(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeDragStop

    Fires before the dragged node to be dropped.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    dropTarget object returns the original drop target
    draggedElement object returns the current dragged TreeView node
    draggedElementData object returns the current dragged TreeView node details
    target object returns the current parent element of the dragged node
    targetElementData object returns the given parent node details
    position string returns the drop position such as before, after or over
    event object returns the event object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onNodeDragStop($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeDragStop(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeDropped

    Fires once node dropped successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    dropTarget object returns the original drop target
    droppedElement object returns the current dropped TreeView node
    droppedElementData object returns the current dropped TreeView node details
    target object returns the current parent element of the dropped node
    targetElementData object returns the given parent node details
    position string returns the drop position such as before, after or over
    event object returns the event object

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDropped)="onNodeDropped($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeDropped(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeEdit

    Fires once node edited successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    id string returns the id of the element
    oldText string returns the oldText of the element
    newText string returns the newText of the element
    event object returns the event object
    target object returns the target element, the given node to be cut
    nodeDetails object returns the given target node values

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowEditing]='allowEditing' (nodeEdit)="onNodeEdit($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeEdit(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeExpand

    Fires once node expanded successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    value string returns the value of the node
    isChildLoaded boolean if the child node is ready to expanded state; otherwise, false.
    currentElement object returns the current element of the node clicked
    id string returns the id of currently clicked node
    parentId string returns the parent id of currently clicked node
    async boolean returns the format asynchronous or synchronous

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeExpand)="onNodeExpand($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeExpand(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodePaste

    Fires once node pasted successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    target object returns the pasted element
    nodeDetails object returns the given target node values
    keyCode number returns the key pressed key code value

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodePaste)="onNodePaste($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodePaste(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeSelect

    Fires when node selected successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    id object returns the id of the current element of the node clicked
    parentId object returns the id of the parent element of current element of the node clicked
    selectedNodes array returns the current selected nodes index of TreeView
    value string returns the value of the node
    currentElement object returns the current element of the node clicked

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeSelect)="onNodeSelect($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeSelect(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeUncheck

    Fires once node unchecked successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TreeView model
    type string returns the name of the event
    event object returns the event object
    id object returns the id of the current element of the node clicked
    parentId object returns the id of the parent element of current element of the node clicked
    value string returns the value of the node
    currentElement object returns the current element of the node clicked
    isChecked boolean it returns true when the node checkbox is checked; otherwise, false.
    currentNode string it returns currently unchecked node name
    currentUncheckedNodes Array it returns currently unchecked node and its child node details.

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' (nodeUncheck)="onNodeUncheck($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeUncheck(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    nodeUnselect

    Fires once node unselected successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    currentElement object returns the current element of the node unselected
    id string returns the id of the current element of the node unselected
    model object returns the TreeView model
    parentId string returns the id of the parent element of current element of the node unselected
    selectedNodes array returns the current selected nodes index of TreeView
    type string returns the name of the event
    value string returns the value of the node

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field' [allowMultiSelection]='allowMultiSelection' (nodeUnselect)="onNodeUnselect($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onNodeUnselect(e: any){ 
            // Your code here
            }
    
     }
    
    </script>

    ready

    Fires when TreeView nodes are loaded successfully

    </tr>
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    element object returns the TreeView element.
    model object returns the TreeView model
    type string returns the name of the event

    Example

  • html
  • <ej-treeview id="treeView" [fields]='field'  (ready)="onReady($event)"></ej-treeview>
  • ts
  • <script>
    
    export class AppComponent { 
            constructor(){
            }
            onReady(e: any){ 
            // Your code here
            }
    
     }
    
    </script>