Custom combo box cell type

Custom combo box cell type

Posted by: ichioka.yuji on 5 November 2024, 6:04 am EST

• 

  ichioka.yuji

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 November 2024, 6:04 am EST - Updated 5 November 2024, 6:07 am EST

  Hello,

  I wanted to create a custom combo box cell type based on the default ComboBox cell type class. However, using my codes below, an exception occured in calling “createEditorElement” method of the base class every time when I clicked the arrow in Cell A1. Do you see any issues in my implementaion codes?

  import * as GC from '@mescius/spread-sheets';
  import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css';
  import * as React from 'react';
  import './App.css';
  
  import Sheets = GC.Spread.Sheets;
  
  class MyComboBoxCellType extends Sheets.CellTypes.ComboBox {
    constructor() {
      super();
  
      const items = ["Item1", "Item2", "Item3"];
      this.items(items);
    }
  
    public override createEditorElement(
      context?: { sheet: Sheets.Worksheet, row: number, col: number, sheetArea: Sheets.SheetArea }
    ) {
      const editor = super.createEditorElement(context);  // <-- An exception was thrown inside here!!
      return editor;
    }
  }
  
  export default function App() {
    const host = React.useRef<HTMLDivElement | null>(null);
  
    React.useEffect(
      () => {
        const workbook = new Sheets.Workbook(host.current!, { sheetCount: 1 });
        const sheet = workbook.getSheet(0);
        sheet.getCell(0, 0).cellType(new MyComboBoxCellType());
  
        return () => workbook.destroy();
      },
      []
    );
  
    return (
      <div ref={host} style={{ height: "90vh", width: "100%" }} />
    );
  }

  Here is the link to your API document I referenced:
  
  https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.CheckBox#createeditorelement

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2024, 1:09 am EST

  Hi,

  The ComboBox is implemented as a function-based constructor, not an ES6 class. This impacts inheritance in MyComboBoxCellType, which uses class syntax. The super keyword doesn’t work as expected because super relies on class inheritance, whereas ComboBox uses prototype-based inheritance.

  Instead, using ComboBox.prototype.method.apply(this, arguments) correctly calls methods from ComboBox in the MyComboBoxCellType class, ensuring the method executes with the correct context (this).

  In your sample, you could use the following code snippet:

  class MyComboBoxCellType extends Sheets.CellTypes.ComboBox {
    constructor() {
      super();
  
      const items = ["Item1", "Item2", "Item3"];
      this.items(items);
    }
  
  
    public override createEditorElement(
      context?: { sheet: Sheets.Worksheet; row: number; col: number; sheetArea: Sheets.SheetArea }
    ) {
      var editor = GC.Spread.Sheets.CellTypes.ComboBox.prototype.createEditorElement.apply(this, (arguments as any));
      return editor;
    }
  }

  I have also attached an updated sample. Let me know if you face any issues.

  Regards,

  Ankit

  spreadjs-app.zip

• 

  ichioka.yuji

  • Post Options:
  • Link
    Copy

  Posted 6 November 2024, 11:03 pm EST

  Thanks to your sample, the problem of an unhandled exception thrown was solved. But the retun value from calling the methods from ComboBox was always null. Why?
  
  I intended to embed and reuse the original editor into my custom editor.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 November 2024, 11:05 am EST

  Hi,

  We are happy that your previous issue has been resolved. The reason you are getting “null” when calling the createEditorElement because internally it also returns null and not the HTML element.

  For your use case, you could use the “activateEditor” method and you will get the editor element as the first parameter of the method.

  Refer to the following code snippet and the attached sample.

    public override activateEditor(editorContext: HTMLElement, cellStyle: GC.Spread.Sheets.Style, cellRect: GC.Spread.Sheets.Rect, context?: any): void {
      // Change the Background Color to Yellow
      editorContext.style.backgroundColor = "yellow";
      console.log(editorContext);
    }

  activateEditor method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.ComboBox#activateeditor

  Let me know if you face any issues.

  Regards,

  Ankit

  spreadjs-app.zip