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

[Alberto Torres]

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?

[Santhosh Iruthayaraj]

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.

[index.js]

 

    let gridInstance;

 

    function rowSelecting(args) {

       previousIndex = args.previousRowIndex;

       index = args.rowIndex;

    };

 

    function recordClick() {

        if (index !== previousIndex) {        

            swal({

                title: "Are you sure?",

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

                icon: "warning",

                buttons: true,

                dangerMode: true,

                }).then((r) => {

            if (r) {

                gridInstance.clearSelection();

                gridInstance.selectRow(index);

            } else {

                gridInstance.selectRow(previousIndex);

            }

            });

        }

    }

   .  .  .  .  .

   <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.

Regards,

Santhosh Iruthayaraj