Grid with Navigatable, autosync, and incell editing

4 posts, 0 answers
  1. andy
    andy avatar
    4 posts
    Member since:
    May 2014

    Posted 19 May 2014 Link to this post

    Hi there,

    My goal for this grid is support fast bulk editing of a table.  My assumption is that the users will be all keyboard oriented and looking to enter in alot of data at once.  I want to be able to edit a field and tab to the next field for editing.  It looks like when you have navigatable ,incell editing, and autosync when you leave the column with changes instead of tabing to the next column, tab doesn't go anywhere.  This pretty much kills the reason for the grid (fast keyboard editing).  

    I can find one similar question but i can't figure out a solution that really works.  This approach below does sort of work in that it does refocus to the next cell.  However, there's a visible jump of focus to the first cell and the whole thing takes way too long.  Is there a way I can do this in a single event handler?  Ideally I wouldn't wait for the autosync to happen, but would immediately goto the next cell so the user can start typing there as well.

    thanks,
    andy

      var gridOptions = {
        edit: function(e) {
          nextCell = {
            cellIndex: e.container[0].cellIndex,
            uid: e.model.uid,
          };
          console.log("saving", nextCell);
        },
        dataBound: function(e) {
          var grid = e.sender;
          console.log("set focus to next cell", nextCell);
          var nextCellIndex = nextCell.cellIndex + 1;
          var row = grid.items().filter("tr[data-uid=" + nextCell.uid + "]");
          var cell = row.find("td:eq(" + nextCellIndex + ")");
          console.warn("setting cell: ", cell);
          //        grid.current(cell);
          grid.editCell(cell);
        }
      };

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 21 May 2014 Link to this post

    Hello Andy,

    The behaviour is expected and occurs because the automatical synchronization is turned on.
    Please check this sample as it demonstrates how to re-focus last edited cell after synchronization: http://trykendoui.telerik.com/@Alexander/Ezoh/3

    Pay attention to the save and dataBound event handlers.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Shoshanah
    Shoshanah avatar
    10 posts
    Member since:
    Feb 2009

    Posted 23 Oct 2017 in reply to Alexander Valchev Link to this post

    Hi! I am encountering a similar issue as andy, and would like to re-focus on the last edited cell -- especially when adding records.  However, the sample application linked in the answer is receiving the following error on 'grid.table.focus':

     

    Line: 79
    Error: Unable to get property 'focus' of undefined or null reference

  4. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 25 Oct 2017 Link to this post

    Hello, Shoshanah,

    The example throws an error as the grid variable has to be replaced with "this":

    http://dojo.telerik.com/utigUk

    Still, we do not recommend using incell editing with auto sync as this can create an issue like this one or also will cause multiple calls to the server which can create performance issues.

    For example, if the user edits cell very fast like 15 records per minute, this will cause 15 calls to the server which is not very efficient.

    In these cases we recommend using batch editing with and a button to save the changes, as in our demo:

    http://demos.telerik.com/kendo-ui/grid/editing

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top