Can't revert to original values

[Fran Carranque]

Hello,

I've a vue 3 grid configured for showing the edit controls in the toolbar and using vuex data as datasource:

    <ejs-grid ref="grid" v-if="ownersList.length > 0"
              :dataSource="properties"
              :allowSorting="true"
              :allowFiltering="false"
              :toolbar="toolbarOptions"
              :editSettings="editSettings"
              @toolbarClick="toolbarClick"
              :allowExcelExport="true"
              @actionBegin="actionBegin"
              @rowDataBound="onRowDataBound"
              height="500">
               ...........

  computed: {
    ...mapGetters('properties', ['allProperties', 'isLoading', 'fetchError']),
    ...mapGetters('owners', ['allOwners', 'isLoadingOwners', 'ownersError']),
    properties() {
      return this.allProperties;
    },

If the user enters the edit mode I would like to revert the original values to the row in the event of an error while calling the save method or if the user clicks "No" in the save confirmation dialog but I cannot find a way to achieve my goal. Lets focus on the actions to take if the user clicks "No" in the confirmation dialog. This is what I'm trying:


    async actionBegin(args) {
        console.log('Action Begin:', args); // Depuración
        const toast = this.toast; // Obtener la instancia de Toast
        if (args.requestType === 'save') {
          // Validar los datos antes de proceder
          const property = args.data;
          if (!property.name || !property.internalCode) {
            toast.error('El campo Nombre y Código Interno son obligatorios.');
            args.cancel = true; // Cancelar la acción si la validación falla
            return;
          }


          if (args.action === 'edit') {
            const result = await Swal.fire({
              title: 'Confirm save',
              text: 'Save changes?',
              icon: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Yes',
              cancelButtonText: 'No',
            });
            if (!result.isConfirmed) {
              args.rowData.name = args.previousData.name; // Here I should revert all properties but I'm focusing in a single one during tests
              args.cancel = true;
              
              return;
            }

I've tried different approaches, like calling this.$refs.closeEdit() or this.$refs.grid.refresh(args.rowIndex); but no one of them seems to work.

Thanks!

[Aishwarya Rameshbabu]

Hi Fran Carranque,

Greetings from Syncfusion support.

Upon reviewing your query, we have observed that you wanted to display a confirmation dialog when saving the edited values in the Syncfusion Grid. In the event of an error or if the 'No' button is clicked in the confirmation dialog, the record should revert to its original state without saving. Based on the provided code example, we have created a sample to address your requirement. This has been implemented within the actionBegin event, utilizing the endEdit method to save records and the closeEdit method to cancel the edit based on specific conditions. For more detailed information, please refer to the code example, sample, and video demonstration provided below.

App.vue

<template>

  <ejs-grid

    id="Grid"

    ref="grid"

    :dataSource="properties"

    :allowSorting="true"

    :allowFiltering="false"

    :toolbar="toolbarOptions"

    :editSettings="editSettings"

    :allowExcelExport="true"

    :actionBegin="actionBegin"

    height="500"

  >

    <e-columns>

     ……………………

     </e-columns

  ></ejs-grid>

</template>

<script>

 

    actionBegin: function (args) {

      if (args.requestType === "save" && !this.confirmSave) {

        args.cancel = true; // Temporarily cancel the save action

        // Show confirmation dialog

        const _this = this;

        const _args = args;

        Swal.fire({

          title: "Confirm save",

          text: "Save changes?",

          icon: "warning",

          showCancelButton: true,

          confirmButtonText: "Yes",

          cancelButtonText: "No",

        }).then((result) => {

          if (result.isConfirmed && _args.data.CustomerID) {

            // If confirmed and if the CustomerID value is present allow the save action

            _this.confirmSave = true;

            _this.$refs.grid.endEdit(); // Complete the edit

          } else {

            _this.$refs.grid.closeEdit(); // Close the dialog and revert to original

          }

        });

      } else {

        this.confirmSave = false; // Reset the flag after save is completed

      }

    },

  },

 

Sample: https://codesandbox.io/p/sandbox/vuex-mapgetters-forked-2fstmk?file=%2Fsrc%2FApp.vue%3A69%2C1-95%2C5

Video Demonstration: please find in the attachment.

API Reference:

actionBegin

endEdit

closeEdit

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 195014Video_988ceb0.zip