Grid Cell Not Entering Edit Mode When Tabbing To Grid From An Input Field

4 posts, 0 answers
  1. Michele
    Michele avatar
    3 posts
    Member since:
    May 2017

    Posted 10 May 2017 Link to this post

    We have a header/detail accounting application with a data-entry form and an editable grid. When tabbing off of the form to the grid the first cell will not go into edit mode except with some workaround 'hack' code in the 'navigate' event (see below). The problem is the grid edit mode literally works differently when tabbing to the first cell of the grid from a form input field vs. clicking in the same cell. Clicking (rather than tabbing) into the first cell does put the cell into edit mode, but
    clears the field contents. Here's the code

    let grid = $("#" + target).kendoGrid({

    dataSource: {
    data: rows,
    schema: {
    model: {
    fields: columnSetup.modelFields
    }
    }
    },
    edit: function (e) {
    // This does not fire when tabbing to the grid. It will fire if a cell is clicked.
    },
    editable: {
    mode: "incell",
    createAt: 'bottom'
    },
    navigatable: true,
    navigate: function (e) {
       // Attempted Workaround (hack) - This does put the first cell in edit mode, but only when tabbing
       // to the grid. However, clicking in the first cell does put the cell in edit mode, but clears the field value.
       if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {
          this.editCell(e.element[0])
       }
    },
    resizable: true,
    reorderable: true,
    scrollable: { virtual: true },
    selectable: "row",
    columns: columnSetup.columns,
    dataBound: keyboardEventHandler,
    }).data('kendoGrid');

  2. Michele
    Michele avatar
    3 posts
    Member since:
    May 2017

    Posted 10 May 2017 Link to this post

    Here's what happens if we leave out the 'navigate' workaround code. The cell receives focus, but does not go into edit mode.
  3. Michele
    Michele avatar
    3 posts
    Member since:
    May 2017

    Posted 11 May 2017 Link to this post

    I was able to resolve this issue based on this post in StackOverflow:

    https://stackoverflow.com/questions/43897630/kendo-grid-cell-not-entering-edit-mode-when-tabbing-to-grid-from-an-input-field

  4. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 12 May 2017 Link to this post

    Hello Michele,

    I'm glad to hear that the issue is resolved.

    Thank you for sharing the solution with the Kendo UI team, this is highly appreciated.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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