Posted 29 September 2023, 5:08 am 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]