How to open kendo dropdown on space key press

Question

I'm using kendo dropdown in one of my project and I'm facing an issue. In normal html select when we press space key on focus it will shows the options.I need to implement the same in kendo dropdown list I have tried keypress but its not working the code I tried is given below

   $("#container").on("keypress", function (e) {
      if (e.keyCode === 0 || e.keyCode === 32) {
              alert("hi")
          }
    });

I know its rubbish but I don't have any other idea for implementing the feature . Is it possible to implement this feature in kendo dropdown if it is how can I do that

BenG BenG · Accepted Answer · 2015-11-25T09:29:07

After the kendo dropdown is rendered, it places the select into a container.

<span title="" class="k-widget k-dropdown k-header" >
     <span unselectable="on" class="k-dropdown-wrap k-state-default">
          <span unselectable="on" class="k-input">Small</span>
          <span unselectable="on" class="k-select">
               <span unselectable="on" class="k-icon k-i-arrow-s">select</span>
          </span>
      </span>
      <select id="select" placeholder="Select size..." style="width: 100%; display: none;" accesskey="w" data-role="dropdownlist">
           <option value="X-Small">X-Small</option>
           <option value="Small" selected="selected">Small</option>
           <option value="Medium">Medium</option>
           <option value="Large">Large</option>
           <option value="X-Large">X-Large</option>
           <option value="2X-Large">2X-Large</option>
      </select>
</span>

The keydown will be fire on the container:-

$("#select").kendoDropDownList();
$("#select").parent().on("keydown", function(e){
    if (e.keyCode === 0 || e.keyCode === 32) {
          $('select', this).data("kendoDropDownList").open();
    }
});

dojo

How to open kendo dropdown on space key press

1 Answers