ejTreeView

5 Sep 201824 minutes to read

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.

Syntax

JAVASCRIPT

$(element).ejTreeView(options)

Name	Type	Description
options	object	settings for TreeView.

Example

HTML

<ul id="treeView">
       <li>Artwork
           <ul>
               <li>Abstract
                   <ul>
                       <li>2 Acrylic Mediums</li>
                       <li>Creative Acrylic</li>
                       <li>Modern Painting</li>
                       <li>Canvas Art</li>
                       <li>Black white</li>
                   </ul>
               </li>
           </ul>
       </li>
       <li>Books
           <ul>
               <li>Entertaining</li>
               <li>Design</li>
           </ul>
       </li>
       <li>Music
           <ul>
               <li>Mass</li>
               <li>Folk</li>
           </ul>
       </li>
   </ul>

 
<script>
// Create TreeView
$('#treeView').ejTreeView();    
</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

<div id="treeView"></div>
<script>
//To Initialize the TreeView with the allowDragAndDrop value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowDragAndDrop: 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

<div id="treeView"></div>
<script>
// Initialize the TreeView with the allowDragAndDropAcrossControl value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowDragAndDrop: true,
    allowDragAndDropAcrossControl: 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

<div id="treeView"></div>
<script>
// Initialize the TreeView with the allowDropSibling value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowDragAndDrop: true,
    allowDropSibling: 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

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

allowEditing boolean

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

Default Value

• false

Example

HTML

<div id="treeView"></div>
<script>
// Initialize the TreeView with the allowEditing value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowEditing: 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

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

allowMultiSelection boolean

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

Default Value

• false

Example

HTML

<div id="treeView"></div>
<script>
// Initialize the TreeView with the allowMultiSelection value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowMultiSelection: 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

<div id="treeView"></div>
<script>                  
// Initialize the TreeView with the autoCheck value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    autoCheck: true,
    showCheckbox: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

<div id="treeView"></div>
<script>
// Initialize the TreeView with the autoCheckParentNode value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
    autoCheckParentNode: false,
    showCheckbox: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

<div id="treeView"></div>
<script>          
// Initialize the TreeView with the checkedNodes value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    showCheckbox: true,
    checkedNodes: [1, 2] 
});
 </script>

cssClass string

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

Default Value

• ””

Example

HTML

<div id="treeView"></div>
<script>
// Initialize the TreeView with the cssClass value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    cssClass: '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

<div id="treeView"></div>
<script>        
// Initialize the TreeView with the enableAnimation value specified.  
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    enableAnimation: 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

<div id="treeView"></div>
<script>  
// Initialize the TreeView with the enabled value specified.
$("#treeView").ejTreeView({ 
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    enabled: 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

<div id="treeView"></div>
<script>
// Initialize the TreeView with the enableMultipleExpand value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    enableMultipleExpand: 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

<div id="treeView"></div>
<script>
// Initialize the TreeView with the enablePersistence value specified.
$("#treeView").ejTreeView({ 
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    enablePersistence:false
});
 </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>

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

<div id="treeView"></div>
<script>          
// Initialize the TreeView with the expandedNodes value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    expandedNodes: [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

<div id="treeView"></div>
<script>  
//Initialize the TreeView with the expandOn value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
    expandOn: '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

<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" },
});
 </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

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

height string number

Defines the height of the TreeView.

Default Value

• Null

Example

HTML

<div id="treeView"></div>
<script>                  
// Initialize the TreeView with the height value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    height: 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

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

loadOnDemand boolean

Specifies the child nodes to be loaded on demand

Default Value

• false

Example

HTML

<div id="treeView"></div>
<script>
// Initialize the TreeView with the loadOnDemand value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    loadOnDemand: 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

<div id="treeView"></div>
<script>        
//Initialize the TreeView with the selectedNode value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    selectedNode: 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

