New to Kendo UI for jQuery? Download free 30-day trial

Hide Items in DropDownList Only if Opened Through Mouse Click


Product Progress® Kendo UI® DropDownList for jQuery


How can I hide items when the DropDownList is opened through mouse click, but show them when the keyboard navigation is used?


  1. Use template and add a custom class on the items that needs to be hidden.
  2. Handle the open event of the DropDownList. Depending on the event type hide or show the items.
    <script type="text/x-kendo-template" id="feedItemTemplate">     
      <span class="hidden"> #:name# </span>
      <span> #:name# </span>
      # } #

    <input id="dropdownlist" />
      var data = [
        { id: 1, name: "First", hidden: false},
        { id: 2, name: "Second", hidden: false},
        { id: 3, name: "Third", hidden: true},
        { id: 4, name: "Forth", hidden: false},
        { id: 5, name: "Fifth", hidden: false},
        { id: 6, name: "Sixth", hidden: false},
        { id: 7, name: "Seventh", hidden: true}

        dataTextField: "name",
        dataValueField: "id",
        dataSource: data,
        open: function(e){
          var currentEvent = event;
          if(event.type == 'click'){           
          }else if(event.type == 'keydown'){          
        template: $("#feedItemTemplate").html()

See Also

In this article