Getting error when trying to set activeSheetIndex

[Christoph Gasser]

When trying to set the active sheet using this code

var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');if (spreadsheetObj) {    
spreadsheetObj.activeSheetIndex = 1;
}

I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'frozenColumns')

The full error message is:

Uncaught TypeError: Cannot read properties of undefined (reading 'frozenColumns')

    at Ace.renderPanel (ej2.min.js:1:5347914)

    at Mce.renderSheet (ej2.min.js:1:5394553)

    at Mce.refreshSheet (ej2.min.js:1:5399492)

    at uRe.onPropertyChanged (ej2.min.js:1:7858869)

    at uRe.dataBind (ej2.min.js:1:39844)

    at uRe.dataBind (ej2.min.js:1:216309)

    at o (ej2.min.js:1:431)

Any idea why?

BR
C

[Deira Raj Rajkumar]

Hi Christoph Gasser,

We validated your query based on your shared details. To reproduce the issue, we created a spreadsheet with two sheets, each containing frozen rows and column. Then in the created event we changed the activeSheetIndex to 1 similar to your code snippet.  But we weren’t able to replicate the issue on our end.

For your reference, we have shared the sample we have used on our end to replicate your issue as well as a video demonstrating that the issue didn’t take place on our end.

Sample link – please refer to the attachment below.

To validate further regarding this issue, kindly share the below details form your end.

1. In your query you are changing the activeSheetIndex.  Kindly mention where you are using this (inside created event or etc.).
2. Kindly share more details regarding your issue.  If possible, share a screenshot or video demonstration of the issue.
3. Kindly share details on when you are facing this issue (while performing a certain action or UI interaction or during initial rendering).
4. Have you done any other code customization?  If so, kindly share details and relevant code snippets regarding this customization.
5. Kindly confirm the spreadsheet version you are using on your end.
6. We have shared the sample we have used on our end.  If possible, kindly replicate the issue on the sample and revert it back to us.

Kindly share the above details from your end for us to validate further regarding this.

With regards,

Deira.

Attachment: Forum_b3ff4cfa.zip

[Christoph Gasser]

I cant get it to work in my solution.

This is the code I use in JS to load the Excel:

function onCreated() {

    var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

    this.addCustomFunction(excelFunctionMid, 'MID');

    this.addCustomFunction(excelFunctionLeft, 'LEFT');

    var meta = @Html.Raw(Json.Serialize(Model));

    $.ajax({

        type: "POST",

        url: "Load",

        data: JSON.stringify(meta),

        contentType: "application/json; charset=utf-8",

        dataType: 'json',

        success: function (data) {

            ssObj.openFromJson({ file: data });

            var spreadsheet = document.getElementById("spreadsheet").ej2_instances[0];

            spreadsheet.activeSheetIndex = 1;

        }

    })

    var adj = (window.screen.width == window.outerWidth) ? 0 : -15

    var maxScreenWidth = window.innerWidth * (window.screen.width / (window.outerWidth + adj))

    if (parseInt(maxScreenWidth) != maxScreenWidth) maxScreenWidth = window.screen.width

    var maxScreenHeight = window.screen.height - 250;

    document.getElementById('excelViewer').setAttribute("style", "height:" + maxScreenHeight + "px");

    document.getElementById('spreadsheet').setAttribute("style", "width:" + maxScreenWidth + "px");

    document.getElementById('spreadsheet').setAttribute("style", "height:" + maxScreenHeight + "px");

    document.getElementById('spreadsheet_sheet_panel').setAttribute("style", "height:" + maxScreenHeight + "px");

}

The important part is:

var spreadsheet = document.getElementById("spreadsheet").ej2_instances[0];

            spreadsheet.activeSheetIndex = 1;

The behaviour is hard to explain. Therefore I made a short clip: https://www.youtube.com/watch?v=6egl1utLXm4

File is loaded.

Then it selects the correct worksheet but does not display it correct.

When selecting another worksheet manually and then selecting the worksheet again, it shows correct.

Any idea why this is?

BR
C

[Christoph Gasser]

I cant get it to work in my solution.

This is the code I use in JS to load the Excel:

function onCreated() {

    var ssObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

    this.addCustomFunction(excelFunctionMid, 'MID');

    this.addCustomFunction(excelFunctionLeft, 'LEFT');

    var meta = @Html.Raw(Json.Serialize(Model));

    $.ajax({

        type: "POST",

        url: "Load",

        data: JSON.stringify(meta),

        contentType: "application/json; charset=utf-8",

        dataType: 'json',

        success: function (data) {

            ssObj.openFromJson({ file: data });

            var spreadsheet = document.getElementById("spreadsheet").ej2_instances[0];

            spreadsheet.activeSheetIndex = 1;

        }

    })

    var adj = (window.screen.width == window.outerWidth) ? 0 : -15

    var maxScreenWidth = window.innerWidth * (window.screen.width / (window.outerWidth + adj))

    if (parseInt(maxScreenWidth) != maxScreenWidth) maxScreenWidth = window.screen.width

    var maxScreenHeight = window.screen.height - 250;

    document.getElementById('excelViewer').setAttribute("style", "height:" + maxScreenHeight + "px");

    document.getElementById('spreadsheet').setAttribute("style", "width:" + maxScreenWidth + "px");

    document.getElementById('spreadsheet').setAttribute("style", "height:" + maxScreenHeight + "px");

    document.getElementById('spreadsheet_sheet_panel').setAttribute("style", "height:" + maxScreenHeight + "px");

}

