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
$('#selectItem').ejDropDownTree();Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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><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
<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><script>
$("#itemList").ejDropDownTree("checkNode", $("#1"))
</script>clearText()
Clears the text in the DropDownTree.
Example
<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><script>
$('#selectItem').ejDropDownTree("clearText")
</script>destroy()
Destroys the DropDownTree control.
Example
<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><script type="text/javascript">
$('#selectItem').ejDropDownTree("destroy");
</script>getValue()
Returns the selected value.
Example
<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><script>
$('#selectItem').ejDropDownTree("getValue");
</script>hidePopup()
Hides the popup in the DropDownTree.
Example
<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><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
<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
<script>
$('#itemList').ejDropDownTree("moveNode","#1", "#10");
</script>removeAll()
Removes all the nodes in the DropDownTree.
Example
<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><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
<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
<script>
$("#itemList").ejDropDownTree("removeNode", $("#1"))
</script>selectAll()
Selects all the DropDownTree nodes when allowMultiSelection field is enabled in the treeViewSettings property.
Example
<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><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
<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
<script>
$("#itemList").ejDropDownTree("selectNode", $("#1"))
</script>showPopup()
Shows the DropDownTree control with the popup.
Example
<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><script>
$('# itemList').ejDropDownTree("showPopup");
</script>unCheckAll()
Unchecks all the nodes in the DropDownTree.
Example
<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><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
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><script>
$("#itemList").ejDropDownTree("unCheckNode", $("#1"))
</script>unselectAll()
Unselects all the DropDownTree nodes when allowMultiSelection field of the treeViewSettings property is enabled.
Example
<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><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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>