How to display the formatting of a cell when the cell is in edit mode in JavaScript

June 17 2021

Background:

To display a cell’s formatting during edit mode use the setEditorValue method to customize the cells editor value.

Steps to Complete:

1. Create a cell with a custom editor value

2. Set the editor value to display the same value and formatting

Getting Started:

Step 1: Create a cell with a custom editor value

Use the setEditorValue method and get the cell value and formatter from the row and column indexes.

 GC.Spread.Sheets.CellTypes.Text.prototype.setEditorValue = function (
        editor,
        value,
        context
      ) {
       var sheet = context.sheet,
        row = context.row,
        column = context.col;
        // 1.) Get the unformatted data from the specified cell in the specified sheet area for the row and col index
        var cellValue = sheet.getValue(row, column);
        // 1.) Get the cell formatter for the row and col index
        var formatter = sheet.getFormatter(row, column);
      };

Step 2: Set the cells editor value

Set the editor value to display the same value and formatting by first setting the value to be equal to SpreadJS’s the GeneralFormatter class with the returned formatter of the selected cell.

Then call for the custom cell to set the editor with the value that contains the formatting of the cell.

var newForm = GC.Spread.Sheets.CellTypes.Text.prototype.setEditorValue;

GC.Spread.Sheets.CellTypes.Text.prototype.setEditorValue = 
  function(editor, value, context) {
    var sheet = context.sheet, row = context.row, column = context.col;
    var cellValue = sheet.getValue(row, column);
    var formatter = sheet.getFormatter(row, column);
    
    if (cellValue && formatter) {
     value = new GC.Spread.Formatter.GeneralFormatter(formatter).format(value);
     newForm.call(this, editor, value, context);
    }
    else {
        newForm.apply(this, arguments);
    }
  };