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

[Christopher]

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.

[Veselin Tsvetanov]

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

[Christopher]

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