I have a Kendo DropdownList as follows :
$("#txtTag").kendoDropDownList({
dataTextField: "TagDesc",
dataValueField: "TagId",
optionLabel: " ",
dataSource: {
transport: {
read: {
dataType: "json",
url: "/Data/GetTag"
}
}
},
change: onChange,
filter: "contains"
});
I have hidden one of the values by using
$("#txtTag_listbox li")[4].hidden = true;
However, when I do a filter/search on the dropdown List , the hidden item also appears in that list. How do I prevent it to not appear it in the list?
By using the dataBound property of Kendo DropdownList , I was able to hide the required element from the UI as well as from it appearing in the search. Only thing is instead of using an index , I am directly searching for the element to hide as the index changes everytime we do a search.
$("#txtTag").kendoDropDownList({
dataTextField: "TagDesc",
dataValueField: "TagId",
optionLabel: " ",
dataSource: {
transport: {
read: {
dataType: "json",
url: "/Data/GetTag"
}
}
},
dataBound: function (e) {
var items = $("#txtTag_listbox li")
for (var i = 0; i < items.length; i++) {
if (items[i].innerHTML === 'Text To Hide') {
$(items[i]).hide();
}
}
},
change: onChange,
filter: "contains"
});