Access key property can be added in input element to set focus. Here focus is set by using access key + "j".

{% highlight html %}

{% endhighlight %}

{% highlight 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" } }, watermarkText: "Please select", width: "100%",

});
$(document).on("keydown", function(e) {
    if (e.altKey && e.keyCode === 74) { // j- key code.
        $("#itemList_wrapper").focus();
    }
});

});{% endhighlight %}

To clear the text of the DropDownTree input, you can use clearText method.

You can use addNode method of treeView object with instance of DropDownTree widget to add a single node dynamically to the popup list. You can add multiple nodes using addNodes instead of addNode. Please refer to treeView.

Adding text and value is demonstrated in the following sample.

{% highlight html %}

 <input type="text" id="itemList" />

{% endhighlight %}

{% highlight 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" } }, watermarkText: "Please select", width: "100%",

});
var ddTreeObj = $('#itemList').data("ejDropDownTree");
var newNode = {
    id: 8,
    name: "John"
};
ddTreeObj.treeView.addNode(newNode, $('#1'));

});

{% endhighlight %}

You can enable or disable the DropDownTree widget using enabled property.

By default, popup list is shown on DropDownTree button click, but you can also display the list initially by enabling the showPopupOnLoad property. You can also use showPopup () or hidePopup () method at run time to display or hide the popup list.

Bind the select event, and you can retrieve the value from args.value.

{% highlight html %}

 <input type="text" id="itemList" />

{% endhighlight %}

{% highlight 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" } }, watermarkText: "Please select", width: "100%", select: function(args) { console.log("Value is " + args.value); } });

});
{% endhighlight %}

You can use headerTemplate property to add any HTML element. Code snippet to add check all option using change event is given below,

{% highlight html %}

 <input type="text" id="itemList" />

{% endhighlight %}

{% highlight css %}

.temp { height: 30px; display: block; padding-left: 13px; padding-top: 5px; border-bottom: 1px solid #c8c8c8; } .e-chkbox-wrap .e-text { font-size: 14px; padding-left: 10px; }

{% endhighlight %}

{% highlight javascript %}

$(function() { 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" } ];

$('#itemList').ejDropDownTree({
    treeViewSettings: {
        showCheckbox: true,
        fields: {
            id: "id",
            parentId: "pid",
            value: "id",
            text: "name",
            hasChild: "hasChild",
            dataSource: localData,
            expanded: "expanded"
        }
    },
    watermarkText: "Please select",
    headerTemplate: "<div class='temp' ><input id ='check' type='checkbox'  />   </div>"
});
$("#check").ejCheckBox({
    text: "Check All",
    change: "Change"
});
var ddTreeObj = $('#itemList').data("ejDropDownTree");

});

function Change(args) { window.flag = true; var obj = $('#itemList').ejDropDownTree("instance"); if (args.isChecked) obj.checkAll(); else obj.uncheckAll(); window.flag = false; }

{% endhighlight %}

The following screenshot exhibits the output of the above code,

In order to add tooltip on hovering the DropDownTree popup items, use the htmlAttributes field in it. Generate a data source with a field for mapping the HtmlAttributes having the “title” attribute value to allow you to show the tooltip on hovering. The htmlAttributes field will set the HTML properties for the list items.

{% highlight javascript %}

{% endhighlight %}

The client side events such as “select” or “change” can be prevented in the DropDownTree by using argument, cancel.

{% highlight javascript %}

    $('#itemList').ejDropDownTree({
        treeViewSettings: {
            showCheckbox: true,
            fields: {
                id: "id",
                parentId: "pid",
                value: "id",
                text: "name",
                hasChild: "hasChild",
                dataSource: localData,
                expanded: "expanded"
            }
        },
        select: "onSelect",
        watermarkText: "Please select",

    });
});

{% endhighlight %}

While selecting the items in the DropDownTree, the select or change event will be triggered. In that, sets “true” to the cancel argument, which will prevent the further selecting of items in the DropDownTree.

{% highlight javascript %}

function onSelect(args) {
    args.cancel = true;
}

{% endhighlight %}

In the DropDownTree control, the display property for the outer wrapper element will be set to block, by default. So, modifying it to inline-block will move the validation message to the same line as the DropDownTree. Refer to the following code.

{% highlight html %}

{% endhighlight %}

{% highlight css %}

{% endhighlight %}

{% highlight javascript %}

$.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 }); //If necessary, we can create custom rules as below. here method defined for min $.validator.addMethod("min", function(value, element, params) { if (!/Invalid|NaN/.test(value)) { return parseInt(value) > params; } }, 'Must be greater than 30.'); var target; $(function() { $('#selectCar').ejDropDownTree({ watermarkText: "Select a car", width: "50%", targetId: "carsList", validationRules: { required: true

    },
    validationMessage: {
        required: "* Required"

    }
});

});

{% endhighlight %}