How to customize the find and replace modal in React Spreadsheet?

This knowledge base article explains how to customize the Find and Replace modal in React Spreadsheet. In the Spreadsheet component, the dialogBeforeOpen event is triggered before any dialog opens, allowing you to customize the Find and Replace modal within this event.

In the example below, the Find Previous, Find Next, Replace, and Replace All buttons are enabled in the dialogBeforeOpen event by removing the disabled attributes from the buttons.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';

function Default() {
   let spreadsheet;
   const boldRight = { fontWeight: 'bold', textAlign: 'right' };
   const bold = { fontWeight: 'bold' };
   const onCreated = () => {
       // Apply styles to the specified range in the active sheet.
       spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
       // Apply format to the specified range in the active sheet.
       spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
       // The default format code for the date format is 'm/d/yyyy'.
       spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
   };
   // 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');
       }
   }
   return (<div className='control-pane'>
       <div className='control-section spreadsheet-control'>
           <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} created={onCreated} dialogBeforeOpen={dialogBeforeOpen}>
               <SheetsDirective>
                   <SheetDirective name="Car Sales Report">
                       <RangesDirective>
                           <RangeDirective dataSource={defaultData}></RangeDirective>
                       </RangesDirective>
                       <ColumnsDirective>
                           <ColumnDirective width={180}></ColumnDirective>
                           <ColumnDirective width={130}></ColumnDirective>
                           <ColumnDirective width={130}></ColumnDirective>
                           <ColumnDirective width={180}></ColumnDirective>
                           <ColumnDirective width={130}></ColumnDirective>
                           <ColumnDirective width={120}></ColumnDirective>
                       </ColumnsDirective>
                   </SheetDirective>
               </SheetsDirective>
           </SpreadsheetComponent>
       </div>
   </div>);
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

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

Output: