如何隐藏隐藏的下拉列表项？

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

The best way to do this is to set a default filter on your underlying dataSource:

$(document).ready(function () {
  $("#dropdownlist").kendoDropDownList({
    dataSource: {
      data: [
        {
          id: 1,
          text: 'show'
        },
        {
          id: 2,
          text: 'hide'
        },
        {
          id: 3,
          text: 'show2'
        }
      ],
      filter: { field: 'text', operator: 'neq', value: 'hide' }
    },
    dataTextField: 'text',
    dataValueField: 'id',
    filter: 'contains',
    optionLabel: {
      id: null,
      text: '-'
    }
  });
});

Fiddle: https://dojo.telerik.com/uZAcIxil

Answer 2

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