Log in to start a topic

An unhandled exception occured on resizing a table with dragging its handle

Posted by: ichioka.yuji on 5 October 2024, 5:40 am EST

  • ichioka.yuji

    • Post Options:
    • Link
      Copy

    Posted 5 October 2024, 5:40 am EST - Updated 5 October 2024, 5:45 am EST

    Hello,

    I’m creating a React application using SpreadJS.

    With the following simple code, a resizable table was successfully created on a spreadsheet. However, when I tried to resize a table with dragging its handle, an unhandled exception occured in ‘…/node_modules/.vite/deps/@mescius_spread-sheets.js.’ The error message shown up was “TypeError: Cannot read properties of undefined (reading ‘row’)”.

    Why? It would be appreacted for any helps to me. Thank you in advance.

    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;

export default function App() {
  const host = React.useRef<HTMLDivElement>();

  React.useEffect(
    () => {
      const workbook = new Sheets.Workbook(host.current, {sheetCount: 3});
      const sheet = workbook.getActiveSheet();
      const table = sheet.tables.add("table1", 1, 1, 4, 4, Sheets.Tables.TableThemes.light1);
      table.showResizeHandle(true);

      return () => workbook.destroy();
    },
    []
  );

  return (
    <div ref={host} style={{ height: "100%", width: "100%" }} />
  );
}

    Here is the detail information that Visual Studio provided me regarding the unhandled exception.

      Message=
  Source=
  Stack trace:
  at r2 (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:49771:77)
    at Y.paintAdornment (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:49779:35)
    at Pt.f2.et (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:4110:54)
    at i2.jy (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:14942:37)
    at n2.jy (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:2046:16)
    at i2._e (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:14930:59)
    at i2.E1 (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:14919:91)
    at In.F1 (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:3744:123)
    at i2.p_ (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:12448:53)
    at i2.Zg (https://localhost:5173/node_modules/.vite/deps/@mescius_spread-sheets.js?v=e712fa19:12428:36)

  • chandan.rawat

    Posted 7 October 2024, 12:18 am EST

    Hi,

    Thanks for providing the code snippet.

    We are able to replicate the issue at our end. After investigation, we found that the issue occurs if the table resize handle is clicked when the workbook is not focused. Hence, we have escalated the issue to the dev team. The internal tracking ID is SJS-26676 for the mentioned issue. Rest assured, we will keep you updated.

    As a workaround, you can use the workbook.focus(true) method to focus the workbook after it is initialized so that the issue does not occur. Kindly refer to the attached sample.

    sample: vite-spreadjs-react.zip

    Regards,

    Chandan

  • ichioka.yuji

    Posted 15 October 2024, 5:48 am EST

    Thank you for your response.

    Although the workaround you showed above worked well with my first codes, it doesn’t solve in the following case: My application window has a button (eventually will be acting as toolbar buttons) and a SpreadJS worksheet. When an user tried to resize the table after clinking the button, an unhandled exception still occured.

    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;

export default function App() {
  const host = React.useRef<HTMLDivElement>();

  React.useEffect(
    () => {
      const workbook = new Sheets.Workbook(host.current, { sheetCount: 3 });
      // Focus on workbook
      workbook.focus(true);
      const sheet = workbook.getActiveSheet();
      const table = sheet.tables.add("table1", 1, 1, 4, 4, Sheets.Tables.TableThemes.light1);
      table.showResizeHandle(true);

      return () => workbook.destroy();
    },
    []
  );

  return (
    <>
      <button style={{ height: "10vh", width: "90vw" }} />
      <div ref={host} style={{ height: "90vh", width: "90vw" }} />
    </>
  );
}

  • ichioka.yuji

    Posted 15 October 2024, 7:03 am EST - Updated 15 October 2024, 7:26 pm EST

    I have an additional quetion:

    There are two events related to resizing a table; 'TableResizing" event and ‘TableResized’ event. My question is why the argument of ‘TableResizing’ event handler doesn’t have a ‘cancel’ parameter?

    I wanted to limit the maximum number of table columns to a specific number when an user is resizing the table.

  • chandan.rawat

    Posted 16 October 2024, 2:12 am EST

    Hi,

    Please refer to the below answers to your queries.

    1. As I mentioned earlier that the issue occurs if the table resize handle is clicked when the workbook is not focused. In your case, when the button is clicked, it moves focus out of workbook and then clicking on table resize handle throws the error.

    As a workaround, you can focus on workbook again when the mouse cursor enters the host element of workbook. Kindly refer to the attached sample.

    Additionally, we would like to inform you that this issue(SJS-26676) has been fixed and will be included in the next service pack release of SpreadJS i.e. SpreadJS v17.0.8.

    1. We have informed the dev team about your use case and asked them if cancelling TableResizing event can be supported with “cancel” option. The internal tracking ID for this is SJS-26888. We will keep you updated on this.

    Also, we will encourage you to post different/unrelated issues/queries on different forum tickets. It will help us as well as you to better track/manage issues/solutions.

    sample: sample.zip

    Regards

  • chandan.rawat

    Posted 18 October 2024, 2:42 am EST

    Hi,

    We have created a story for cancelling the TableResizing event of Table and added it to our product backlog. The internal tracking ID is SJS-26888 for the created story.

    For now, you can use a workaround to limit the number of maximum columns in the table when the table is resized using the table resize handler. The workaround is to override the resize() method of TableManager class that is called internally when table is resized with table resize handler. By overriding the resize() method, you can put custom logic inside it to check if the table should be resized or not.

    Kindly refer to the attached sample for more understanding.

    References:

    TableManager.resize(): https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Tables.TableManager#resize

    sample: sample.zip

    Regards

  • chandan.rawat

    Posted 24 October 2024, 11:19 pm EST

    Hi,

    The mentioned issue, clicking on table resize handle throws error on console(SJS-26676), has been fixed in the latest release of SpreadJS i.e. SpreadJS v17.1.8. You can download the latest version from the below link or from npm.

    Download link: http://cdn.mescius.com/spreadjs/17.1.8/Files/SpreadJS.Release.17.1.8.zip

    Regards

  • ichioka.yuji

    Posted 28 October 2024, 3:49 am EST

    I confirmed the probrem was fixed with v17.1.8. Thank you very much for your prompt response!!

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.