Inline grid editing: how to highlight cell content when tab between cells

[M]

I'm trying to develop a web app that will use inline grid editing for new records and updates.

Each row of data will require around 10 numeric inputs -- the default value is zero. It's essential that users can use TAB to move to the next field and then enter the required figure as quickly as possible.

Currently, when a user tabs to the next field, the existing content is not highlighted, so they are having to either use the mouse to highlight/delete it or use the arrow keys. This is slowing down data entry considerably.

How can I highlight the cell's existing  content when the user TABs to it?

Thanks

[M]

In case anyone else is interested. The answer is to use jQuery like so (found in the NumericTextBox forums):

$('.k-input').live('focus', function () {
      var input = $(this);
      setTimeout(function () { input.select(); });
});

[Chad]

Hello Mat, I appreciate your work here as this is what I'm looking for too. But I can't get it to work. When I initially click the first colum cell, the jquery event fires, but then when I tab, nothing happens. Was there anything else you had to do?

[Robert]

Chad, I got some help from Iliana Nikolova to figure this out. In a batch edit grid, use the grid's Edit event: 

In the sample, I'm looking to only highlight for a field named 'Duration' :

var inputName = e.container.find('input').attr("name");
if (inputName == "Duration") {
            var myInput = e.container.find('input[name="Duration"]');
                setTimeout(function () {
                    myInput.select();
                });
        }

For a combobox, use the grid's edit event as well, but also the combobox's dataBound event. In the sample, the input name is Worker_input when it's a combobox:

if (inputName == "Worker_input") {
           var combobox = $('[data-role="combobox"]').data("kendoComboBox");
           combobox.one("dataBound", function () {
               setTimeout(function () {
                   combobox.input.select()
               });
           });
       }