How to Show Dialog on Left Mouse Click in React Spreadsheet?

This knowledge base article explains how to show a dialog on left mouse click in the first row of a React Spreadsheet. To achieve this, add a clickevent listener to the spreadsheet’s e-sheet panel element, which triggers only for left mouse click. In the event listener function, check if the target element contains the e-cell class and verify the aria-rowindex attribute to confirm if it is the first row. Then, you can show the dialog based on your requirements.

[index.tsx]

import * as React from "react";
import { createRoot } from 'react-dom/client';
import './style.css';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';
import { Dialog } from "@syncfusion/ej2-spreadsheet/src/spreadsheet/services";

const App = () => {
 const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 const onCreated = () => {
   let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
   // The below click event is triggered only on the mouse left click.
  spreadsheet.element.querySelector('.e-sheet-panel').addEventListener("click", function (event: MouseEvent) {
      // Check the target has 'e-cell' class and row index is 1 for first row.
      let target: HTMLElement = event.target as HTMLElement;
      if (target && target.classList.contains('e-cell') && target.parentElement.getAttribute('aria-rowindex') === "1") {
          // Display your dialog here
          showDialog();
      }
  });
}
const showDialog = () => {
 let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
  let dialogContent = "First row is left clicked";
  const dialogInstance: Dialog = spreadsheet.serviceLocator.getService('dialog');
  // To show the dialog with the specified content.
  dialogInstance.show({
    header: "Dialog",
    target: spreadsheet.element,
    height: 150,
    width: 300,
    isModal: true,
    allowDragging: true,
    showCloseIcon: true,
    content: dialogContent,
    buttons: [
      {
        buttonModel: { content: 'Ok', isPrimary: true },
        // triggers after clicking the Ok button in dialog.
        click: (args) => {
          // To hide the dialog instance.
          dialogInstance.hide();
        },
      },
    ],
  });
}
 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={spreadsheetRef} created={onCreated}>
         <SheetsDirective>
             <SheetDirective name="Car Sales Report">
                 <RangesDirective>
                     <RangeDirective dataSource={defaultData}></RangeDirective>
                 </RangesDirective>
             </SheetDirective>
         </SheetsDirective>
     </SpreadsheetComponent>
 </div>
</div>);
};

export default App;

const root = createRoot(document.getElementById('element')!);
root.render(<App />); 

Sample Link: https://stackblitz.com/edit/react-ts-ttza8a?file=index.tsx

Output:

Conclusion
I hope you enjoyed learning on how to show dialog on left mouse click in React Spreadsheet.
You can refer to our React Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Spreadsheet Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!