How to hide hidden dropdownlist item?

Question

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?

Answer 1

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"
});