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

4 posts, 0 answers
  1. M
    M avatar
    29 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post

    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
  2. M
    M avatar
    29 posts
    Member since:
    Oct 2012

    Posted 26 Oct 2012 Link to this post

    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(); });
    });
  3. Kendo UI is VS 2017 Ready
  4. Chad
    Chad avatar
    29 posts
    Member since:
    Nov 2012

    Posted 14 Dec 2012 Link to this post

    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?
  5. Robert
    Robert avatar
    6 posts
    Member since:
    Jan 2013

    Posted 04 Apr 2013 Link to this post

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

Back to Top
Kendo UI is VS 2017 Ready