Kendo 网格：为组合框模板或编辑器设置焦点和 select 所有文本

Question

我一直在尝试使用组合框作为列的编辑器或模板，区别在于一个（模板）始终存在，而另一个（编辑器）仅在使用编辑时显示列中的单元格。我已经尝试了好几个小时了，但我不确定接下来要尝试什么。

我想做的是，当用户切换到包含其中任何一个的单元格时，组合框变为活动状态（这适用于编辑器但不适用于模板），和当前文本是 selected（所以如果用户开始输入，当前值将被清除并输入新文本）。

完整样本为here

所以，我这里有 2 个问题。 1. 如何将焦点设置到用作模板的组合框。我在两个地方尝试过，第一个是在模板中 - 我知道这里的语法是错误的，但不知道该怎么做...

function createComboTemplate(data, field) {
  var tmpl = '<input style="width:100%" ' +
   'kendo-combo-box ' +
   'text-field="\'display\'" ' +
   'suggest = true ' +
   'filter="\'contains\'" ' +
   'value-field="\'rego\'" ' +
   'source="dataItem.carSource"' +
   'data-value="dataItem.car.rego" ' +
   'k-on="dataItem.onFocus(e)" ' +  // how to do this?
   'k-on-change="dataItem.handleDDLChange(kendoEvent, dataItem, \'' + field + '\', this)"/>';

 return tmpl;
 }

所以上面我有行 'k-on="dataItem.onFocus(e)" ' 当然什么都不做。我正在尝试做一个

"var combo = input.data("kendoComboBox");
  combo.input.on("focus", function () {"...

类似于我在编辑器中第二个问题中所做的（见下文）

接下来我尝试做的是将焦点设置在以下块中..

beforeEdit: function (e) {
        if (e.field === "car.display") {
            e.preventDefault();
            var grid = $("#gridID").data("kendoGrid");
            var current = grid.current();
            var input = current.find("k-input")
            var combo = input.data("kendoComboBox");
            console.log("combo is " + combo);
            // combo is null
            if (combo != null) {
                combo.focus();
            }

我似乎无法在此处获取组合实例（它始终为空）我在这里做错了什么？

2.The 第二个问题是编辑器..

    function createCombo(container, options, data) {

     var input = $('<input/>')
     input.appendTo(container)
     input.kendoComboBox({
     autoBind: true,
      ...

     var combo = input.data("kendoComboBox");
     combo.input.on("focus", function () {
      var element = this;
     setTimeout(function () {
      // select all text?
      combo.select();
  });
 });
 }

在上面调用了焦点处理程序，但是 combo.select(); 没有 select 文本

所以上面有几件事，但我试图在这两种情况下做同样的事情，在 Tab 上组合 selected，并且还有所有文本 selected.

如有任何帮助，我们将不胜感激！提前致谢

Answer 1

感觉不太好 angular，但还行：

$("#gridID").on("focus", ".k-input", function() {
    var parent = $(this).closest(".k-combobox");
    if (parent.length >0) {
        var input = $(parent).find("input:not(:visible)");
        var combo = $(input).getKendoComboBox();
        if (combo) {
            combo.input.select();
        }
    }
})

和

beforeEdit: function (e) {
    if (e.field === "car.display") {
        e.preventDefault();
        var current = this.current();
        $(current).find(".k-input").first().focus();
    }
},

(demo)

您也可以在 beforeEdit 中执行此操作（但仅限于汽车列，因为在其他情况下编辑器还不存在）：

beforeEdit: function (e) {
    if (e.field === "car.display") {
        e.preventDefault();
        var current = this.current();
        var input = current.find("input:not(:visible)")
        var combo = input.data("kendoComboBox");
        if (combo) {
            combo.input.select();
        }
    }
},

(demo)

Answer 2

这对我有用。这是一种更简单、更优雅的方法，适用于页面上的任何组合框，无论何时呈现（kendo 自动添加 role="combobox" 属性） :

$(document).on('focus', 'input[role="combobox"]', function () {
    $(this).select();
});

Kendo 网格：为组合框模板或编辑器设置焦点和 select 所有文本

Kendo Grid: Set focus and select all text for a Combobox template or editor

jquery

kendo-ui

kendo-grid