Checkbox

DropDownTree displays checkboxes to the left of each item when you set treeViewSettings.showCheckBox property to true. It allows you to select more than one item at a time from the DropDownTree. Popup list stays open until selection is complete. Click on an item’s text or checkbox to change the checkbox’s checked status.

  • html
  • <input type="text" id="itemList" />
  • 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: {
                 showCheckbox: true,
                 fields: {
                     id: "id",
                     parentId: "pid",
                     value: "id",
                     text: "name",
                     hasChild: "hasChild",
                     dataSource: localData,
                     expanded: "expanded"
                 }
             },
             watermarkText: "Please select",
             width: "100%"
         });
     });

    NOTE

    If you want to showcase the DropDownTree with default checked items on data binding, use checkedNodes in the treeViewSettings property.

    Check/Uncheck All

    You can check/uncheck all the list items at run time by using checkAll and uncheckAll methods. By default, no item will be in checked state.

  • html
  • <input type="text" id="itemList" />
         <input type="checkbox" id="toggle" />
  • 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: {
                 showCheckbox: true,
                 fields: {
                     id: "id",
                     parentId: "pid",
                     value: "id",
                     text: "name",
                     hasChild: "hasChild",
                     dataSource: localData,
                     expanded: "expanded"
                 }
             },
             watermarkText: "Please select",
             width: "100%",
    
         });
    
         target = $('#itemList').data("ejDropDownTree");
    
         $("#toggle").ejToggleButton({
             "change": "onCheckUncheckAll",
             "defaultText": "Check All",
             "activeText": "Uncheck All"
         });
     });
    
     function onCheckUncheckAll(args) {
         if (args.isChecked) target.treeView.checkAll();
         else target.treeView.unCheckAll();
     }

    checkNode/uncheckNode

    You can check/uncheck a particular node at run time by using checkNode and uncheckNode methods. By default, no item will be in checked state.

  • html
  • <input type="text" id="itemList" />
         <input type="checkbox" id="toggle" />
  • 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: {
                showCheckbox: true,
                fields: {
                    id: "id",
                    parentId: "pid",
                    value: "id",
                    text: "name",
                    hasChild: "hasChild",
                    dataSource: localData,
                    expanded: "expanded"
                }
            },
            watermarkText: "Please select",
            width: "100%",
    
        });
    
        $("#toggle").ejToggleButton({
            "change": "onCheckUncheckAll",
            "defaultText": "Check Node",
            "activeText": "Uncheck Node"
        });
    });
    
    function onCheckUncheckAll(args) {
        var ddTreeObj = $('#itemList').data("ejDropDownTree");
        if (args.isChecked) ddTreeObj.checkNode($("#1"));
        else ddTreeObj.uncheckNode($("#1"));
    }