We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to display an alert that allows the user to confirm if they really want to select another row in the React Grid

Hi, I'm trying to show an alert to the user when he selects a different row than the one he already has selected, but I need to not continue with the selection of this new row, until the user confirms if he really wants to select it (because selecting it will trigger other functions )

const rowSelecting = async (args) => {
    if (args.previousRowIndex !== args.rowIndex) {
      let resp = await Swal.fire({
        title: "¿Está seguro que desea seleccionar otra Operación?",
        text: "Puede tener información sin guardar, si continúa se perderán estos registros.",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Continue",

      if (resp.isDismissed) {
        args.cancel = true;

/* const resp = window.confirm(
        "¿Estás seguro de que desea cambiar de transacción, talvez tiene información sin guardar, si continúa se perderán estos registros.?"

      //select cancel button
      if (!resp) {
        args.cancel = true;
      }  */

//... then execute rowSelected event

I am using Swal's alerts, but it seems that the rowSelecting event does not wait for the execution of the alert (which I have tried to make it a synchronous function with the await) but with the window.confirm() it works perfectly. Any suggestions, why do I really need to use the swal alert?

1 Reply

SI Santhosh Iruthayaraj Syncfusion Team March 6, 2023 03:47 PM UTC

Hi Alberto,

Greetings from Syncfusion support.

Query: Display an alert that allows the user to confirm if they really want to select another row in the React Grid.

We have reviewed your query and are glad to inform you that we have successfully implemented your request to select another row based on confirmation from the user using swal alert. Please find attached the code snippet that will help you achieve this requirement.



    let gridInstance;


    function rowSelecting(args) {

       previousIndex = args.previousRowIndex;

       index = args.rowIndex;



    function recordClick() {

        if (index !== previousIndex) {        


                title: "Are you sure?",

                text: "Do you want to select another row?",

                icon: "warning",

                buttons: true,

                dangerMode: true,

                }).then((r) => {

            if (r) {



            } else {






   .  .  .  .  .

   <GridComponent id="Grid" dataSource={data} ref={(g) => { gridInstance = g }} allowPaging={true} pageSettings={{ pageCount: 5 }} rowSelecting={rowSelecting.bind(this)} recordClick={recordClick.bind(this)}>

We have also attached a sample file for your reference.

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

If you have any further queries or concerns, please do not hesitate to let us know.


Santhosh Iruthayaraj

Live Chat Icon For mobile
Up arrow icon