jquery - 剑道网格 : Set focus and select all text for a Combobox template or editor

Question

我一直在尝试使用组合框作为列的编辑器或模板，区别在于一个(模板)始终存在，而另一个(编辑器)仅在使用编辑单元格时显示专栏。我已经尝试了几个小时了，但我不知道下一步该尝试什么。

我想做的是，当用户使用 Tab 键进入包含其中任何一个的单元格时，组合框将变为事件状态(这适用于编辑器，但不适用于模板)，并且选择当前文本(因此，如果用户开始输入，当前值将被清除并输入新文本)。

完整样本为here

所以，我这里有两个问题。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 () {"...

与我在编辑器中的第二个问题中所做的类似(见下文)

我尝试做的下一件事是将焦点设置在以下 block 中..

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.第二个问题是编辑器的问题..

    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(); 没有选择文本

所以上面有几件事，但我试图在这两种情况下做同样的事情，在选项卡上选择组合，并选择所有文本。

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

Answer 1

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

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