How to save custom cell type via toJSON?

How to save custom cell type via toJSON?

Posted by: k.szabariova on 28 July 2021, 5:56 am EST

• 

  k.szabariova

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 July 2021, 5:56 am EST

  Hello, I create a custom cell type, assign it to a column (or specific cells let’s say) and then I save the sheet using toJSON.
  
  It seems information about the custom type is not saved into JSON, as I cannot see it in the JSON dump. Also, consequently, loading the JSON causes cell to seemingly receive the value (object in my example) but custom cell type is not assigned to cell anymore.

  How to save custom cell type to JSON, which cells contain this type; and how to load custom cell type form JSON into the cells?

  Here is a working example of the issue:

  https://codesandbox.io/s/spreadjs-custom-cell-save-json-jxk5t?file=/src/index.js

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 3:11 am EST

  Hi,

  For this, you need to follow two first is define typeName property on custom function class and then expose the custom function class to the window object. Please refer to the following code snippet and attached updated sample that demonstrates the same.

  
  export class FullNameCellType extends GC.Spread.Sheets.CellTypes.Base {
    constructor(eventId) {
      super();
      this.typeName = "FullNameCellType";
      this.eventId = eventId;
    }
  
    paint(ctx, value, x, y, w, h, style, options) {
      if (value) {
        spreadNS.CellTypes.Base.prototype.paint.apply(this, [
          ctx,
          value.firstName + "." + value.lastName,
          x,
          y,
          w,
          h,
          style,
          options
        ]);
      }
    }
  
    updateEditor(editorContext, cellStyle, cellRect) {
      if (editorContext) {
        editorContext.style.width = cellRect.width;
        editorContext.style.height = 100;
        return { height: 100 };
      }
    }
    createEditorElement() {
      var div = document.createElement("div");
      div.setAttribute("gcUIElement", "gcEditingInput");
      div.style.backgroundColor = "white";
      div.style.overflow = "hidden";
      var span1 = document.createElement("span");
      span1.style.display = "block";
      var span2 = document.createElement("span");
      span2.style.display = "block";
      var input1 = document.createElement("input");
      var input2 = document.createElement("input");
      var type = document.createAttribute("type");
      type.nodeValue = "text";
      var clonedType = type.cloneNode(true);
      input1.setAttributeNode(type);
      input2.setAttributeNode(clonedType);
      div.appendChild(span1);
      div.appendChild(input1);
      div.appendChild(span2);
      div.appendChild(input2);
      return div;
    }
    getEditorValue(editorContext) {
      if (editorContext && editorContext.children.length === 4) {
        var input1 = editorContext.children[1];
        var firstName = input1.value;
        var input2 = editorContext.children[3];
        var lastName = input2.value;
        return { firstName: firstName, lastName: lastName };
      }
    }
    setEditorValue(editorContext, value) {
      if (editorContext && editorContext.children.length === 4) {
        var span1 = editorContext.children[0];
        span1.innerHTML = "First Name:";
        var span2 = editorContext.children[2];
        span2.innerHTML = "Last Name:";
        if (value) {
          var input1 = editorContext.children[1];
          input1.value = value.firstName;
          var input2 = editorContext.children[3];
          input2.value = value.lastName;
        }
      }
    }
  }
  
  window["FullNameCellType"] = FullNameCellType;
  
  

  sample: https://codesandbox.io/s/spreadjs-custom-cell-save-json-forked-0nuz3

  Also please refer to the following demo which demonstrates how you could serialize the custom Item in SpreadJS.

  custom Item serialize Demo:https://www.grapecity.com/spreadjs/demos/features/workbook/custom-item-serialization#demo_source_name

  Regards
  
  Avinash

• 

  k.szabariova

  • Post Options:
  • Link
    Copy

  Posted 29 July 2021, 9:07 am EST

  Hello, thanks for reply!

  It got me halfway, it helped me fix my codesandbox I attached in the question, however in my own code the problem persisted (the custom cell type was not assigned to the column after load).

  After quite a bit of debugging I realised the problem is I was overriding GC.Spread.Sheets.getTypeFromString already (because of different feature), which caused the simple solution you provided not be sufficient.

  So I want to add this for others struggling with the same: If you deserialize custom function by using getTypeFromString already, you need to include deserialization of custom cell in there as well (or you need to not use getTypeFromString at all).

   GC.Spread.Sheets.getTypeFromString = (typeString) => {
        if (typeString === FORMULAS.CUSTOM) {
          return CustomFormula;
        }
        if (typeString === CELL_TYPE.CUSTOM_SELECTOR) {
          return SelectCellType;
        }
      };
  
  

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 30 July 2021, 6:36 am EST

  Hi,

  We are glad to know that the issue has been resolved. Feel free to revert back if you face any issues related to this case.

  Regards
  
  Avinash