How do I change the print modal header in aspose cells viewer client side

Aspose.Cells Product Family
1

image.png1539×590 58.1 KB
image.png (58.1 KB)

Here I want to change the modal header but it is not correctly set inside some tag like span how do I change it ?
I want to change the word Settings to my custom name but modal header has Settings word written directly ? I am not able to use textContent on parent also because that is removing X icon I want the header background color and X icon and SETTINGS > to my custom name

2

@CGmieet

To change the modal header in the Aspose.Cells viewer on the client side, you can use JavaScript to modify the header element directly. The header text “Settings” is typically set in a specific tag, which you can target to change its content while preserving the modal’s structure, including the close (X) icon.

Here’s a simple example of how to achieve this:

// Assuming the modal header has a class or ID you can target
const modalHeader = document.querySelector('.modal-header-class'); // Replace with the actual class or ID

if (modalHeader) {
    // Change the header text
    modalHeader.querySelector('.header-title-class').textContent = 'Your Custom Name'; // Replace with the actual class for the title
}

Make sure to replace '.modal-header-class' and '.header-title-class' with the actual selectors used in your modal’s HTML structure. This approach allows you to change the header text without affecting the close icon.

For further customization, review the modal’s HTML structure to ensure you are targeting the correct elements.

3

No ,Modal header I can target this way but its a parent div and the icon inside it will get overwritten with textContent , is there any better approach ?

4

@CGmieet,

We will evaluate and devise to change the print modal header in Aspose.Cells.GridJs viewer on client side. 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-1965
5

@CGmieet
here is a workaround

// Find the modal header element
const headerElement = document.querySelector('.x-spreadsheet-modal.print-model .x-spreadsheet-modal-header');

if (headerElement) {
    // Get all child nodes of the header element
    const childNodes = headerElement.childNodes;
    
    // Find the text node (usually the first text node after the icon div is the target)
    for (let i = 0; i < childNodes.length; i++) {
        const node = childNodes[i];
        // Check if it's a text node and not just empty whitespace
        if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
            // Replace the Settings text while preserving quotes
            node.textContent = ('"Your Custom Text"');
            break;
        }
    }
}