Editing in Grid Component

[sayali saitawdekar]

I am editing the data in Dialog Edit mode, but i want to save the data in my database, what event does that save button give so that i can give axios call to my api to save the data in my database, similarly please tell for the batch update also.

[sayali saitawdekar]

Given is the screenshot, in which i want the event for save button.

Attachment: gridedit_faf6f3b1.rar

[Pavithra Subramaniyam]

Hi sayali, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using the “actionComplete” event of Grid component which will be triggered after any Grid actions like editing, paging etc. In that event you can give axios call by checking whether the requestType of the event is “save” for dialog editing and “batchsave” for batch editing. Please refer to the below code example, documentation link and sample link for more information. 

 

[App.Vue] 

<template> 

  <div id="app"> 

     <ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :editSettings='editSettings' :toolbar='toolbar' 

     :actionComplete="actionComplete"> 

        <e-columns> 

          .  .  .    

        </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids"; 

Vue.use(GridPlugin); 

export default { 

  name: "App", 

  data: () => { 

    return { 

      data: data, 

      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, 

         .  .  . 

    }; 

  }, 

   methods: { 

    actionComplete: function(e) { 

        if (e.requestType === "save") {   //need to check e.requestType == “batchsave” for Batch editing 

    // you can do your code here 

    }  

    }      

   }, 

  provide: { 

      grid: [Toolbar, Edit, Page] 

  } 

}; 

</script> 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete 

 

Sample               : https://codesandbox.io/s/v0wj570x53 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

 

[sayali saitawdekar]

I have tried this but what happens is the dialog box gets closed, and i am not able to access the data from the textboxes. 

Attached is the screenshot in which you will see which value i am not able to access.

Attachment: gridedit2_cbbdf29f.rar

[Pavithra Subramaniyam]

Hi sayali, 

You can achieve your requirement by using the “actionBegin” event in which you can get the edit form element and get values from the text boxes. Please refer to the below code example, documentation link and sample link for more information. 

[App.Vue] 

<template> 

  <div id="app"> 

     <ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :editSettings='editSettings' :toolbar='toolbar' 

     :actionBegin="actionBegin"> 

        <e-columns> 

            .   .   . 

        </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids"; 

import { data } from './datasource.js'; 

Vue.use(GridPlugin); 

export default { 

  .   .  . 

   methods: { 

    actionBegin: function(e) { 

        if (e.requestType === "save") { 

          console.log(e.form.querySelector("#gridCustomerID").value); 

          console.log("save");            

        console.log(e.rowData); 

    }  

    } 

}; 

</script> 

However you can get the modified data from the args.rowData in both “actionBegin” and “actionComplete” event. For Batch editing you can achieve the same by using the “beforeBatchSave” event whose arguments will contain the batch changes. 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

                              https://ej2.syncfusion.com/vue/documentation/api/grid/#beforebatchsave 

Sample               : https://codesandbox.io/s/jl9kjvxpjy 

Please get back to us if you need any further assistance on this. 

Regards, 

Pavithra S.