Editing

SpreadJS allows users to control the editing operation of cells. The editing mode of a cell is always enabled by default. You can enable or disable the editing in a cell as per your requirement.

The following sections describe that how the user can always enable edit mode in a cell and how the editing operation of a cell can be disabled by all means.

Edit Mode Always

You can set the cell to always be in edit mode when the user clicks on it. Normally the user types or double-clicks before the cell goes into edit mode.

Set the startEdit method in the EnterCell event to cause the cell to go into edit mode as soon as the user clicks on or uses tab or enter to move to the cell.

The following code sample puts the cell in edit mode when the user clicks on it.

window.onload = function()
{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
   
   // Set to be always in input mode.
   spread.bind(GC.Spread.Sheets.Events.EnterCell, function (event, data)
   {
      var sheet = data.sheet;
      activeSheet.startEdit(false);
   });
}

If the selectAll parameter in the startEdit method is set to true, then it selects all the text when the text is changed during editing.

The following code sample selects the text when editing starts.

$(document).ready(function ()
{
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var sheet = spread.getActiveSheet();
   sheet.setValue(0, 0, "ABC", GC.Spread.Sheets.SheetArea.viewport);

   // Set it to be always in input mode.
   spread.bind(GC.Spread.Sheets.Events.EnterCell, function (event, data)
   {
      var activeSheet = data.sheet;
      activeSheet.startEdit(true);
   });
});

Disable Editing

SpreadJS allows you to disable editing in a cell as per your requirement by using:

• The allowEditInCell property of the GC.Spread.Sheets.Style class.

• The allowEditInCell() method of the CellRange class.

By default, the allowEditInCell property is enabled. However, on disabling this property, the cell doesn’t get into edit mode in the following ways:

• On double-clicking in a cell

• Using the keyboard to edit in cell or formula text box

• By using worksheet.startEdit() API

Note-

• The allowEditInCell property works only when the cell locking is set to false.

• The allowEditInCell property doesn’t affect how the dropdown button works. The dropdown can change the cell’s value without putting the cell into edit mode.

• If allowEditInCell is set to false then, the formula text box is read-only too.

• The allowEditInCell property works on all cell types.

  • The allowEditInCell property doesn’t control using the cell dropdown to submit a value because the drop-down will not make the cell enter editing mode.

  • The allowEditInCell property controls the opening of the ComboBox cell because the opening of the ComboBox will make the comboBox cell enter editing mode.

The following code disables cell editing by using the allowEditInCell property of the Style class.

var sheet = spread.getActiveSheet();
// Using allowEditInCell property of Style class
var style = new GC.Spread.Sheets.Style();
style.allowEditInCell = false;
sheet.setStyle(1, 1, style);

The following code disables cell editing using the allowEditInCell method of the CellRange class:

// Using allowEditInCell method of CellRange class
sheet.getRange(1, 1, 1, 1, GC.Spread.Sheets.SheetArea.viewport).allowEditInCell(false);

Using Designer

SpreadJS Designer enables you to control whether the cell will enter edit mode or not.

Follow the steps below to disable the editing in the cell.

1. Right-click on any cell and select Format Cells from the context menu.

2. In the Format Cells dialog, click on the Protection tab.

3. Enable/disable editing in the selected cell using the Allow Edit in Cell checkbox.

The below image illustrates how to enable/disable the editing in a cell using the SpreadJS Designer.