Forums Home / Spread / SpreadJS
Posted by: 179x1a0533 on 24 April 2025, 1:31 pm EST
179x1a0533
Posted 24 April 2025, 1:31 pm EST - Updated 24 April 2025, 2:03 pm EST
In the following URL: https://developer.mescius.com/spreadjs/designer/index.html
I’m trying to access the spread sheet using GC.Spread.Sheets.findControl. Its returning undefined. I checked with different locators. But no use. I’ve struggling with this for the past 2 days.
Please check the screenshot for more details.
179x1a0533
Posted 25 April 2025, 7:29 am EST - Updated 25 April 2025, 7:35 am EST
Thanks priyam kushwaha for the prompt response.
Yes, that worked. Any reason why it didn’t work when I use the ID locator strategy?
Another issue is, this scenario it worked. I’ve a similar scenario where I’m unable to find the control of the spreadsheet. How can I trouble shoot it. I used all the ways like chatgpt, etc but none of it helped.
FYI - In the other scenario, As you did, I too passed the class name of the web element that has the gcuielement=‘gcSpread’ . Still its showing as undefined. I tried all the below possible ways but still got undefined.
Yesterday I got all the elements and checked if any of it is an instance of the GC workbook, I found none of them.
Kindly help me to resolve this issue.
179x1a0533
Posted 25 April 2025, 3:07 pm EST
A gentle reminder please…
priyam.kushwaha
Posted 28 April 2025, 8:19 am EST - Updated 28 April 2025, 8:24 am EST
Hi,
We are glad to hear that your initial issue has been resolved.
Regarding the issue where you’re trying to get the Spread instance using the findControl method but receiving undefined:
The findControl API is used to retrieve the Spread instance by passing either the host element’s ID or the host element itself. To identify the host element, you can check for the attribute gcuielement=“gcSpread”.
If an element has this attribute, it is the host for the Spread instance.
If this element has an ID, you can directly pass that ID to findControl to retrieve the instance.
Alternatively, you can pass the HTML element itself.
However, in some cases, the ID might differ, or the structure might vary.
In such situations, you can use the below snippet to find the element with the gcuielement=“gcSpread” attribute and then pass it to findControl:
let spread = GC.Spread.Sheets.findControl(document.querySelector('[gcuielement="gcSpread"]'));Refer to the attached gif “Steps.gif” for a visual demonstration.
Designer: https://developer.mescius.com/spreadjs/designer/index.html
The additional DOM elements and attributes you are seeing (such as gcuielement=‘gcSpread’) are injected by SpreadJS internally after it successfully attaches to the target DOM element.
The findControl method is designed to return the Workbook instance associated with the host element — it does not return instances based on any descendant or dynamically created elements. Thus, while you may observe various DOM nodes in the console, you will only get a valid SpreadJS workbook instance if you pass the correct host element (usually the one with ID “ss” or the explicit host you configured).
For more information, we recommend reviewing the SpreadJS Initialization Documentation: https://developer.mescius.com/spreadjs/docs/getstarted/quick-start/initializing-spreadjs.
If you are passing a valid ID or host HTML element to findControl and still getting undefined,
then to better assist you, could you please share a minimal working sample along with the steps to replicate the behavior you are observing ? This will help me investigate the problem more thoroughly. Additionally, providing a GIF or video illustrating the issue would be very helpful.
References:
Best Regards,
179x1a0533
Posted 29 April 2025, 2:24 am EST - Updated 29 April 2025, 2:29 am EST
Thank you so much Priyam for the response. Let me brief you the second scenario. The web site which I’m having issue with accessing the Workbook does not expose the GC object. I checked all the window object keys and None of it has the spread instance or the GC. So, I injected the following spread sheets CDN in the head tag.
var link = document.createElement(‘link’);
link.href=‘https://cdn.jsdelivr.net/npm/@grapecity/spread-sheets@14.2.1/styles/gc.spread.sheets.excel2016colorful.css’;
document.head.appendChild(link);
var script = document.createElement(‘script’);
script.src=‘https://cdn.jsdelivr.net/npm/@grapecity/spread-sheets@14.2.1/dist/gc.spread.sheets.all.min.js’; document.head.appendChild(script);
Similarly, I injected the license too.
After doing that, I’m able to access the GC Object on the console. Post that I tried to access the workbook with the GC instance I created. Now, I tried several ways to get the access to the workbook. But I’m unable to do it. I tried the code you gave but it also didn’t help me. Could you please help me to resolve this issue?
FYI - We don’t have control to source code to expose the GC object from their end.
Thanks.
ankit.kumar
Posted 30 April 2025, 8:58 am EST - Updated 30 April 2025, 9:03 am EST
Hi,
Based on our understanding, you are attempting to access the GC object; however, you do not have direct access to the source code. To work around this, you’ve correctly injected the necessary SpreadJS scripts, stylesheets, and license into the document. But still unable to get the Spread object.
This behaviour exists by design and reflects fundamental security, encapsulation, and lifecycle management principles—especially when working with complex JavaScript frameworks like React.
Why does GC.Spread.Sheets.findControl(hostElement) return undefined when GC is injected from the console?
Even if you inject the GC object via CDN from the console:
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@grapecity/spread-sheets@14.2.1/dist/gc.spread.sheets.all.min.js';
document.head.appendChild(script);This creates a separate, isolated GC context, different from what the app may have internally (if any). If the original app uses a different version or has no GC object at all, your injected GC cannot reference internal SpreadJS instances, as they were never created using your version of GC.
GC.Spread.Sheets.findControl(hostElement)The SpreadJS instance was created using the same GC object (same memory reference).
The DOM element (hostElement) passed is the actual one linked to that GC context.
Hence, you can successfully get the spreadJS from the previous selectors you have used via the origina GC context like this below
but can not get from the GC object which was injected from the console.
When you inject GC via console, and the actual app used its own GC (or uses React encapsulation), there’s no shared reference, so findControl() returns undefined.
** Why Is This Behavior Important?**
Security and Encapsulation: Prevents exposing internal app state and objects to the public/global scope unintentionally.
Preventing Misuse and Incompatibility: Injecting a different GC version from the console might lead to version conflicts or runtime errors if the app is using another version internally.
Recommended Approach
If access is necessary:
window.GC = GC;
window.workbook = workbook; // or spread instancePlease let us know if you need further guidance.
Best regards,
Ankit
179x1a0533
Posted 30 April 2025, 9:07 am EST
Understood… Thanks for the detailed explanation…
