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

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

---

Update

Since you indicated filtering the dropdownlist would blow away the filter, you could still use the default filter in the dataSource but you could hijack the dropdownlist's filtering event to always include the default filter:

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

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

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