Can we customize find and replace modal in spreadsheet component

[Siddharth Punmiya]

Hi ,

I had a question regarding spreadsheet component provided by syncfusion react

When we use ctrl + H on spreadsheet it opens up a find and replace modal .

Can we customize the modal like for my case I want to allow user for not to enter anything in replace field and still have the ability to replace and replace all 

In current scenario the replace and replace all button are disabled 

I don't find any documentation related to customisation of that modal 

[Janakiraman Sakthivel]

Hi Siddharth Punmiya,

We have validated your reported requirement, and you can achieve this by using our dialogBeforeOpen event in the spreadsheet. The dialogBeforeOpen event triggers before any dialog box opens in our spreadsheet.

For your convenience, we have prepared a sample based on your requirement. In this sample, when the 'Find and Replace' dialog opens, the dialogBeforeOpen event will trigger in our spreadsheet. Within the event's function, we remove the disabled attribute from the 'Replace' and 'Replace All' buttons to enable them in the dialog as expected, and also from the 'Find Previous' and 'Find Next' buttons

For your convenience, we have attached the prepared sample along with a video demonstration below.

Sample: https://stackblitz.com/edit/react-n5qw34-zcdt8q?file=index.js

Video: Please see the attachment.

CODE SNIPPET:

 

// The dialogBeforeOpen event triggers before the dialog box opens in our spreadsheet

const dialogBeforeOpen = (args) => {

        // To confirm that the opening dialog is the 'Find and Replace' dialog

        if (args.dialogName === 'FindAndReplaceDialog') {

            let dialogElement = args.element;

            // Removed the disabled attribute from the buttons in the dialog to enable them

            dialogElement.querySelector('.e-footer-content .e-btn-findPrevious')?.removeAttribute('disabled');

            dialogElement.querySelector('.e-footer-content .e-btn-findNext')?.removeAttribute('disabled');

            dialogElement.querySelector('.e-footer-content .e-btn-replace')?.removeAttribute('disabled');

            dialogElement.querySelector('.e-footer-content .e-btn-replaceAll')?.removeAttribute('disabled');

        }

    }

 

Kindly check the sample and details shared above on your end and get back to us if you need further clarification regarding this. We hope this helps.

Attachment: Video_194551_d2d5f9f7.zip