The important part is:

var spreadsheet = document.getElementById("spreadsheet").ej2_instances[0];

            spreadsheet.activeSheetIndex = 1;

The behaviour is hard to explain. Therefore I made a short clip: https://www.youtube.com/watch?v=6egl1utLXm4

File is loaded.

Then it selects the correct worksheet but does not display it correct.

When selecting another worksheet manually and then selecting the worksheet again, it shows correct.

Any idea why this is?

BR
C

[Dinakar Manickam]

Hi Christoph Gasser,

Thank you for sharing the details and the video demonstration.

We reviewed the code snippet you provided and understand that you're encountering a rendering issue when setting the activeSheetIndex immediately after loading an Excel file using the openFromJson method.

To investigate the issue, we created a sample where we loaded JSON data containing two sheets and then changed the activeSheetIndex right after calling openFromJson in the created event of the Spreadsheet. We were able to reproduce the same issue on our end.

This behavior occurs because the sheet undergoes multiple refreshes—once during openFromJson, and again when switching the activeSheetIndex. As a result, the sheet header gets rendered twice, which leads to the display issue you observed.

To resolve this, we recommend using the openComplete event, which ensures the Spreadsheet is fully loaded before changing the activeSheetIndex. You can enable this event by setting the triggerEvent property to true when calling the openFromJson method. Within the openComplete event, check that the data was loaded using the openFromJson method by verifying the args.response.isOpenFromJson property. Once confirmed, update the activeSheetIndex and call dataBind() to finalize the rendering and prevent the duplicate header issue.

For your convenience, we’ve included a working sample, the relevant code snippet, and a video demonstration below:

Code Snippet:

var spreadsheet = new ej.spreadsheet.Spreadsheet({

  openComplete: function (args) {

    if (args.response.isOpenFromJson) {

      spreadsheet.activeSheetIndex = 1;

      spreadsheet.dataBind();

    }

  },

  created: function () {

    spreadsheet.openFromJson({ file: jsonData, triggerEvent: true });

  },

});

 

Sample Link: Iundjeys (forked) - StackBlitz

Video Demonstration: Please check the attachment below.

Please review the solution provided and let us know if you have any further questions or need additional assistance.

Best regards,
Dinakar M

Attachment: F196735_33d069af.zip

[Christoph Gasser]

I tried to use the openComplete event like this:

<ejs-spreadsheet id="spreadsheet" created="onCreated" openComplete="setWorksheet" openUrl="Open" showRibbon="false" showFormulaBar="false" showSheetTabs="true" calculationMode="Automatic">

function setWorksheet(args) {

    var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

    if (spreadsheetObj) {

        spreadsheetObj.activeSheetIndex = 1;

        spreadsheetObj.dataBind();

    }

}

But the event is not firing and hence the function is not called. Any reason why?

Will try to implement it based on your example.

BR
C

[Christoph Gasser]

I have adjusted your sample by adding a "openComplete" function.

It is not triggered in your modified example either.

BR
C

Attachment: Core_Sample_19446e34.7z

[Babu Periyasamy]

Hi Christoph Gasser,

Thank you for your update.

We have reviewed your query regarding the openComplete event not being triggered. And would like to inform you that the openComplete event is triggered only after importing a file into the Spreadsheet or when the triggerEvent option is explicitly set to true in the openFromJson method, as mentioned in our previous response.

Additionally, we have examined the shared sample and added the necessary code to set the activeSheetIndex within the openComplete event, whether it is triggered via openFromJson or file import. Please find the updated code snippet and the modified sample linked below for your reference.

function openComplete(args) {

     var spreadsheetObj = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');

     if (spreadsheetObj && args.response.isOpenFromJson) { // Executed while loading JSON data via the openFromJson method with the triggerEvent property set to true.

         spreadsheetObj.activeSheetIndex = 1;

         spreadsheetObj.dataBind();

     } else if (spreadsheetObj) { //Executed while file imported via File menu or open method.

         spreadsheetObj.activeSheetIndex = 1;

     }

}

Sample: Please refer to the attachment.

Kindly check the above shared details and get back to us if you have any further questions or concerns.

Regards,

Babu.

Attachment: Core_Sample_f4efd188.zip