javascriptkendo-uibindingkendo-mvvm

Kendo MVVM with external search box and keypress


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.


Solution

  • 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