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.

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>