Call a method when Grid Edit event occurs.

[Edmund Munday]

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]

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> 

Help documentation : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#perform-crud-operations 

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

Regards, 

R.Dhivya