Aspose Excel - Unable to hide right corner triangle on each cells

Hi Team,

I was trying to hide the right corner triangle for each cell when editing is disabled. Is there a way to do this in GridJS? If so, please provide the code changes to disable editing. I am loading an entire Excel file using Gridjs after converting it to a JSON file.

Please find the screenshot attached for your reference.

AsposeExcelEditor.PNG (41.3 KB)

Thanks
M.S.Sathish

@parthiveera,

This is by design. Anyways, we will check if we could provide some options to hide right corner triangle on each cells when disable editing or read-only mode. 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-1315

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.

@parthiveera
Can you please update the client js to the latest version v24.10.1.

<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.10.1/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@24.10.1/xspreadsheet.js"></script>

Also, the server side dll shall be updated to v24.10.
We cannot reproduce this issue using the latest version.

Hi Peter,

Thank you for the update.

We have tried the version you provided, but it doesn’t seem to be working. I have attached the xspreadsheet.css and xspreadsheet.js files that I am using in my application. Could you please check them and get back to me?

Additionally, we found another issue: whenever we paste or delete cell data, the editor jumps to the top of the Excel sheet. This makes it very difficult to use the editor. Could you please look into this and provide a fix?

Please find the attachments below.

xspreadsheet.zip (809.9 KB)

Thanks
M.S.Sathish

@parthiveera,

We appreciate you sharing the .css and .js files. We have logged the files against your existing ticket (“CELLSGRIDJS-1315”) into our database. We are sorry that you were unable to get them working. We will evaluate the issue using the files you provided and get back to you with updates soon.

We will evaluate it and may suggest you code modifications.

@parthiveera
The client js file is ok.
we have the online viewer app or editor app which you can verify the issue.

we also can not reproduce this issue in our side.
can you record a video to show this issue.

seems it is not a general case.
In all, Can you provide your spreadsheet file or the demo project that include the spreadsheet file.
We need to check it in detail.

Hi Peter,

Thanks for the quick update.

As requested, I’ve recorded a screen capture and attached it below. The issue is clearly reproducible on your online editor/viewer as well. Please also check my previous attachment for the xspreedsheet.js and CSS files. Could you update or fix the code and share the revised version with me? That would help further narrow down my requirements.

Recording-20241025_142942.zip (2.3 MB)

Thanks
M.S.Sathish

@parthiveera,

Thanks for the demo video.

We acknowledge the issue. We have also tested the To-do list app (editor) and observed the (default) behavior you described in the video. We will investigate this matter and provide you with an update soon.

@parthiveera
Following your demo video, we can reproduce the issue regarding the copy-paste jump.
We have opened the following new ticket(s) in our internal issue tracking system

Issue ID(s): CELLSGRIDJS-1332

We will fix it soon.
For the issue (as per the screenshot)

AsposeExcelEditor.PNG, can you provide your sample spreadsheet file?

Hi,

I have not received a solution for the issue with ID CELLSGRIDJS-1332, CELLSGRIDJS-1315 yet I see that the status has been marked as “resolved.” This issue is still ongoing on my end, and I have shared recording videos, screenshots, and the necessary files. However, I have not received any fix to date. Could you please verify the status and provide a resolution as soon as possible?

I would also like to mention that I have purchased an Aspose.Total license with paid support. Please review this matter and let me know.

Thank you,
M.S. Sathish

@parthiveera
We are sorry .

Issue ID(s): CELLSGRIDJS-1332 the copy-paste jump issue was fixed.
Please update to v24.10.3 client js.

<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.10.3/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@24.10.3/xspreadsheet.js"></script>

Issue ID(s): CELLSGRIDJS-1315 Unable to hide right corner triangle on each cells
can you provide your sample spreadsheet file?

If you find any other issues, please be assured that we will always respond and resolve them promptly, and keep you informed.
Thank you.

Hi,

Thanks for the quick reply.

Could you apply the necessary changes to the xspreadsheet.js, css files I previously sent and return it to me so I can use it in our application without further modifications?

For Issue ID: CELLSGRIDJS-1315, I’ve noticed that when I mark cells as non-editable, a right-corner triangle appears. This happens across all Excel files, not just my sample files. Please test this with any Excel file, making all cells non-editable, and you should be able to reproduce the issue.

