Accessing additional sheets in GridJS

When there are a large number of sheets there is no way to scroll across the bottom or up higher in the ellipses. In the image below you can see I have no way of accessing sheets 11-42. Is there a way to add scrolling to the ellipses menu or the bottom bar, so that all of the sheets can be accessible?

@billkamm can you please attach the base Workbook.
Additionally, you mentioned that your conflict is with GridJS which is not a product from Aspose, can you please provide more details regarding your issue.

Lots of sheets.zip (25.4 KB)

The screen is from an Aspose.Cells.GridJs application.

@billkamm I see, sorry for the confusion.
If you run the example in our Git repository, you will notice that all the Spreadsheets are accessibly in the tab area, at the bottom of the page:

Additionally, I will open a Ticket for our dev team to make scrollable the spreadsheet list that appear when you click in the ... button.

@billkamm
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSNET-53281

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@billkamm
Please try update the latest js from npmjs.

this is already done.

@peter.zhou this is a regression:

This update appears to have changed quite a few things (which have introduced breaking changes for our code). Notably:
• Gridjs must now be in edit mode to select or get context menu on objects (read mode worked for this before)
• setImageInfo signature changed
• xs.sheet.data.shapes no longer contains images, they are now exclusively in xs.sheet.data.images (this has a pretty big impact on our code)
• image construction seems to be delayed and takes longer
• textbox construction is delayed more, lengthening time before textboxes are fully constructed.
These were NOT issues in 23.4.0, so it seems that this quick release of 23.4.7 with the scroll bar for sheet navigation might have brought in old/different code? Can you please look into this?

@billkamm,

Thanks for sharing the issues and concerns.

We will evaluate and get back to you soon.

@billkamm
Please try update to v23.5 for both server side GridJs dll through nuget package and client side js through npmjs .some issues are fixed.

When I upgrade to that version the first page of every spreadsheet is an empty grid even when there is data

@billkamm
can you provide a simple project to show this issue.
as we’ve tested both in local side and on our qa site Excel Editor Online for Free.
it works as normal.

We are trying to draw highlights on images and textboxes on the initial load of a sheet (highlights the user has previously entered that we saved to the database and are reloading for them), but we are getting lots of errors because we are trying to highlight images and/or textboxes and other shapes before xspreadsheet has fully loaded them. We tried checking xs.sheet.data.isImageOk, but it seems that is set to true as soon as a single image is loaded and not all of them. Is there a way we can know when all of the images, textboxes, and shapes have finished loading for a sheet, so that we can begin to draw them?

@billkamm,

Thanks for sharing your scenario.

We will evaluate your requirements and get back to you soon.

@billkamm It is ok to use xs.sheet.data.isImageOk to check the ready status of shapes/images load.
can you provide your sample code.
We try in our latest development code ,it works as expected.
We will soon release the v23.6 version.
It includes image/shapes loading improvment .

File used in our example:
Xlerator.HK.00001_F.xlsx.zip (49.0 KB)

Your demo project with our code added to show what we are doing the errors we are receiving:
Upload Files Easily | Free File Upload and Sharing Up To 10GB (download link expires on July 13th)

Notes:

  • You’ll need to change the paths in TestConfig.js back to your machine
  • replaced customHightlightImage and hightlightAll with our own functions
  • added tryDrawRedactions on xs.bottombar.swapfunc to draw highlights on each sheet change
  • in tryDrawRedactions we wait for isImageOk before running togglehighlights to draw our highlights
  • redactionCommands object is a data dump from our database, so we could add the data to your demo project
  • drawRedactions actually adds the highlights to each sheet

line 1165 xs.sheet.addHighlightTextBox(sheetShape.id, textRedaction.Start, textRedaction.Start + textRedaction.Length) throws errors such as TypeError: Cannot read properties of undefined (reading ‘color’)
in our code this line has also thrown TypeError: t.setHighlight is not a function

line 1350 xs.sheet.removeHighlightShape(s); throws error when switching to another sheet and switching back
TypeError: Cannot read properties of undefined (reading ‘requestRenderAll’)

line 1230 xs.sheet.table.render(); throws an error on the “Summary”, “Ind Assets”, and other sheets
TypeError: Cannot read properties of undefined (reading ‘color’)

We’ve noticed that setting an arbitrary delay and waiting to call any of these lines of code will get everything to work properly that is why we feel it has something to do with the shapes not being fully loaded yet and were hoping something like waiting for isImageOk before trying to draw any highlights would correct this behavior.

@billkamm
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-844

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@billkamm
thanks for providing the project.
we will investigate and fix your issue soon.

@billkamm
1.the root cause for undefined color is:
in your code before add highlight in tryDrawRedactions,the highlightStyle in undefined
//here the highlightStyle is undefined
console.log(’#####highlightStyle is:’+highlightStyle);
2.the root cause for undefined requestRenderAll is:
the shape you recorded is detached to current canvas.
actually when do a re-switch worksheet operation. the shape recorded is nolonger the old .new shape is created based on json save/reload.
so please do not clear and add highlight every time a worksheet is clicked.
only need to add once ,no need to do clear highlight.
3.one more thing .for switch worksheet tab ,now we can use the ‘sheet-selected’ event which is more elegant.
4.so finally below is the workable code:

//define an array to record the worksheet name that already added the highlight settings
const alreadyaddhighlightsheets=[];
//switch worksheet happened
xs.on('sheet-selected', (id,name) => {
               // console.log('sheet selected id:', id, ', name: ',name);
             tryDrawRedactions(true);
            });
.....

 function tryDrawRedactions(retryIfNotReady) {
            if (!xs.sheet.data.isImageOk) {
                if (retryIfNotReady) {
                    setTimeout(tryDrawRedactions, 50, [this, false]);
                }
                return;
            }

           // no need to do remove highlight
           // removeAllHighlights();

	     //here is the bug that  highlightStyle is undefined
              console.log('#####here cause the undefined color bug ,because highlightStyle is:'+highlightStyle);
              //xs.sheet.showHighlights(highlightStyle);
 
             //add highlight once only for a worksheet
             if(alreadyaddhighlightsheets.indexOf(xs.sheet.data.name)>=0)
		     {
             return;
		     }else{
		     alreadyaddhighlightsheets.push(xs.sheet.data.name);
		     }

              console.log('@@@@@@@@@@@@@@@@@@@@@do draw....'+xs.sheet.data.name+' data.isImageOk:'+xs.sheet.data.isImageOk+ ',data.highlightstyle:'+xs.sheet.data.highlightstyle);
	    //highlightStyle_shall_defined need to defined
		       const highlightStyle_shall_defined = { 'color': 'rgba(251, 12, 251, 0.2)' };
               xs.sheet.showHighlights(highlightStyle_shall_defined);
               drawRedactions();
.....

We have to set the hightlights more than one time per sheet because our users can toggle highlight transparency on and off as well as toggling highlights on and off. Also, we were running into issues with showing and hiding images and showing and hiding highlights not always removing images or highlights as rotate between sheets, so that is why are forcibly removing all of the highlights and redraw them. I will see if I can add those features into the demo project to demonstrate these behaviors.

@billkamm,

We will evaluate your issue in details. Moreover, we appreciate if you could provide us a demo project to demonstrate all your issues and other problems.