Error when trying to use FrozenRows and merge

[ShareValue]

Hi,

We're trying to set up a Spreadsheet with one FrozenRow.  But on that sheet we need to merge some rows in that sheet (not the one that is frozen). Rows frozen is 1.

The merging is being done in JavaScript with something like:

this.merge("K3:K15", "All");this.wrap("K3:K15");this.merge("L3:L15", "All");this.wrap("L3:L15");this.merge("M3:M15", "All");this.wrap("M3:M15");

But we are getting this JavaScript error:

ej2.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'style')

    at XT (ej2.min.js:1:660188)

    at e.updateActiveCell (ej2.min.js:1:19692072)

    at e.selectRangeByIdx (ej2.min.js:1:19690757)

    at ej2.min.js:1:19675445

    at Array.forEach (<anonymous>)

    at e.selectMultiRange (ej2.min.js:1:19675421)

    at e.selectRange (ej2.min.js:1:19674937)

    at e.notify (ej2.min.js:1:743604)

    at t.notify (ej2.min.js:1:849262)

    at e.merge (ej2.min.js:1:19532926)

Without the frozenCell everything works fine.

This was on latest version (25.5.6).

[Janakiraman Sakthivel]

Hi ShareValue,

We have investigated the reported issue in our latest version (25.2.6) and attempted to replicate it based on the details you provided. However, we were unable to reproduce the problem on our end. As you described, we froze the first row in the spreadsheet and merged the cells using the merge() method, as well as applied wrapping to those merged cells using the wrap() method, following your provided code snippet. However, we were not getting any errors, as you reported in these actions.

While validating the error callback you shared, it seems that the reported error occurs within the updateActiveCell() function when merging cells. Consequently, we attempted to replicate the issue by merging cells through a UI action. However, we were unable to reproduce the problem on our end.

Below, we have attached the sample for your reference.

Sample: Please see the attachment.

Therefore, before we proceed further, could you please confirm whether you encountered the reported problem during the initial rendering of the component ? Also, can you please share where you have called merge & wrap methods on your application? Also, check whether you’re calling those methods before component rendering the sheets to the page or while refreshing the sheet?

Kindly provide the exact scenario in which you encountered the reported issue. Additionally, please share a video demonstration of the issue for our better understanding. This information will help us identify the exact case and provide a quicker and more accurate solution.

Attachment: WebApplication1_9215ec69.zip

[ShareValue]

Hi,

Thank you for your answer. I've just been able to replicate a very similar problem in the sample you provided, although with an error in a different method. Seems it only happens if you have more than one sheet. If you do a goto the second sheet to do the merge and wrap, you get the error.

In attach you'll find the changed index.cshtml file with the two sheet and that generates an error. It is not the same error, but the end result seems to be the same, and only the first merge is done.

Of course, in our case, it is more complex because we have several sheets, and we are doing calls to do number formats, lock cells and protect sheets, but the underlying logic is the same,

Things like these:

this.goTo('Rendimentos Totais (SNC-AP)!A1');

this.numberFormat(ej.spreadsheet.getFormatFromType("Text"), "A3:B15");

this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "C3:J15");

this.merge("K3:K15", "All");this.wrap("K3:K15");

this.merge("L3:L15", "All");this.wrap("L3:L15");

this.merge("M3:M15", "All");this.wrap("M3:M15");

this.lockCells("N1:AI15", true);this.lockCells("A16:AI500", true);

this.protectSheet('Rendimentos Totais (SNC-AP)', { selectCells: true, selectUnLockedCells: true});

this.goTo('Custos - Gastos Totais!A2');

this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "B24:B24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "C24:C24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "D24:D24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "E24:E24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "F24:F24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "G24:G24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "H24:H24");this.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "I24:I24");

this.merge("J3:J24", "All");this.wrap("J3:J24");

this.merge("K3:K24", "All");this.wrap("K3:K24");

this.merge("L3:L24", "All");this.wrap("L3:L24");

this.lockCells("M1:AI26", true);this.lockCells("A27:AI500", true);

this.protectSheet('Custos - Gastos Totais', { selectCells: true, selectUnLockedCells: true});

etc.

Attachment: Index_e78122ad.zip

[Janakiraman Sakthivel]

Hi ShareValue,

Thank you for your update.

We have validated your query and were able to replicate the problem with the goTo() method based on your provided details.

We would like to inform you that the active sheet is rendered during initial loading, while other sheets are rendered only when they are switched to. In your case, you used the goTo() method in the created event to navigate to a cell in a non-active sheet. When switching to the non-active sheet using the goTo() method, the sheet elements are rendered at that time. You attempted to apply merge and wrap on the cells before the sheet was fully rendered, causing the reported issue.

To avoid this, we suggest you wait until the sheet is fully rendered before attempting to merge and wrap the cells. Therefore, we suggest using the merge() and wrap() methods within setTimeout() in the created event to resolve this problem.

For your convenience, we have shared a sample below.

Sample: Please see the attachment.

Could you please use your code, such as call number formats, lock cells, and protect sheets, inside the setTimeout() method after using the goTo() method and confirm if you are still facing the same issue? If so, please share the complete client-side code snippets so we can validate and determine the exact cause of the problem. Based on this, we will check and provide the best solution quickly.

