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

Call a method when Grid Edit event occurs.

Thread ID:

Created:

Updated:

Platform:

Replies:

146565 Aug 8,2019 10:32 AM UTC Aug 9,2019 10:26 AM UTC Vue 1
loading
Tags: Data Grid
Edmund Munday
Asked On August 8, 2019 10:32 AM UTC

I have a data grid component that I am using to display data that is being pulled from a Firebase Firestore FB.
My local datasource is bound to my remote DB in Firestore, and I want local edits in the Grid to be reflected in my remote data.

Since two way binding isn't supported, I figure the best option is to fire a method to update my Firestore DB whenever a "save", "new", or "delete" event occurs in the Syncfusion grid components.

I could then take the data from that event, post it to Firestore, Firestore would automatically update my local Datastore, and the grid would reactively update itself with the new data.

How would this be achieved?

1. when data grid either "saves" updated record, "creates new" record, or "deletes" existing record - call a method in the parent Vue component.
2. When these events happen - I DO NOT want the grid to automatically add the new record into the DOM. Instead I want it to call the method only and pass the data to that method. The DOM will be updated by the method call updating Firestore, and then the Firestore DB pushing the latest change back to my client.

Dhivya Rajendran [Syncfusion]
Replied On August 9, 2019 10:26 AM UTC

Hi Edmund, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and analyzed your requirement. By default, we have custom binding option for grid so we suggest you to use the below way to achieve your requirement. 

In the below code example we have applied grid data source as result and count pair and bind dataSourceChanged event for Grid. In that event, you can get the corresponding action (edit, add, delete and their row data) and their arguments so based on that details you can update in your server and call the endEdit function to apply the changes in Grid component(UI).  

 
<ejs-grid 
      id="Grid" 
      ref="grid" 
      :dataSource="{ result : data, count : data.length }" 
      :allowPaging="true" 
      :allowFiltering="true" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      :filterSettings="filterSettings" 
      :dataSourceChanged = "dataSource" 
    > 
</ejs-grid> 
  </div> 
</template> 
 
<script> 
 
export default { 
  data() { 
    return { 
  }, 
  provide: { 
    grid: [Page, Filter, Toolbar, Edit] 
  }, 
  methods: { 
    dataSource(args){ 
     if(args.action === “edit”){ 
        args.endEdit(); // once data updated successfully then call endEdit function  
      } 
    } 
  } 
}; 
</script> 



Note: For other actions like paging, filtering, sorting also we have send the corresponding event arguments in dataStateChange event. 

Regards, 
R.Dhivya 


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