Example of how to use AddEventArgs in syncfusion in vue

Question

Hello, Example of how to use AddEventArgs in syncfusion in vue..!!Please share with example how to use , where to use?

Sujith Kumar Rajkumar · Answer

Hi Shivani, 
 
Greetings from Syncfusion support. 
 
The ‘AddEventArgs’ will be received in the Grid’s actionBegin and actionComplete event while adding(Normal and Dialog editing mode) a new record in the Grid. This is demonstrated in the below code snippet, 
 





// Grid’s actionBegin event function 
onActionBegin: function(args) { 
        if (args.requestType === "add") { 
            // Here you can get the addEventArgs 
        } 
}, 
 
// Grid’s actionComplete event function 
onActionComplete: function(args) { 
        if (args.requestType === "add") { 
            // Here you can get the addEventArgs 
        } 
}  
 
Sample for your reference, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/154710/ze/GridApplication96057617  
 
API links: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

Shivani · Answer

Thank you for your reply.But what I want to achieve is that...See in the picture.if I add one record and then I don't click on-grid and directly click on Save Button (Custome Created button). Then how I can get newly added data in Vue?If possible then please share an example.

Sujith Kumar Rajkumar · Answer

Hi Shivani, 
 
From your query we could understand that your requirement is to get the newly added data before saving to the Grid on clicking custom toolbar item. You can achieve this by getting the added data from the form object of the Grid’s edit module as demonstrated in the below code snippet, 
 




// Grid’s toolbarClick event function 
clickHandler: function(args) { 
        if (args.item.id === 'custom-save' && this.$refs.grid.ej2Instances.editModule.formObj) { 
            var newVal = []; 
            // Gets the input elements of the newly added row 
            var inputElements = this.$refs.grid.ej2Instances.editModule.formObj.inputElements; 
            // The value of each input element is stored with their field name in ‘newVal’ variable 
            inputElements.forEach(x => newVal[x.name] = x.value); 
            console.log("Added data: " + newVal) ; 
        } 
} 
 
Modified sample for your reference, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/154710/ze/GridUpdatedSample264403865  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Shivani · Answer

Hello, Sujith Thank you for your reply.I already got the value on the save button.On Custome created SAve button I am calling this method.self.$refs.grid.endEdit();
then it calls into this event,
onActionBegin: function(args) {      var self = this;      if (args.requestType == "save") {        args.cancel = true; //cancel the default edit operation        self.newAddedCategory1.push(args.data);      }          },and here I add records and then save.
But your reply I keep in mind.

Thank you .

Sujith Kumar Rajkumar · Answer

Hi Shivani, 

We suspected you did not want to save the data on custom button click and that is why we provided the previous solution. But we are glad to hear that your query has been resolved. 

Please get back to us if you require any further assistance. 

Regards, 
Sujith R