Hide Items in DropDownList Only if Opened Through Mouse Click
Environment
| Product | Progress® Kendo UI® DropDownList for jQuery |
Description
How can I hide items when the DropDownList is opened through mouse click, but show them when the keyboard navigation is used?
Solution
- Use template and add a custom class on the items that needs to be hidden.
- 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">
#if(hidden){#
<span class="hidden"> #:name# </span>
#}else{#
<span> #:name# </span>
# } #
</script>
<input id="dropdownlist" />
<script>
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}
];
$("#dropdownlist").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: data,
open: function(e){
var currentEvent = event;
if(event.type == 'click'){
$('.hidden').closest('.k-list-item').hide()
}else if(event.type == 'keydown'){
$('.hidden').closest('.k-list-item').show()
}
},
template: $("#feedItemTemplate").html()
});
</script>