ejDropDownTree

11 Jul 201824 minutes to read

The DropDownTree control provides a list of hierarchical data to choose an item from the list.
It can including other HTML elements such as images, textboxes, check box, radio buttons, and so on.

Syntax

  • JAVASCRIPT
  • $('#selectItem').ejDropDownTree();

    Example

  • HTML
  • <input type="text" id="selectItem" />
    
    <div id="itemList">
       <ul id="treeView">
          <li class="expanded">
             United States
             <ul>
                <li>California</li>
                <li>Colorado</li>
                <li>Georgia</li>
             </ul>
          </li>
          <li>
             United Kingdom
             <ul>
                <li>England</li>
                <li>Scotland</li>
                <li>Northern Ireland</li>
             </ul>
          </li>
          <li>
             Asia
             <ul>
                <li>Afghanistan</li>
                <li>Kuwait</li>
                <li>Russia</li>
             </ul>
          </li>
       </ul>
    </div>
    
    <script type="text/javascript">
    $('#selectItem').ejDropDownTree({
                    showPopupOnLoad: true,
                    watermarkText: "Please select",
                    width: "100%",
                    targetId: "itemList"
                });
    </script>

    Requires

    • module:jQuery

    • module:jQuery.easing.1.3.js

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.dropdowntree.js

    • module:ej.waitingpopup.js

    • module:ej.combobox.js

    • module:ej.checkbox.js

    • module:ej.scroller.js

    Members

    allowKeyboardNavigation boolean

    Uses the keyboard for any action, including opening and closing the drop-down tree; navigating, expanding, and collapsing nodes of the dropdown tree; and more.

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    allowKeyboardNavigation: false
                });
            });
        </script>

    cssClass string

    Sets the root CSS class for DropDownTree that allows customization of appearance.

    Default Value

    • ``

    Example

  • HTML
  • <input type="text" id="itemList" />
        <script type="text/javascript">
            var localData = [
                       { id: 1, name: "Discover Music", hasChild: true, expanded: true },
                       { id: 2, pid: 1, name: "Hot Singles" },
                       { id: 3, pid: 1, name: "Rising Artists" },
                       { id: 4, pid: 1, name: "Live Music" },
                       { id: 6, pid: 1, name: "Best of 2013 So Far" },
                       { id: 7, name: "Sales and Events", hasChild: true, expanded: true },
                       { id: 8, pid: 7, name: "100 Albums - $5 Each" },
                       { id: 9, pid: 7, name: "Hip-Hop and R&B Sale" },
                       { id: 10, pid: 7, name: "CD Deals" },
                       { id: 11, name: "Categories", hasChild: true },
                       { id: 12, pid: 11, name: "Songs" },
                       { id: 13, pid: 11, name: "Bestselling Albums" },
                       { id: 14, pid: 11, name: "New Releases" },
                       { id: 15, pid: 11, name: "Bestselling Songs" },
                       { id: 16, name: "MP3 Albums", hasChild: true },
                       { id: 17, pid: 16, name: "Rock" },
                       { id: 18, pid: 16, name: "Gospel" },
                       { id: 19, pid: 16, name: "Latin Music" },
                       { id: 20, pid: 16, name: "Jazz" },
                       { id: 21, name: "More in Music", hasChild: true },
                       { id: 22, pid: 21, name: "Music Trade-In" },
                       { id: 23, pid: 21, name: "Redeem a Gift Card" },
                       { id: 24, pid: 21, name: "Band T-Shirts" },
                       { id: 25, pid: 21, name: "Mobile MVC" }];
    
        
        $(function () {
            $('#itemList).ejDropDownTreeList({
                fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" },
                cssClass: 'gradient-lime'
            });
        });
        </script>

    delimiter string

    Sets the separator when the multiSelectMode with delimiter option or checkbox is enabled. When you enter the delimiter value, the text after the delimiter is considered as a separate word or query. The delimiter string is a single character and must be a symbol. Mostly, the delimiter symbol is used as comma (,), semi-colon (;), or any other special character.

    Default Value

    • ”,”

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 6, pid: 1, name: "Anderson" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" },
                        { id: 15, pid: 11, name: "Johnson" },
                        { id: 16, name: "WPF Team", hasChild: true },
                        { id: 17, pid: 16, name: "Rock" },
                        { id: 18, pid: 16, name: "Gospel" },
                        { id: 19, pid: 16, name: "Brown" },
                        { id: 20, pid: 16, name: "Miller" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    delimiter: ";"
                });
            });
        </script>

    enabled boolean

    Indicates whether the DropDownTree control responds to user interaction or not. By default, the control is in the enabled mode and can be disabled by setting this to false.

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    enabled: false
                });
            });
        </script>

    enableAnimation boolean

    The enabled animation property uses the easeOutQuad animation to SlideDown and SlideUp the popup wrapper in 200 and 100 milliseconds, respectively.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    enableAnimation: true
                });
            });
        </script>

    enablePersistence boolean

    Gets or sets a value that indicates whether to continue the DropDownTree model state in the page using applicable medium, i.e., HTML5 localStorage or cookies.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    enablePersistence: true
                });
            });
        </script>

    enableRTL boolean

    Sets the DropDownTree textbox direction from right to left alignment.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    enableRTL: true
                });
            });
        </script>

    footerTemplate string

    Creates footer with text or HTML elements for the dropdown items.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="empList" />
    
    <script type="text/javascript">
        var treeData = [
               { id: 1, text: "Software Engineer", hasChild: true, expanded: true },
                   { id: 2, pid: 1, imgId: "3", text: "Erik Linden", eimg: "3", country: "England" },
                   { id: 3, pid: 1, imgId: "8", text: "Louis", eimg: "7", country: "Australia" },
               { id: 4, text: "Tester", hasChild: true, expanded: true },
                   { id: 5, pid: 4, imgId: "6", text: "John Linden", eimg: "6", country: "Norway" },
                   { id: 6, pid: 4, imgId: "7", text: "Lawrence", eimg: "8", country: "India" }
        ];
        $(function () {
            $('#empList').ejDropDownTree({
                watermarkText: "Please select",
                width: "100%",
                popupSettings: {
                    height: "500px"
                },
                footerTemplate: '<div class="e-tree-footer"> <span>End of list</span></div>',
                treeViewSettings: {
                    fields: {
                        dataSource: treeData,
                        id: "id", parentId: "pid", text: "text", hasChild: "hasChild"
                    },
                    template: "#treeTemplate"
                }
            });
        });
    </script>

    fullPathDelimiter string

    Serves as a patch of the entries comprising the path (that is set in the entry area) of the selected node.

    Default Value

    • ’/’

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 6, pid: 1, name: "Anderson" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" },
                        { id: 15, pid: 11, name: "Johnson" },
                        { id: 16, name: "WPF Team", hasChild: true },
                        { id: 17, pid: 16, name: "Rock" },
                        { id: 18, pid: 16, name: "Gospel" },
                        { id: 19, pid: 16, name: "Brown" },
                        { id: 20, pid: 16, name: "Miller" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    textMode: "fullPath",
                    fullPathDelimiter: "->"
                });
            });
        </script>

    headerTemplate string

    Creates header with text or HTML elements for the dropdown items.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="empList" />
    
    <script type="text/javascript">
        var treeData = [
               { id: 1, text: "Software Engineer", hasChild: true, expanded: true },
                   { id: 2, pid: 1, imgId: "3", text: "Erik Linden", eimg: "3", country: "England" },
                   { id: 3, pid: 1, imgId: "8", text: "Louis", eimg: "7", country: "Australia" },
               { id: 4, text: "Tester", hasChild: true, expanded: true },
                   { id: 5, pid: 4, imgId: "6", text: "John Linden", eimg: "6", country: "Norway" },
                   { id: 6, pid: 4, imgId: "7", text: "Lawrence", eimg: "8", country: "India" }
        ];
        $(function () {
            $('#empList').ejDropDownTree({
                watermarkText: "Please select",
                width: "100%",
                popupSettings: {
                    height: "500px"
                },
                headerTemplate: '<div class="e-tree-header"><span>Employees </span></div>',
                treeViewSettings: {
                    fields: {
                        dataSource: treeData,
                        id: "id", parentId: "pid", text: "text", hasChild: "hasChild"
                    },
                    template: "#treeTemplate"
                }
            });
        });
    </script>

    height string|number

    Defines the height of the DropDownTree textbox.

    Default Value

    • ””

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    height: "160px"
                });
            });
        </script>

    locale string

    Allows you to set a particular country or regional language for the DropDownTree.

    Default Value

    • “en-US”

    Example

  • HTML
  • <input type="text" id="company" />
    
        $(function () {
            var data = ej.DataManager({ url: "http://mvc.syncfusion.com/services/Northwnd.svc/Customers" });
            $('#company').ejDropDownTree({
                dataSource: data,
                fields: { text: "CompanyName", value: 'ContactName' },
                width: 260,
                showCheckbox: true,
                locale: "de-DE",
                enableFilterSearch: true,
                enablePopupResize: true
    
            });
        });

    popupSettings object

    Customizes the height and width of the popup wrapper.

    Default Value

    • {height: ‘152px’,width: ‘auto’,showPopupOnLoad: false}

    popupSettings.height string|number

    Defines the height of the popup wrapper in the DropDownTree control.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    popupSettings: {
                             height: "300px"
    				}         
                  });
            });
        </script>

    popupSettings.width string|number

    Defines the width of the popup wrapper in the DropDownTree control.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    popupSettings: {
                             width: "300px"
    				}         
                  });
            });
        </script>

    popupSettings.showPopupOnLoad boolean

    The DropDownTree control is displayed with the popup.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    popupSettings: {
                             showPopupOnLoad: true
    				}         
                  });
            });
        </script>

    readOnly boolean

    Specifies that the DropDownTree textbox values should be read-only.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    readOnly: true
                });
            });
        </script>

    showRoundedCorner boolean

    The DropDownTree’s textbox is displayed with rounded corner style.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    showRoundedCorner: true
                });
            });
        </script>

    targetID string

    Specifies the targetID for the DropDownTree’s items.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="selectItem" />
    
                            <div id="itemList">
                                <ul id="treeView">
                                    <li class="expanded">
                                        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>
                                            <li>
                                                Children
                                                <ul>
                                                    <li>Preschool Crafts</li>
                                                    <li>School-age Crafts</li>
                                                    <li>Fabulous Toddler</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
    
    <script type="text/javascript">
            $(function () {
                $('#selectItem').ejDropDownTree({
                    targetId: "itemList"
                });
            });
        </script>

    textMode enum

    Specifies the delimiter between nodes (indicating their hierarchy).

    Option Description
    none When TextMode property is set to none, only selected/checked node's text is presented.
    fullPath When FullPath option is selected, the full path of the selected node is shown in the control.

    Default Value

    • ej.DropDownTree.TextMode.none

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 6, pid: 1, name: "Anderson" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" },
                        { id: 15, pid: 11, name: "Johnson" },
                        { id: 16, name: "WPF Team", hasChild: true },
                        { id: 17, pid: 16, name: "Rock" },
                        { id: 18, pid: 16, name: "Gospel" },
                        { id: 19, pid: 16, name: "Brown" },
                        { id: 20, pid: 16, name: "Miller" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    textMode: "fullPath"
                });
            });
        </script>

    validationMessage object

    Sets the jQuery validation error message in the DropDownTree.

    Default Value

    • null

    Example

  • HTML
  • <form id="form1">
    
    <input type="text" id="itemList" />
    <input type="submit" value="Validate" />
     </form>
    
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
         $.validator.setDefaults({
             ignore: [],
             errorClass: 'e-validation-error', // to get the error message on jQuery validation
             errorPlacement: function (error, element) {
                 $(error).insertAfter(element.closest(".e-widget"));
             }
             // any other default options and/or rules
         });
    $(function () {
            $('#itemList').ejDropDownTree({
                watermarkText: "Select a car",
                width: "50%",
                targetId: "carsList",
                validationRules: {
                    required: true
                   
                },
                validationMessage: {
                    required: "* Required"
                   
                }
            });
        });
    
        </script>

    validationRules object

    Sets the jQuery validation rules in the DropDownTree.

    Default Value

    • null

    Example

  • HTML
  • <form id="form1">
    
    <input type="text" id="itemList" />
    <input type="submit" value="Validate" />
     </form>
    
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
         $.validator.setDefaults({
             ignore: [],
             errorClass: 'e-validation-error', // to get the error message on jQuery validation
             errorPlacement: function (error, element) {
                 $(error).insertAfter(element.closest(".e-widget"));
             }
             // any other default options and/or rules
         });
    $(function () {
            $('#itemList').ejDropDownTree({
                watermarkText: "Select a car",
                width: "50%",
                targetId: "carsList",
                validationRules: {
                    required: true
                   
                },
                validationMessage: {
                    required: "* Required"
                   
                }
            });
        });
    
        </script>

    value string

    Specifies the value (text content) for the DropDownTree control. For the single selection mode, the selected item’s value will be returned in its data type, and for MultiSelectMode, returns the selected items values separated by delimiter in string type.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="selectCar" />
    
      
        <script type="text/javascript">
            var localData = [
                       { id: 1, name: "Discover Music", hasChild: true, expanded: true },
                       { id: 2, pid: 1, name: "Hot Singles" },
                       { id: 3, pid: 1, name: "Rising Artists" },
                       { id: 4, pid: 1, name: "Live Music" },
                       { id: 6, pid: 1, name: "Best of 2013 So Far" },
                       { id: 7, name: "Sales and Events", hasChild: true, expanded: true },
                       { id: 8, pid: 7, name: "100 Albums - $5 Each" },
                       { id: 9, pid: 7, name: "Hip-Hop and R&B Sale" },
                       { id: 10, pid: 7, name: "CD Deals" },
                       { id: 11, name: "Categories", hasChild: true },
                       { id: 12, pid: 11, name: "Songs" },
                       { id: 13, pid: 11, name: "Bestselling Albums" },
                       { id: 14, pid: 11, name: "New Releases" },
                       { id: 15, pid: 11, name: "Bestselling Songs" },
                       { id: 16, name: "MP3 Albums", hasChild: true },
                       { id: 17, pid: 16, name: "Rock" },
                       { id: 18, pid: 16, name: "Gospel" },
                       { id: 19, pid: 16, name: "Latin Music" },
                       { id: 20, pid: 16, name: "Jazz" },
                       { id: 21, name: "More in Music", hasChild: true },
                       { id: 22, pid: 21, name: "Music Trade-In" },
                       { id: 23, pid: 21, name: "Redeem a Gift Card" },
                       { id: 24, pid: 21, name: "Band T-Shirts" },
                       { id: 25, pid: 21, name: "Mobile MVC" }];
    
        
        $(function () {
            $('#selectCar').ejDropDownTreeList({
                fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" },
                value: 'Rock'
            });
        });
        </script>

    watermarkText string

    Specifies a short hint that describes the expected value of the DropDownTree control.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select"
                });
            });
        </script>

    width string|number

    Defines the width of the DropDownTree textbox.

    Default Value

    • “100%”

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    width: "150px"
                });
            });
        </script>

    treeViewSettings object

    Defines the popup settings of the DropDownTree widget. You can use any property which are in treeview using this property.

    NOTE

    The public method of treeview data is accessed by [object of the dropdowntree].treeview.[methodname].

    Default Value

    • ”{}”

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    width: "150px"
                });
            });
        </script>

    Methods

    checkAll()

    Checks all the nodes in the DropDownTree.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                           showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.checkAll();
            });
        </script>
  • HTML
  • <script>
           $('#itemList').ejDropDownTree("checkAll")
        </script>

    checkNode(node)

    Checks a node in the DropDownTree.

    Name Type Description
    element string|object|array ID of the DropDownTree node/object of the DropDownTree node/collection of the ID/object of the DropDownTree nodes.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                         showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.checkNode($("#1"));
            });
        </script>
  • HTML
  • <script>
          $("#itemList").ejDropDownTree("checkNode", $("#1"))
        </script>

    clearText()

    Clears the text in the DropDownTree.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#selectItem').data("ejDropDownTree");
    ddTreeObj.clearText();
            });
        </script>
  • HTML
  • <script>
           $('#selectItem').ejDropDownTree("clearText")
        </script>

    destroy()

    Destroys the DropDownTree control.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#selectItem').data("ejDropDownTree");
    ddTreeObj.destroy();
            });
        </script>
  • HTML
  • <script type="text/javascript">
            $('#selectItem').ejDropDownTree("destroy");
    
        </script>

    getValue()

    Returns the selected value.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#selectItem').data("ejDropDownTree");
    ddTreeObj.getValue();
            });
        </script>
  • HTML
  • <script>
            $('#selectItem').ejDropDownTree("getValue");
        </script>

    hidePopup()

    Hides the popup in the DropDownTree.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#selectItem').data("ejDropDownTree");
    ddTreeObj.hidePopup();
            });
        </script>
  • HTML
  • <script>
            $('#selectItem').ejDropDownTree("hidePopup");
        </script>

    moveNode (sourceNode,destinationNode,index)

    Moves the DropDownTree node within the same DropDownTree. The new position of the given DropDownTree node will be based on destination node and index position.

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

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                         showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.checkNode($("#1"));
    obj.moveNode("#1", "#10")
            });
        </script>

    Example

  • HTML
  • <script>
            $('#itemList').ejDropDownTree("moveNode","#1", "#10"); 
        </script>

    removeAll()

    Removes all the nodes in the DropDownTree.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                         showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.removeAll();
            });
        </script>
  • HTML
  • <script>
           $('#itemList').ejDropDownTree("removeAll")
        </script>

    removeNode(node)

    Removes a node in the DropDownTree.

    Name Type Description
    element string|object|array ID of the DropDownTree node/object of the DropDownTree node/collection of the ID/object of the DropDownTree nodes.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                           allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj. selectNode($("#3"));
    ddTreeObj. removeNode($("#3"));
    
            });
        </script>

    Example

  • HTML
  • <script>
           $("#itemList").ejDropDownTree("removeNode", $("#1"))
        </script>

    selectAll()

    Selects all the DropDownTree nodes when allowMultiSelection field is enabled in the treeViewSettings property.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                           allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.selectAll();
            });
        </script>
  • HTML
  • <script>
          $('#itemList').ejDropDownTree('selectAll');
        </script>

    selectNode(node)

    Selects a node in the DropDownTree control. To select the collection of nodes in the DropDownTree control, enable allowMultiSelection field of the treeViewSettings property.

    Name Type Description
    element string|object|array ID of the DropDownTree node/object of the DropDownTree node/ collection of I the D/object of the DropDownTree nodes.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                           allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj. selectNode($("#3"));
            });
        </script>

    Example

  • HTML
  • <script>
           $("#itemList").ejDropDownTree("selectNode", $("#1"))
        </script>

    showPopup()

    Shows the DropDownTree control with the popup.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('# itemList').data("ejDropDownTree");
    ddTreeObj.showPopup();
            });
        </script>
  • HTML
  • <script>
            $('# itemList').ejDropDownTree("showPopup");
        </script>

    unCheckAll()

    Unchecks all the nodes in the DropDownTree.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    }
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.unCheckAll ();
            });
        </script>
  • HTML
  • <script>
           $('#itemList').ejDropDownTree("unCheckAll")
        </script>

    unCheckNode(node)

    Unchecks a node in the DropDownTree.

    Name Type Description
    element string|object|array ID of the DropDownTree node/object of the DropDownTree node/collection of the ID/object of the DropDownTree nodes.

    Example

  • HTML
  • input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.unCheckNode($('#1'));
            });
        </script>
  • HTML
  • <script>
          $("#itemList").ejDropDownTree("unCheckNode", $("#1"))
        </script>

    unselectAll()

    Unselects all the DropDownTree nodes when allowMultiSelection field of the treeViewSettings property is enabled.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                       allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    }
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj.unselectAll ();
            });
        </script>
  • HTML
  • <script>
          $('#itemList').ejDropDownTree('unselectAll');
        </script>

    unselectNode(node)

    Unselects a node in the DropDownTree control. To unselect the collection of nodes in the DropDownTree control, enable allowMultiSelection field of the treeViewSettings property.

    Name Type Description
    element string|object|array ID of the DropDownTree node/object of the DropDownTree node/ collection of the ID/object of the DropDownTree nodes.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
            var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                           allowMultiSelection: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    value: "Ryan"
                });
    
    
        ddTreeObj = $('#itemList').data("ejDropDownTree");
    ddTreeObj. unselectNode($("#3"));
            });
        </script>

    Example

  • HTML
  • <script>
          $("#itemList").ejDropDownTree("unselectNode", $("#1"));
        </script>

    Events

    blur

    Fires the action when the DropDownTree is about to lose focus.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                       { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    blur: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    change

    Fires the action when the DropDownTree control’s value is changed.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    selectedText string Selected item's text.
    text string Selected item's text.
    value string Selected item's value.
    itemId string Selected item's ID.
    isChecked boolean Returns the selected item with checkbox checked or not.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    change: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    checkChange

    Fires the action when the list item checkbox value is changed.

    </tr>
    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    selectedText string Selected item's text.
    text string Selected item's text.
    value string Selected item's value.
    itemId string Selected item's ID.
    isChecked boolean Returns the selected item with checkbox checked or not.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        showCheckbox: true,
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    checkChange: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    close

    Fires the action once the popup is closed.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    text string Selected item's text.
    value string Selected item's value.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    close: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    Create

    Fires the action once the DropDownTree is created.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    create: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    destroy

    Fires the action when DropDownTree is destroyed.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    destroy: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    filtering

    When the enableFilterSearch is enabled, the filtering action is fired as soon as you start typing in the DropDownTree.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    selectedText string Selected item's text.
    searchString string Returns the search string typed in the search box.
    items object Returns the data items of theDropDownTreeView.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    filtering: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    focus

    Fires the action when the DropDownTree is focused.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    focus: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    open

    Fires the action once the popup is opened.

    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    text string Selected item's text.
    value string Selected item's value.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                        { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    open: function (args){
                        //do your changes
                    }
               });
           });
        </script>

    select

    Fires the action when the list of nodes in the DropDownTree is selected.

    </tr>
    Name Type Description
    cancel boolean If the event has to be canceled; otherwise, false.
    type string Event name
    model object DropDownTreeView model.
    selectedText string Selected item's text.
    text string Selected item's text.
    value string Selected item's value.
    itemId string Selected item's ID.
    isChecked boolean Returns the selected item with checkbox checked or not.

    Example

  • HTML
  • <input type="text" id="itemList" />
    
    <script type="text/javascript">
    
    var localData = [
                       { id: 1, name: "Windows Team", hasChild: true, expanded: true },
                        { id: 2, pid: 1, name: "Clark" },
                        { id: 3, pid: 1, name: "Wright" },
                        { id: 4, pid: 1, name: "Lopez" },
                        { id: 7, name: "Web Team", hasChild: true, expanded: true },
                        { id: 8, pid: 7, name: "Joshua" },
                        { id: 9, pid: 7, name: "Matthew" },
                        { id: 10, pid: 7, name: "David" },
                        { id: 11, name: "Build Team", hasChild: true },
                        { id: 12, pid: 11, name: "Ryan" },
                        { id: 13, pid: 11, name: "Justin" },
                        { id: 14, pid: 11, name: "Robert" }];
            $(function () {
                $('#itemList').ejDropDownTree({
                    treeViewSettings: {
                        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }
                    },
                    watermarkText: "Please select",
                    width: "100%",
                    select: function (args){
                        //do your changes
                    }
               });
           });
        </script>