Modify print modal css in aspose cells client side

Aspose.Cells Product Family
1

How can I access the print x-spreadsheet-modal there is no specific unique identifier , I would like to modify the print modal css , but there is no unique identifier to it .

I cannot directly use the class x-spreadsheet-modal because other modals also have the same class.

Aspose print modal .png768×462 17 KB
Aspose print modal .png (17.0 KB)

Here if you see I want to apply custom modification on particular modal but others also have same class

image.png444×620 45 KB
image.png (45.0 KB)

2

@chetanepiq

To modify the CSS of a specific print modal in Aspose.Cells when there is no unique identifier, you can use JavaScript to target the modal based on its position in the DOM or its parent elements. Here’s a general approach you can take:

  1. Use JavaScript to Select the Modal: You can select the modal by traversing the DOM. For example, if the modal is the last one opened, you can select it using document.querySelectorAll and then apply your styles.

  2. Apply Custom CSS: Once you have selected the specific modal, you can modify its styles directly.

Here’s a sample code snippet:

// Assuming the print modal is the last one opened
const modals = document.querySelectorAll('.x-spreadsheet-modal');
const printModal = modals[modals.length - 1]; // Get the last modal

if (printModal) {
    printModal.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; // Example modification
    printModal.style.border = '2px solid #000'; // Another example modification
}

This code selects the last modal with the class x-spreadsheet-modal and applies custom styles to it. Adjust the selection logic based on your specific requirements.

For further assistance, refer to the official Aspose.Cells documentation or community forums for additional examples and best practices.

3

I don’t think this is a correct approach , how can we assume based on modal length , if any upgrade in aspose client side and new modals are added by ASPOSE , then this logic will break itself.

It is not the last one , there are 4,5 other below it

4

@chetanepiq
You are right.
We are sorry ,it is hard to get the specific modal window.
Now We understand your requirement,we will improve it.
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  : CELLSGRIDJS-1961 Support unique css identifier for modal window

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.

5

Thanks Peter .
I will wait for that but for the workaround as of now , I want to understand how you are catching that particular modal because on click on print icon the event listener is somehow making the correct modal to display: block css property, can you help with some logic so I can also do that using JS for now ?

6

@chetanepiq
Suppose xs is the js instance for GridJs,you can get the html div element by using:

xs.sheet.modalPrint.el.el

=>

<div class=​"x-spreadsheet-modal" style=​"width:​ 600px;​ position:​ absolute;​ display:​ block;​ left:​ 720px;​ top:​ 228.942px;​">​…​</div>​

in future version for this improvment.
we will make it like this:

<div class="x-spreadsheet-modal print" style=​"width:​ 600px;​ position:​ absolute;​ display:​ block;​ left:​ 720px;​ top:​ 228.942px;​">​…​</div>​
7

Thanks Peter.
I was able to manipulate and override the css by the using the element

xs.sheet.modalPrint.el.el.classList.add(customClass);

But the future version of this will be much better.

DIFFERENT ISSUE
The modal header also has the title directly written without any span , to change that we need to do a lot of DOM manipulation ,
image.png (3.9 KB)
See changing the word ‘SETTINGS’ is really hard without removing X icon .

x-spreadsheet-modal-header.textContent to something specific will override X icon .

It can be done but its an overhead , need to make the parent hidden in visibility , add my own span with some title and mark visibility visible for both icon and new span
BECAUSE OF THIS WORKAROUND WE Wont be able to add any background color to header

8

@chetanepiq,

Thank you for bringing this to our attention along with screenshot. Your concerns have been logged under the ticket number “CELLSGRIDJS-1961” in our system. We will review the issue, and we will provide you with updates soon.