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

Question

I have been playing with using the combox as either an editor or template for a column, the difference being one (the template) is always present, while the other (the editor) is only shown when the using edits a cell in the column. I've trying to get this for hours now, and I am not sure what to try next.

What I would like to do is, when the user tabs into a cell containing either, the combobox becomes active (this works for the editor but not the template), and the current text is selected (so if the user started typing, the current value is cleared and the new text is entered).

The full sample is here

So, I Have 2 problems here. 1. How to set focus to the combo box being used as a template. I have attempted this in 2 places, the first is in the template - I know the syntax here is wrong, but not sure how to do it...

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

So above I have the line 'k-on="dataItem.onFocus(e)" ' which of course does nothing. I was trying to do a

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

similar to what I do below in the second problem in the editor (see below)

The next thing I tried to do was to set focus in the following 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();
            }

I seem to be having trouble getting the combo instance here (it is always null) What have I done wrong here?

2.The second problem is with the editor..

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

In the above, the focus handler is called, but the combo.select(); does not select the text

So there are a couple of things above, but I am trying to do the same thing in both cases, have the combo selected on Tab, and also have all of the text selected.

Any help here would be greatly appreciated! Thanks in advance

Lars Höppner Lars Höppner · Accepted Answer · 2015-02-27T08:51:06

Doesn't feel very angular, but sort of works:

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

and

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

(demo)

You could also do this in beforeEdit (but only for the car column since in other cases the editor isn't there yet):

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)

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

2 Answers