Attachment: WebApplication1_fef9b4be.zip

[ShareValue]

Hi,

I get the idea, and was able to advance a little, by chaining several set timeouts and promises, because we have a dynamic number of sheets.

But the problem now is in the language loading.

In attachment is the changed your project, which now runs into an error. In it the method createdHandler we've chained several promises and set timeout, after the loading of the language (in our case pt-PT). But it runs into an error:

Cannot read properties of undefined (reading 'percentSign')

There is a simpler version of the method, named createdHandlerGood, which, if run instead of the createdHandler, loads the language and you can see that the cells in column F of sheet 1 get the right currency format (euro). So, the problem seems related to this new structure of the data.

What can be done to overcome this problem?

Thanks in advance for your help.

Attachment: WebApplication1_5fdbc8c3.zip

[Janakiraman Sakthivel]

Hi ShareValue,

We were able to replicate the problem you reported in the sample you shared. During validation, we noted that you used JSON.parse() within the loadCldr function to parse the culture JSON files. This is causing the issue you reported. We suggest avoiding the use of JSON.parse() within the loadCldr() function as shown below to load the culture files properly, which should resolve the problem.

For your reference, we have modified and shared your shared sample and confirmed that it is now running without any problems. 

Sample: Please see the attachment.

CODE SNIPPET:

function loadCultureFiles(name) {

          ej.base.setCulture(name); //set culture file globally

          ej.base.setCurrencyCode('EUR'); //set currency code globally

          var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json', 'currencies.json'];

          var loadCulture = function (prop) {

                   var ajax;

                   ajax = new ej.base.Ajax('@(@Url.Content("~"))' + 'scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', true);

                  ajax.onSuccess = function (value) {

                               ej.base.loadCldr(value);

                     };

                    ajax.send();

    };

    for (var prop = 0; prop < files.length; prop++) {

        loadCulture(prop);

    }

}

Kindly, check the above information in your end and get back to us for further validation.

Attachment: WebApplication1_42bbd76e.zip

[ShareValue]

Hi,

This code was taken for an old post or sample, and weirdly it had always worked.

That fixed the JavaScript errors, but one problem still remains.

The styles and merges are only done one sheet 2. On sheet 1 and 3, the merges and cell formatting (for currency for instance) are not done.

This code doesn't seem to have any effect on these sheets:

spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "F2:F15");

spsheet.merge("K3:K15", "All"); spsheet.wrap("K3:K15");

spsheet.merge("L3:L15", "All"); spsheet.wrap("L3:L15");

spsheet.merge("M3:M15", "All"); spsheet.wrap("M3:M15");

[Janakiraman Sakthivel]

Hi ShareValue,

We have validated your reported query and were able to reproduce the problems in your shared sample. During validation, we noted that you missed applying the merge and wrap to Sheet 1 (Car Sales Report) before switching to Sheet 2 (Car Sales Report 2). Because of this, merge and wrap were not applied to Sheet 1 (Car Sales Report).

Additionally, we observed that you applied merge and wrap to Sheet 3 (Car Sales Report 3) within the "then" method. However, in your sample, the "then" block was not executed because the promise was never resolved. A promise needs to explicitly call resolve for the "then" block to execute.

To resolve your issue, we have called resolve within the promise as shown in the code snippet below. This will ensure that the "then" method is called, applying the merge, wrap, and cell formatting to Sheet 3 as expected.

CODE SNIPPET:

function createdHandler() {

    loadCultureFiles('pt-PT');

    var spsheet = this;

   new Promise(function (resolve, reject) {

                spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Text"), "A3:B15");

                spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "F2:F15");

                spsheet.merge("K3:K15", "All"); spsheet.wrap("K3:K15");

                spsheet.merge("L3:L15", "All"); spsheet.wrap("L3:L15");

                spsheet.merge("M3:M15", "All"); spsheet.wrap("M3:M15");

    spsheet.goTo('Car Sales Report 2!B2');

    setTimeout(() => {

        spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Text"), "A3:B15");

        spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "F2:F15");

        spsheet.merge("K3:K15", "All"); spsheet.wrap("K3:K15");

        spsheet.merge("L3:L15", "All"); spsheet.wrap("L3:L15");

        spsheet.merge("M3:M15", "All"); spsheet.wrap("M3:M15");

        resolve('Success');

    }, 10);

}).then(function (result) {

    spsheet.goTo('Car Sales Report 3!B2');

    setTimeout(() => {

                spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Text"), "A3:B15");

                spsheet.numberFormat(ej.spreadsheet.getFormatFromType("Currency"), "F2:F15");

              spsheet.merge("K3:K15", "All"); spsheet.wrap("K3:K15");

             spsheet.merge("L3:L15", "All"); spsheet.wrap("L3:L15");

             spsheet.merge("M3:M15", "All"); spsheet.wrap("M3:M15");

     }, 10);

  });

}

For your reference, we have shared the modified sample below and confirmed that merge, wrap, and cell formatting are applied properly in all three sheets.

Sample: Please see the attachment.

Kindly, check the above information in your end and get back to us for further validation.

Attachment: WebApplication1_96dfa45c.zip