首页 > 解决方案 > 带有外部搜索框和按键的 Kendo MVVM

问题描述

我有一些代码有一个用于 Kendo UI Grid 的外部搜索框。它类似于此处的示例 https://telerikhelper.net/2014/10/21/how-to-external-search-box-for-kendo-ui-grid/,但是,它使用了使用 Kendo MVVM 的打字稿。

HTML代码有一个输入搜索框和按钮类如下

    <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>

按下按钮通过数据绑定连接到 filterLocations() 打字稿函数。我想在搜索按钮中启用回车键来调用 filterLocations() 方法以及单击按钮。

我可以对 keydown 或 keypress 事件采用类似的方法,例如

$("#searchvalue").on("keypress", function(event){               
    if (event.keyCode === 13) {

    }
});

但是,我想使用在搜索框中输入的文本调用相同的 filterLocations()。

标签: javascriptkendo-uibindingkendo-mvvm

解决方案


您可以像绑定keypress事件一样绑定click事件:

<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);
    }
});

示例:按键事件


推荐阅读