Designer throwing error on load

Posted by: datta on 28 September 2023, 8:08 pm EST

    • Post Options:
    • Link

    Posted 28 September 2023, 8:08 pm EST

    Hi I am using SpreadJS designer component for react. I am getting below error which pops up when spreadsheet loads

    Uncaught TypeError: Cannot read properties of null (reading 'getCanvas')
        at e.checkLayoutChange (gc.spread.sheets.designer.all.min.js:1:6979665)
        at e.updateRibbonReal (gc.spread.sheets.designer.all.min.js:1:6964165)
        at eval (gc.spread.sheets.designer.all.min.js:1:6963938)

    Can you please tell me what is the problem here? I am using spreadjs version 16.2.2. Below is my code.

    [code]// import React from “react”;

    import React, { useState, useEffect, useRef } from ‘react’;

    import PropTypes from “prop-types”;

    import * as GC from “@grapecity/spread-sheets”;

    import “@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css”;

    import “@grapecity/spread-sheets-print”;

    import “@grapecity/spread-sheets-shapes”;

    import “@grapecity/spread-sheets-slicers”;

    import “@grapecity/spread-sheets-pivot-addon”;

    import “@grapecity/spread-sheets-tablesheet”;

    import “@grapecity/spread-sheets-io”;

    import “@grapecity/spread-sheets-designer-resources-en”;

    import “@grapecity/spread-sheets-designer”;

    import { Designer } from “@grapecity/spread-sheets-designer-react”;

    import “@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css”;

    import “@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css”;

    import { IO } from “@grapecity/spread-excelio”;

    import dynamic from ‘next/dynamic’

    SpreadsheetView.propTypes = {};

    export default function SpreadsheetView(props) {

    // console.log(“SpreadsheetView”, “SpreadsheetView”)

    // debugger

    const { data } = props;

    console.info(“data”, data);

    let rowFields = props.rowFields;

    const convertedData = [Object.keys(data[0])].concat(

    data.map((item) => Object.values(item))

    );

    const [designer, setDesigner] = useState();

    function designerInitializedCallback(designer) {

    setDesigner(designer);

    var spread = designer.getWorkbook();
    spread.suspendPaint();
    // get sheets
    var pivotLayoutSheet = new GC.Spread.Sheets.Worksheet();
    pivotLayoutSheet.name("PivotLayout");
    spread.addSheet(0, pivotLayoutSheet);
    
    var dataSourceSheet = new GC.Spread.Sheets.Worksheet();
    dataSourceSheet.name("DataSource");
    spread.addSheet(1, dataSourceSheet);
    
    // var pivotLayoutSheet = spread.getSheet(0);
    // var dataSourceSheet = spread.getSheet(1);
    // set sheet name
    // pivotLayoutSheet.name("PivotLayout");
    // dataSourceSheet.name("DataSource");
    // set row count
    dataSourceSheet.setRowCount(245);
    // set datasource
    dataSourceSheet.setArray(0, 0, convertedData);
    // add table to dataSourceSheet
    dataSourceSheet.tables.add("tableSales", 0, 0, 245, 8);
    spread.resumePaint();
    // initialize pivottable
    initPivotTable(pivotLayoutSheet);
    // auto fit columns in both the sheets
    autoFit(pivotLayoutSheet);
    autoFit(dataSourceSheet);
    // });
    function initPivotTable(sheet) {
      // add pivottable
      var myPivotTable = sheet.pivotTables.add(
        "myPivotTable",
        "tableSales",
        0,
        0,
        GC.Spread.Pivot.PivotTableLayoutType.tabular,
        GC.Spread.Pivot.PivotTableThemes.dark3
      );
      myPivotTable.suspendLayout();
      // show rowHeader and columnHeader for PivotTable
      myPivotTable.options.showRowHeader = true;
      myPivotTable.options.showColumnHeader = true;
      // add column fields
      // myPivotTable.add("Current_Value", "Current_Value", GC.Spread.Pivot.PivotTableFieldType.columnField);
      // myPivotTable.add("FINANCIALQUARTER", "FINANCIALQUARTER", GC.Spread.Pivot.PivotTableFieldType.columnField);
      // add row fields
      rowFields.forEach((fieldName) => {
        myPivotTable.add(
          fieldName,
          fieldName,
          GC.Spread.Pivot.PivotTableFieldType.rowField
        );
      });
    
      myPivotTable.options.subtotalsPosition = 0;
    
      //
      // myPivotTable.add("City", "City", GC.Spread.Pivot.PivotTableFieldType.rowField);
      // add value field with SubtotalType Sum
      // myPivotTable.add("Current_Value", "Current_Value", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
      // myPivotTable.add("Previous_Value", "Previous_Value", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
      // add filter field
      // myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField);
      myPivotTable.resumeLayout();
      return myPivotTable;
    }
    function autoFit(sheet) {
      // auto fit columns
      // let columnCount = sheet.getColumnCount();
      // for (let i = 0; i < columnCount; i++) {
      //   sheet.autoFitColumn(i);
      // }
    }
    // designer.setSheetData(data);
    

    }

    var config = GC.Spread.Sheets.Designer.DefaultConfig;

    return (



    {/* sxevrrcfvtvt */}

    <Designer

    styleInfo={{ width: “100%”, height: “90vh” }}

    config={config}

    designerInitialized={designerInitializedCallback}

    >



    );

    }

    [/code]

  • Posted 2 October 2023, 9:44 pm EST

    Hello,

    We are not able to replicate the issue on our end. We tried to replicate the issue by using the code snippet provided by you. However, it was working correctly on our end and no error was thrown.

    Please refer to the attached sample.

    sample: sample.zip

    Please provide us with a minimal working sample that replicates the issue. You may also modify the attached sample and share the same with us. It would be difficult to pinpoint the actual cause of the issue without replicating the issue on our end.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels