Kendo 网格按键事件

Question

我已经使用 Kendo 指令启动了一个 Kendo 网格。如何捕获网格的 keydown/keypress 事件？我最后的 objective 是根据另一列的用户输入填充一个网格列。例如，在输入名字时填充 phone 数字。为此，我相信我必须使用 Kendo 网格编辑和按键事件并对用户输入进行搜索，除非有更好的方法。这可能吗？

这是我初始化网格的方式：

<section id="dashboard-view" class="mainbar" data-ng-controller="dashboard as vm">
   ....
   <div kendo-grid="vm.testGrid" k-options="vm.testGridOptions" k-rebind="vm.testGridDataSource.data" k-on-edit="vm.onEdit(kendoEvent)"></div>
   ....
</section>

我的 JavaScript 文件中定义的选项：

vm.testGridOptions = {
  columns: [
    { field: "Id", title: "ID" },
    { field: "FirstName", title: "First Name" },
    { field: "LastName", title: "Last Name" },
    { field: "Phone", title: "Phone" },
    { command: ["destroy"] }
  ],
  toolbar: ["create", "save", "cancel"],
  dataSource: vm.testGridDataSource,
  editable: {
    createAt: "bottom"
  },
  height: 400,
  autoBind: false
};
vm.onEdit = function (e) {
    //if grid column == Id && keypressed == Tab key
    //search
};

网格处于批量编辑模式。

Answer 1

您可以根据索引找到当前column/field名称。然后过滤旁边列中的下拉列表：（这只是示例代码，请将 DOM ids 替换为您的代码）

vm.onEdit = function (e) {
    var header = vm.thead;//grid header
    var index = vm.cellIndex(e.container);//current cell index

    var th = $(header).find("th").eq(index);
    var colName = $(th).data("field");//fieldname for current cell  

    var dataItem = e.model;//row model

    if(colName=='LastName')
    {
         var phoneDropDown =  e.container.find("#PhoneDropDownId").data("kendoDropDownList");
         if (phoneDropDown) {
               phoneDropDown.dataSource.filter({ field: "Phone", operator: "eq", value: e.model.LastName });
               }
    }
};

Answer 2

由于 Kendo 网格没有为此设置的本机事件，因此我使用了 JQuery onBlur 事件。

vm.onEdit = function (e) {
    alert("Edit event fired");
    $('input.k-input.k-textbox').blur(function (f) {
        alert("Blur event fired");
    }
};

Kendo 网格按键事件

Kendo Grid keydown event

javascript

angularjs

kendo-grid

angularjs-directive

kendo-asp.net-mvc