We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editing in Grid Component

Thread ID:

Created:

Updated:

Platform:

Replies:

144595 May 14,2019 05:13 AM UTC May 15,2019 06:19 AM UTC Vue 4
loading
Tags: Data Grid
sayali saitawdekar
Asked On May 14, 2019 05:13 AM UTC

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
Replied On May 14, 2019 05:24 AM UTC

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

Attachment: gridedit_faf6f3b1.rar

Pavithra Subramaniyam [Syncfusion]
Replied On May 14, 2019 09:47 AM UTC

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> 
 
 
 
Sample               : https://codesandbox.io/s/v0wj570x53 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 
 


sayali saitawdekar
Replied On May 14, 2019 09:55 AM UTC

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 [Syncfusion]
Replied On May 15, 2019 06:19 AM UTC

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. 

                              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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon