[Solved] How to select combo box text on tab when using Angular

[Peter]

Hi, I am trying to select combo box text that is in a grid cell template as is shown here

The only difference is that I am trying to do it when using the grid within Angular. As in the attached, I have the template function as follows..

function categoryDropDownEditor(container, options) {
    var input = $('<input name="Category" />')
    input.appendTo(container)
    var combobox = input.kendoComboBox({
        autoBind: true,
        filter: "contains",
        placeholder: "select...",
        suggest: true,
        dataTextField: "description",
        dataValueField: "code",
        dataSource: comboData,
      });

    combobox.input.on("keydown", function(e) {
          var filter = combobox.dataSource.filter() || { filters: [] };

          if (e.keyCode === 9 && filter.filters[0]) { //TAB
            combobox.select(combobox.current().index());
          }
        });
   }

However, the call to combobox.input.on is not correct, so I just cant' work out what object the .on should be called.

I have tried calling it on the combobox (as above), but input is not defined on this. I have tried calling it on the var input, but this does nothing.

Any ideas how I can get it to work here?

Thanks in advance for any help
regards, Peter

[Alexander Popov]

Hello Peter,

The error occurs because the "combobox" refers to the input element instead of the ComboBox instance. You can get that by calling the getKendoComboBox method after the initialization. For example: 

var combobox = input.kendoComboBox({
    autoBind: true,
    filter: "contains",
    placeholder: "select...",
    suggest: true,
    dataTextField: "description",
    dataValueField: "code",
    dataSource: comboData,
  }).getKendoComboBox();

Regards,
Alexander Popov
Telerik