How can i control event when updating a row by pressing enter or clicking another row (leave row focus)?

Question

Hi All,I'm in normal edit-mode (not batch), and i would like to display a confirmation message (with yes/no buttons) before validating a row update.The confirmation message must contains one or several values entered in the grid cell(s). I'm not adding rows, only updating data.I followed example you posted here https://www.syncfusion.com/forums/137219/how-can-i-have-a-validation-event-when-updating-a-row and I was able to manage the Click event in Update toolbar button using actionBegin and toolbarClick, but the situation is that we also need to control the events when user:- click Enter button (compormise changes)- click other row (leave curren row focus)In both events we also want to validate data so that's why we want to handle it. And also if we have :validationRules for some e-column, what happends first? the validationRule or the events (actionBegin/toolbarClick/leaving row event)?Thanks in advance for your reply.Regards

Thiyagu Subramani · Accepted Answer

Hi Victor, 

Thanks for contacting Syncfusion forum. 

Based on your reported  information we have achieved your requirement using actionBegin event and EJ2 dialog control.  Using EJ2 dialog we have created confirmation messages with two buttons like yes/no.  

In actionBegin event when requestType as save we have canceled default behavior and called endEdit and closeEdit based on button clicks with help of flag variable. 

Please refer to the below code and sample link. 





actionBegin: function(args) { 
      if (args.requestType === "save" && flag === false) { 
        args.cancel = true; 
        var dialogObj = document.getElementsByClassName("e-dialog")[0] 
          .ej2_instances[0]; 
        var gridObj = document.getElementsByClassName("e-grid")[0] 
          .ej2_instances[0]; 
        dialogObj.content = 
          "Are you sure to enter " + 
          args.data.ID + 
          " in OrderID and " + 
          args.data.Name + 
          " in name"; 
        dialogObj.buttons = [ 
          { 
            // Click the footer buttons to hide the Dialog 
            click: args => { 
              flag = true; 
              gridObj.endEdit(); 
              flag = false; 
              dialogObj.hide(); 
            }, 
            // Accessing button component properties by buttonModel property 
            buttonModel: { 
              //Enables the primary button 
              isPrimary: true, 
              content: "Yes" 
            } 
          }, 
          { 
            click: () => { 
              gridObj.closeEdit(); 
              dialogObj.hide(); 
            }, 
            buttonModel: { 
              content: "No", 
              cssClass: "e-flat" 
            } 
          } 
        ]; 
        dialogObj.show(); 
      } 
    } 


Sample link : https://codesandbox.io/s/vue-template-forked-7d5eu 

API link : https://ej2.syncfusion.com/vue/documentation/api/grid/#closeedit 
              : https://ej2.syncfusion.com/vue/documentation/api/grid/#endedit 
              : https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

Documentation link: https://ej2.syncfusion.com/vue/documentation/dialog/getting-started/ 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S