<div id="treeView"></div>
<script>          
// Initialize the TreeView with the selectedNodes value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    allowMultiSelection: true,
    selectedNodes: [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

<div id="treeView"></div>
<script>        
// Initialize the TreeView with the showCheckbox value specified.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
    showCheckbox: 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

<div id="treeView"></div>
<script>        
// Initialize the TreeView with ascending order of tree nodes  
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
    sortSettings: {
        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

<div id="treeView"></div>
<script>        
// Initialize the TreeView with descending order of tree nodes  
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" }, 
    sortSettings: {
        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

<ul id="treeView">
       <li><a class="uk-style">UK</a>
           <ul>
   <li>
               <div class="cont-list">
                   <img src="styles/images/treeview/template-image-1.png"/>
                       <div class="cont-del"></div>
                       <div class="cont-details"></div>
                       <b>Steven John</b><br/>
                       <span>London</span><br/>
                       <span>555-5665-2323</span>
                   </div>
 <div class="treeFooter"></div>
               </li>
           </ul>
       </li>
       <li><a class=""usa-style"">USA</a>
           <ul>
   <li>
               <div class="cont-list">
                   <img src="styles/images/treeview/template-image-2.png"/>
                       <div class="cont-del"></div>
                       <div class="cont-details"></div>
                       <b>Andrew</b><br/>
                       <span>Capital way</span><br/>
                       <span>934-8374-2455</span>
                   </div>
 <div class="treeFooter"></div>
               </li>
               <li>
               <div class="cont-list">
                   <img src="styles/images/treeview/template-image-3.png"/>
                       <div class="cont-del"></div>
                       <div class="cont-details"></div>
                       <b>Angelica</b><br/>
                       <span>Dayton</span><br/>
                       <span>988-4243-0806</span>
                   </div>
 <div class="treeFooter"></div>
               </li>
           </ul>
       </li>
   </ul>

 
<script>
// Initialize the TreeView with the template value specified
$("#treeView").ejTreeView({ 
   template: "#templateLocalData"
});
 </script>

width string|number

Defines the width of the TreeView.

Default Value

• Null

Example

HTML

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

Methods

addNode(newNodeText, target, preventTargetExpand)

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
preventTargetExpand	boolean	Parent node will be prevented from auto expanding

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" }; // In this object, we can also use selected, isChecked, imageUrl, spriteCssClass properties.
treeObj.addNode(obj, $("#book"));
</script>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" };
treeObj.addNode(obj, $("#book"), true); // First argument is new node text and it will be appended as child of node, which node is having ID book. In last argument set boolean value is true and it prevent parent node from auto expanding.
</script>

addNodes(collection, target, preventTargetExpand)

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
preventTargetExpand	boolean	Parent node will be prevented from auto expanding

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});
var treeObj = $("#treeView").data("ejTreeView");
var obj = [{ id: "temp", name: "New node" }, { id: "temp1", name: "New node1" }];
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>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" }; // In this object, we can also use selected, isChecked, imageUrl, spriteCssClass properties.
treeObj.addNode(obj, $("#book"));
</script>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" }; // In this object, we can also use selected, isChecked, imageUrl, spriteCssClass properties.
treeObj.addNode(obj, $("#book"), true); // In last argument set boolean value is true and it prevent parent node from auto expanding.
</script>

checkAll()

To check all the nodes in TreeView.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.checkAll(); // All the TreeView nodes will be checked.
</script>

HTML

<script>
$("#treeView").ejTreeView("checkAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.checkNode($("#book")); // // Given TreeView node will be checked.
</script>

HTML

<script>
$("#treeView").ejTreeView("checkNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("collapseAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.collapseNode($("#book")); // Given TreeView node will be collapsed.
</script>

HTML

<script>
$("#treeView").ejTreeView("collapseNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.disableNode($("#book")); // Given TreeView node will be disabled and child nodes also disabled.
</script>

HTML

<script>
$("#treeView").ejTreeView("disableNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.enableNode($("#book")); // Given TreeView node will be enabled and child nodes also enabled.
</script>

HTML

<script>
$("#treeView").ejTreeView("enableNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("expandAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.expandNode($("#book")); // Given TreeView node will be expanded.
</script>

HTML

<script>
$("#treeView").ejTreeView("expandNode", $("#book"));        
</script>

getCheckedNodes()

To get currently checked nodes in TreeView.

Returns:

object

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getCheckedNodes(); // All checked TreeView nodes will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getCheckedNodes");        
</script>

getCheckedNodesIndex()

To get currently checked nodes indexes in TreeView.

Returns:

array

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getCheckedNodesIndex(); // All checked TreeView nodes indexes will be returned as array.
</script>

HTML

<script>
$("#treeView").ejTreeView("getCheckedNodesIndex");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("getChildren", $("#book"));
$("#treeView").ejTreeView("getChildren", "book", true);  
</script>

getNodeCount()

To get number of nodes in TreeView.

Returns:

number

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeCount(); // It will return the TreeView nodes count.
</script>

HTML

<script>
$("#treeView").ejTreeView("getNodeCount");        
</script>

NOTE

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

getExpandedNodes()

To get currently expanded nodes in TreeView.

Returns:

object

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getExpandedNodes(); // All expanded TreeView nodes will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getExpandedNodes");        
</script>

getExpandedNodesIndex()

To get currently expanded nodes indexes in TreeView.

Returns:

array

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getExpandedNodesIndex(); // All expanded TreeView nodes indexes will be returned as array.
</script>

HTML

<script>
$("#treeView").ejTreeView("getExpandedNodesIndex");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeByIndex(3); // It will return the TreeView node of specified index.
</script>

HTML

<script>
$("#treeView").ejTreeView("getNodeByIndex", 3);        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNode($("#book")); // Given TreeView node details will be returned as JSON object.
</script>

HTML

<script>
$("#treeView").ejTreeView("getNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getNodeIndex($("#book")); // Given TreeView node index position will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getNodeIndex", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getParent($("#book")); // It will return the immediate parent TreeView node of given TreeView node.
</script>

HTML

<script>
$("#treeView").ejTreeView("getParent", $("#book"));        
</script>

getSelectedNode()

To get the currently selected node in TreeView.

Returns:

object

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNode(); // Currently selected TreeView node will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getSelectedNode");        
</script>

getSelectedNodes()

To get the currently selected nodes in TreeView.

Returns:

array

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodes(); // Currently selected TreeView nodes will be returned as array.
</script>

HTML

<script>
$("#treeView").ejTreeView("getSelectedNodes");        
</script>

getSelectedNodeIndex()

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

Returns:

number

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodeIndex(); // Currently selected TreeView node index position will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getSelectedNodeIndex");        
</script>

getSelectedNodesIndex()

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

Returns:

array

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getSelectedNodesIndex(); // Currently selected TreeView nodes index positions will be returned as array.
</script>

HTML

<script>
$("#treeView").ejTreeView("getSelectedNodesIndex");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getText($("#book")); // Given TreeView node text will be returned.
</script>

HTML

<script>
$("#treeView").ejTreeView("getText", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getTreeData(); // It will return the updated datasource as array of JSON object, after performing some operation.
treeObj.getTreeData("book"); // It will return the updated datasource with child of specified node as array of JSON object, after performing some operation.
</script>

HTML

<div id="treeView"></div>
<script type="text/javascript">
// DataManager creation
var dataManager = ej.DataManager({
    url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true
});
// Query creation
var query = ej.Query().from("Orders").select("CustomerID,OrderID,EmployeeID,Freight").take(3);
$("#treeView").ejTreeView({
    fields: {
        dataSource: dataManager, query: query, id: "CustomerID", text: "CustomerID",
        child: {
            dataSource: dataManager, tableName: "Customers", id: "Country", parentId: "CustomerID", text: "ContactName", ContactTitle: "ContactTitle"
        }
    }
});

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>

HTML

<script>
$("#treeView").ejTreeView("getTreeData");
$("#treeView").ejTreeView("getTreeData", "book");
</script>

getVisibleNodes()

To get currently visible nodes in TreeView.

Returns:

object

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.getVisibleNodes(); // It will return the currently visible TreeView nodes.
</script>

HTML

<script>
$("#treeView").ejTreeView("getVisibleNodes");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.hasChildNode($("#book")); // It will return true, if the given TreeView node having child node's, else false.
</script>

HTML

<script>
$("#treeView").ejTreeView("hasChildNode", $("#book"));        
</script>

hide()

To show nodes in TreeView.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.hide(); // It will hide all the nodes in TreeView.
</script>

HTML

<script>
$("#treeView").ejTreeView("hide");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.hideNode($("#book")); // It will hide the given TreeView node.
</script>

HTML

<script>
$("#treeView").ejTreeView("hideNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" }; // In this object, we can also use selected, isChecked, imageUrl, spriteCssClass properties.
treeObj.insertAfter(obj, $("#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

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
var obj = { id: "temp", name: "New node" }; // In this object, we can also use selected, isChecked, imageUrl, spriteCssClass properties.
treeObj.insertBefore(obj, $("#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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isNodeChecked($("#book")); // It will return true, if the given TreeView node is checked, else false. 
</script>

HTML

<script>
$("#treeView").ejTreeView("isNodeChecked", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("isChildLoaded", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isDisabled($("#book")); // It will return true, if the given TreeView node is disabled, else false. 
</script>

HTML

<script>
$("#treeView").ejTreeView("isDisabled", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isExist($("#book")); // It will return true, if the given node is exist in TreeView, else false. 
</script>

HTML

<script>
$("#treeView").ejTreeView("isExist", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isExpanded($("#book")); // It will return true, if the given TreeView node is expanded, else false. 
</script>

HTML

<script>
$("#treeView").ejTreeView("isExpanded", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isSelected($("#book")); // It will return true, if the given TreeView node is selected, else false.
</script>

HTML

<script>
$("#treeView").ejTreeView("isSelected", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.isVisible($("#book")); // It will return true, if the given TreeView node is visible, else false.
</script>

HTML

<script>
$("#treeView").ejTreeView("isVisible", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.loadData("myApplication/childData", $("#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

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.moveNode("#art", "#book"); // The source node(#art) will be appended as a child of destination node(book).
</script>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.moveNode($("#art"), "", 3); // The source node will be placed directly to the given index position in TreeView.
</script>

refresh()

To refresh the TreeView

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.refresh(); // It will refresh the TreeView.
</script>

HTML

<script>
$("#treeView").ejTreeView("refresh");        
</script>

removeAll()

To remove all the nodes in TreeView.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.removeAll(); // It will remove all the nodes in TreeView.
</script>

HTML

<script>
$("#treeView").ejTreeView("removeAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.removeNode($("#book")); // Given TreeView node will be removed and child nodes also removed.
</script>

HTML

<script>
$("#treeView").ejTreeView("removeNode", $("#book"));        
</script>

selectAll()

To select all the TreeView nodes when enable allowMultiSelection property.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    allowMultiSelection: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.selectAll(); // All the TreeView nodes will be selected.
</script>

HTML

<script>
$("#treeView").ejTreeView("selectAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("selectNode", $("#book"));        
</script>

show()

To show nodes in TreeView.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.show(); // It will show all the nodes in TreeView.
</script>

HTML

<script>
$("#treeView").ejTreeView("show");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.showNode($("#book")); // It will show the given TreeView node.
</script>

HTML

<script>
$("#treeView").ejTreeView("showNode", $("#book"));        
</script>

unCheckAll()

To uncheck all the nodes in TreeView.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.unCheckAll(); // All the TreeView nodes will be unchecked.
</script>

HTML

<script>
$("#treeView").ejTreeView("unCheckAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    showCheckbox:true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.uncheckNode($("#book")); // Given TreeView node will be unchecked.
</script>

HTML

<script>
$("#treeView").ejTreeView("uncheckNode", $("#book"));        
</script>

unselectAll()

To unselect all the TreeView nodes when enable allowMultiSelection property.

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    allowMultiSelection: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.unselectAll(); // All the TreeView nodes will be unselected.
</script>

HTML

<script>
$("#treeView").ejTreeView("unselectAll");        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

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>

HTML

<script>
$("#treeView").ejTreeView("unselectNode", $("#book"));        
</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

<div id="treeView"></div>
<script>
// Initialize TreeView    
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
});

var treeObj = $("#treeView").data("ejTreeView");
treeObj.updateText("book", "NewText"); // It will update the text of the given TreeView node.
</script>

HTML

<script>
var treeObj = $("#treeView").data("ejTreeView");
treeObj.updateText($("#book"), "NewText");
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeAdd event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeAdd: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeCollapse event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeCollapse: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeCut event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeCut: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeDelete event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeDelete: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeEdit event.
$("#treeView").ejTreeView({
    allowEditing: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeEdit: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeExpand event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeExpand: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeLoad event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeLoad: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforePaste event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforePaste: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with beforeSelect event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    beforeSelect: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with create event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    create: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with destroy event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    destroy: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with inlineEditValidation event.
$("#treeView").ejTreeView({
    allowEditing: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    inlineEditValidation: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with keyPress event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    keyPress: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with loadError event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    loadError: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with loadSuccess event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    loadSuccess: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeAdd event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeAdd: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeCheck event.
$("#treeView").ejTreeView({
    showCheckbox: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeCheck: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeClick event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeClick: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeCollapse event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeCollapse: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeCut event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeCut: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeDelete event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeDelete: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeDrag event.
$("#treeView").ejTreeView({
    allowDragAndDrop: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeDrag: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeDragStart event.
$("#treeView").ejTreeView({
    allowDragAndDrop: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeDragStart: function(args) {}
});
</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
preventTargetExpand	boolean	if it is true, the parent node will be prevented from auto expanding; otherwise, it work's usually
event	object	returns the event object

Example

HTML

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeDragStop event.
$("#treeView").ejTreeView({
    allowDragAndDrop: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeDragStop: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeDropped event.
$("#treeView").ejTreeView({
    allowDragAndDrop: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeDropped: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeEdit event.
$("#treeView").ejTreeView({
    allowEditing: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeEdit: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeExpand event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeExpand: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodePaste event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodePaste: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeSelect event.
$("#treeView").ejTreeView({
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeSelect: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeUncheck event.
$("#treeView").ejTreeView({
    showCheckbox: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeUncheck: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// Initialize TreeView with nodeUnselect event.
$("#treeView").ejTreeView({
    allowMultiSelection: true,
    fields: { dataSource: window.treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild", expanded: "expanded" },
    nodeUnselect: function(args) {}
});
</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

<div id="treeView"></div>
<script>
// DataManager creation
var dataManger = ej.DataManager({
    url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
});
// Query creation
var query = ej.Query().from("Categories").select("CategoryID,CategoryName").take(3);
// Initialize TreeView with ready event.
$("#treeView").ejTreeView({
    fields: {
        dataSource: dataManger, query: query, id: "CategoryID", text: "CategoryName",
        child: { dataSource: dataManger, tableName: "Products", parentId: "CategoryID", text: "ProductName" }
    },
    ready: function(args) {
        alert("All TreeView nodes are loaded successfully.");
    }
});
</script>