Issue: Editing a range selection doesn't allow tabular editing.

3 posts, 0 answers
  1. Christopher
    Christopher avatar
    42 posts
    Member since:
    Jan 2017

    Posted 08 Aug 2017 Link to this post

    I'm not sure if this is a recent issue, or if it's always been there, I'd swear it was working before but maybe I'm mistaken.

    If this is a known issue please disregard.

    In Excel or Google sheets, if you make a rectangular selection of a range, you can edit a value, hit the TAB key, edit the next value, and the selection within the selection will move within your rectangle, allowing you to edit each cell in the range.

    Currently, in the Kendo UI spreadsheet, for some reason, if you enter a value for one cell, it makes that value the value for ALL cells in the selection.

    Steps to reproduce:

    1. Jump to one of the spreadsheet demos: http://demos.telerik.com/kendo-ui/spreadsheet/index
    2. Select a rectangular range.
    3. Type in "ABC".
    4. Notice all cells get changed to "ABC".
    5. Hit tab to edit the next cell.
    6. Type in "123"
    7. Notice all cells get changed to "123".

    The issue:

    Unlike Excel or Google Sheets, and this seems problematic, editing a single cell within a multi-cell range causes all cells to change to that value, rather than allowing individual cell editing via the TAB and ENTER keys.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 10 Aug 2017 Link to this post

    Hello Christopher,

    I am afraid, that the observed is a regression bug introduced to the Kendo Spreadsheet with the R2 SP1 2017 release. Here you will find the GitHub item, where you could track its status. Also, as a small token of gratitude I have updated your Telerik points.

    As a temporary workarownd you could use the following override for the deselect method of the ​SheetEditor​:
    kendo.spreadsheet.SheetEditor.fn.deactivate = function () {
      var that = this;
       
      var cellInput = that.cellInput;
      if (!that._active) {
        return;
      }
      if (cellInput.value() != that._value) {
        var sheet = that._range._sheet;
        var activeCell = sheet.activeCell();
         
        that._range.topLeft = activeCell.topLeft;
        that._range.bottomRight = activeCell.bottomRight;
        that._range._ref.topLeft = activeCell.topLeft;
        that._range._ref.bottomRight = activeCell.bottomRight;

        that.trigger('change', {
          value: cellInput.value(),
          range: that._range
        });
      }
      that._active = false;
      that._rect = null;
      cellInput.hide();
      that.trigger('deactivate');
    }

    Here you could find a simple Dojo, implementing the above.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    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.
  3. Christopher
    Christopher avatar
    42 posts
    Member since:
    Jan 2017

    Posted 10 Aug 2017 in reply to Veselin Tsvetanov Link to this post

    Thank you for the excellent support and the workaround - much appreciated!
Back to Top