Designer throwing error on load

Designer throwing error on load

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

• 

  datta

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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]

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  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