[Solved] Navigation and edit mode is interrupted after selecting a value from a kendoComboBox cell template

[Peter]

Hi, I have taken an existing example, simplified it, and used it to work out how to use a kendoComboBox as a cell template. Looking at various doco, I almost have it working correctly (as in the attached)

I also want to have this grid to be able to stay in edit mode, so the user can tab from cell to cell and edit, tab to the next, select from a combo, tab to the next etc.

When the tab gets to my combo, once I select from this(using Alt-Down arrow, and then tab), the value is set, but the cell goes out of edit mode (as in attached video snip - where I use arrow keys in the combo, and then tab to select) I would like the tab to select the value, and then go to the next cell (staying in edit mode)

Is there a ways of doing this?

The one other thing I would like is to when we land in the combo cell, to have the text selected (as in the combo under the grid, which uses the following block...

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

 
I have tried to do this in my cell template (as is in the commented out code), but I just cannot get it to work..

function categoryDropDownEditor(container, options) {

     var input = $('<input name="' + options.field + '"/>');
     input.appendTo(container);
     input.attr("name", options.field);
     var combo = input.kendoComboBox({
       autoBind: true,
       filter: "contains",
       placeholder: "select...",
       suggest: true,
       dataSource: combo2Data,

       dataTextField: "description",
       dataValueField: "code"
     });

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

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

Is there a way I can get these 2 features working?

Thanks in advance for any help!

[Daniel]

Hello Peter,

I am not sure what could be causing the described problems. Tabbing should move to the next cell no matter if a combobox is used in the editor and the corresponding item should automatically be selected. Could you check this example and let me know if I am missing something and if the problems occur on your side?

Regards,
Daniel
Telerik

 

 

[Peter]

Hi Danial, thanks for the reply. The online demo in the link works fine, infact I think it is the one I took and modified just to try and see how everything worked (by swapping bits etc). Also using within Angular, which is how I would be wanting to use it.

 In the process, it looks like I have introduced a weird glitch (since the online one works as expected)

I will start again, and check the functionality after each change, and see if I can see which step breaks it. I'll report back one I have done this.

Cheers,
regards Peter

[Peter]

Hi Daniel, I have redone the example (from the demo), and it is ok. The attached one was starting to get a bit untidy, so at any rate lets not worry about what could be wrong in there, since I can now see the navigation and edit does work as we would expect.

I have a couple of other questions, but I will raise these in separate posts.

Cheers, for that.
regards, Peter