Question

我一直在使用combox作为列的编辑器或模板，差异是一个（模板）始终存在，而另一个（编辑器）仅在使用编辑单元格时显示专栏。我现在已经尝试了几个小时了，我不知道下一步该尝试什么。

我想要做的是，当用户选中包含其中一个的单元格时，组合框变为活动状态（这适用于编辑器但不适用于模板），和选择当前文本（因此，如果用户开始输入，则清除当前值并输入新文本。）

完整样本为here

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

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

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

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（）; 不会选择文本

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

这里的任何帮助将不胜感激！提前致谢

Answer 1

感觉不是很有棱角，但有点有效：

$("#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中执行此操作（但仅适用于car列，因为在其他情况下编辑器还没有）：

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

这对我有用。它是一种更简单，更优雅的方法，适用于页面上的任何ComboBox，无论何时呈现（kendo自动添加 role =＆＃34; combobox＆＃34; 属性）：

＆＃13;

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

＆＃13;

Kendo Grid：设置焦点并选择Combobox模板或编辑器的所有文本

2 个答案: