<script type="text/javascript">
// prevents the default behaviour to perform custom action
ej.DropDownList.prototype._OnMouseClick = function (e) { }
ej.DropDownList.prototype._OnMouseEnter = function (e) { }
ej.DropDownList.prototype._OnMouseLeave = function (e) { }
ej.DropDownList.prototype._OnKeyUp = function (e) { }
ej.DropDownList.prototype._OnKeyDown = function (e) { }
function dropdownOnCreate(args) {
drpdwnobj = this;
}
function treeViewOnCreate(args) {
treeobj = this;
}
// check & uncheck the checkbox when click on text
$(function () {
$("body").on("click", ".e-treeview ul li a.e-text", function (e) {
if (!$(e.target).siblings(".e-chkbox-wrap").children("input.nodecheckbox")[0].checked)
treeobj.checkNode($(e.target).closest("li"));
else
treeobj.uncheckNode($(e.target).closest("li"));
});
});
//Function triggers while check the checkbox in tree view and it adds the checked item text to dropdownlist value
function checkScroll(args) {
var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;
drpdwnobj._refreshScroller();
drpdwnobj.popupList.css("display", "block");
drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos });
}
function onNodeCheck(args) {
if (args.currentCheckedNodes != null) {
var checkeditems = args.currentCheckedNodes;
for (var i = 0; i < checkeditems.length; i++) {
if ((checkeditems[i] != null) && !isContains(checkeditems[i].text))
addOrRemoveItem(checkeditems[i].text, true);
}
}
}
//Function triggers while uncheck the checkbox in tree view and it removes the unchecked item text from dropdownlist value
function onNodeUnCheck(args) {
if (args.currentUncheckedNodes != null) {
var uncheckeditems = args.currentUncheckedNodes;
for (var i = 0; i < uncheckeditems.length; i++) {
if (uncheckeditems[i] != null && isContains(uncheckeditems[i].text))
addOrRemoveItem(uncheckeditems[i].text);
}
}
ensureRootCheck(args);
}
function ensureRootCheck(args) {
var rootEle = $(args.currentElement).parents("ul.e-treeview-ul");
for (var i = 0; i < rootEle.length; i++) {
if ($(rootEle[i]).parent("li").length) {
if (isContains($(rootEle[i]).siblings("[role=presentation]").text()))
addOrRemoveItem($(rootEle[i]).siblings("[role=presentation]").text());
}
}
}
function addOrRemoveItem(currentValue, isAdd) {
drpdwnobj._hiddenValue = currentValue;
isAdd ? drpdwnobj._addText(currentValue) : drpdwnobj._removeText(currentValue);
drpdwnobj.model.value = drpdwnobj.model.text = drpdwnobj.element.val();
}
function isContains(val) {
var data = drpdwnobj.getValue().split(","), matched;
for (k = 0; k < data.length; k++) {
if (data[k] == val) {
matched = 1;
break;
}
}
return matched;
}
</script> |
Dear Prince ,
Thank you for your support. There is another issue with this dropdown Filter search.
When i type some text inside search filter text box my dropdown is empty.search is not working. can you help?
This is my code.
<ej-drop-down-list id="DropDownList" target-id="carsList1" enable-filter-search="true" filter-type="@SearchFilterType.Contains" width="100%" popup-height="280px" watermark-text="Select an item" create="dropdownOnCreate"></ej-drop-down-list>
<div id="carsList1">
<ul>
<ej-tree-view id="treeView" show-checkbox="true" node-check="onNodeCheck" create="treeViewOnCreate" node-uncheck="onNodeUnCheck" node-expand="checkScroll" node-collapse="checkScroll">
<e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name" has-child="hasChild" expanded="expanded" sprite-css-class="spriteCss"></e-tree-view-fields>
</ej-tree-view>
</ul>
</div>
Hi Prince,
Thank you for your great help. It is working.
Regards,
Rikasa