I have some code that has an external search box for a Kendo UI Grid. It's similar to the example here https://telerikhelper.net/2014/10/21/how-to-external-search-box-for-kendo-ui-grid/, however, it makes use of typescript using Kendo MVVM.
The HTML code has an input search box and button class as follows
<div style="display:block;width:100%;padding:5px;">
<input style="width:70%;height:30px;" id="searchvalue" />
<button class="km-small" data-icon="search" belongsto="searchvalue" data-role="button" data-bind="events : {click: filterLocations }"></button>
</div>
The button press is wired to the filterLocations() typescript function through the data-bind. I want to enable the enter keypress in the search button to do call the filterLocations() method as well as clicking the button.
I can follow a similar approach to keydown or keypress event, e.g.
$("#searchvalue").on("keypress", function(event){
if (event.keyCode === 13) {
}
});
However, I want to invoke the same filterLocations() using the text I've typed in the search box.
You can bind the keypress
event the same way you bind click
event:
<input type="text" class="k-textbox" data-bind="events: { keypress: onKeyPress }"></input>
var viewModel = kendo.observable({
onKeyPress: function(e){
console.log(e)
},
onClick: function(e) {
console.log(e);
}
});
Example: Key press event