Please find my latest xspreadsheet.js below, which I’m currently using. Kindly make the changes for Issue ID: CELLSGRIDJS-1332 and send it back.

xspreadsheet, Code(Right corner Triangle).zip (1.1 MB)

Thanks,
M.S. Sathish

@parthiveera
Please just directly use the v24.10.3 client js and css or you can just download the file in your side.

<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.10.3/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@24.10.3/xspreadsheet.js"></script>

We see here you set editable attribute for a cell in js call, now we can reproduce this issue. We need to do further investigation.

@parthiveera
Please try v24.10.4 client js or you can just download the file in your side.

<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.10.4/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@24.10.4/xspreadsheet.js"></script>

Now we have changed the behavior, we have added the showNonEditableSymbolInCell option in the load configuration of the JavaScript code. Its default value is false, so it will not show the symbol when we set the none editable attribute in the cells.
Please note that this editable setting is just for client-side extension usage;
it will not synchronize with the server-side.
For example, when a user selects some cell area and clicks the right-click context menu option ‘Disable editing’, it will only limit editing in the current UI.

GridJs editable.png (28.0 KB)

When the user downloads the file, the setting will not be applied.
The standard behavior to set read-only cells is to follow Excel operations: first, we need to protect the worksheet, and then in the style dialog, ensure that the ‘Locked’ option is checked for the selected cell area.

Excel protect.png (37.8 KB)

Currently, we have not supported such operations in GridJs UI (protecting the worksheet and checking the ‘Locked’ style) yet now.

Hi Peter,

We tried using the latest version of xspreadsheet.js and the CSS you provided. The right corner triangle issue has been resolved, but we’re still experiencing the “jumping” issue. Whenever we paste or delete in the rows, it takes us to the top of the Excel editor (i.e., row 1). It seems that this issue is not yet resolved.

Please check the previously shared recordings. The issue occurs when we scroll down in the Excel editor and perform a copy or delete operation—it jumps back to the top row. Please check and provide me the fix asap

Thanks,
M.S. Sathish

@parthiveera
Regarding the “jumping” issue you mentioned when pasting and deleting, we have successfully resolved this issue for sheet with no freezepane. We understand the problem is more complex when sheets are in a frozen state, and we are actively working on a solution. Rest assured, we are prioritizing this and will have a fix available as soon as possible. Thank you for your patience and understanding.

The issues you have found earlier (filed as CELLSGRIDJS-1315,CELLSGRIDJS-1332) have been fixed in this update. This message was posted using Bugs notification tool by johnson.shi

@parthiveera
The ‘jumping’ issue when pasting and deleting has now been fixed for both sheets with freeze pane and those with no freeze pane.
Please try update to v24.11.1 client js or you can just download the file in your side.

<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@24.11.1/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@24.11.1/xspreadsheet.js"></script>

Hi Peter,

Thank you for the latest patch; we have tested it, and it is working fine as expected.

I have one more request: I need an option to load the row count and column count dynamically. Currently, it loads with 100 rows and 26 columns by default in xspreadsheet.js, but I would like to adjust these as needed in the Excel editor. Could you please look into this and provide the code to do so?

Thanks,
M.S. Sathish

@parthiveera
in loadoption ,you can set the default empty row count and column count.

    const option = {
                updateMode: 'server',
                updateUrl: '/GridJs2/UpdateCell',
                showToolbar: true,
                //showPartToolbar: false,
                showFileName:false,
                //showGrid: true,
                //mode: 'edit',
                mode: 'edit',
                showNonEditableSymbolInCell: true,
                row: {  len: 20, //here we set the empty row count to 20
                       height: 25,
                },
                col: {
                    len: 12, //here we set the empty column count to 12
                    width: 100,
                    indexWidth: 60,
                    minWidth: 60,
                },
                //support multiple language ,the locale is: en zh es pt de ru nl
                local: 'en',
            };
            loadWithOption(jsondata, option);

or we assume xs is the gridjs instance,
run the js code:

xs.options.col.len=6;
xs.options.row.len=10;

then click the add worksheet button,
the newly added empty worksheet will have 6 columns and 10 rows.
We will update the document to describe such options later.