What's the easiest way to add a server-side action to support Grid Editing?

Question

Hi there,I have a which shows Device ID, Device Name plus some statistics data. ID is the primary key and "Name" column is made editable. The goal is once I complete editing the name, a server-side action could be triggered to update the device name (of the corresponding ID) in the database.What is the easiest way to achieve this goal? Thanks. The code behind my grid is shown below.

constructor(private http:HttpClient,public deviceService:DeviceService,private dataService:DataService) { this.http.get(this.prodUrl+"/home/getdevicestats").subscribe(response => { this.devices = response; this.dataService.allDevices=this.devices; this.dataLoaded=true; } }ngOnInit(){ this.toolbarOptions=['Search']; this.pageOptions={ pageSize:1000,pageCount:2}; this.state={skip:0,take:10}; this.selectionOptions={persistSelection:true,type:'Multiple',mode:'Row',checkboxMode:'ResetOnRowClick'}; this.searchOptions = {fields: ['Name', 'ID'],operator:'startswith',ignoreCase:true}; this.formatOptions = { type: 'date', format: "dd/MM/yyyy" }; this.editSettings = { allowEditing: true }; }

Thiyagu Subramani · Accepted Answer

Hi Huifei, 

Thanks for contacting Syncfusion support. 

By default in EJ2 Grid when we use local data all grid actions are performed in the client side only but if you want send query to backend and perform actions in server side you have use our in-built adaptor or custom bindings in grid. 

The EJ2 Data Manager supports the following adaptors to communicate with the data source – Json, URL, OData, ODataV4, Web API and WebMethod adaptor. Each adaptor uses a different way to send and receive requests and response from remote services. Each of these adaptors have been explained in the below help documentation link which you can check for more details on this, 

Documentation: https://ej2.syncfusion.com/angular/documentation/data/adaptors/#data-adaptors  

We also suggest you to use custom binding approach to bind data in the Grid. In this you can bind data from API call by providing your own custom queries(as required by your API) and handle all the Grid actions with your API. The Grid’s custom binding approach is explained below, 

For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 

We have prepared a sample based on this for your reference. You can find it below, 
Sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe 

https://ej2.syncfusion.com/angular/demos/#/material/grid/remote-data 

More details on custom binding can be checked in the below help documentation link, 

Custom binding documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/ 

API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange  
                 https://ej2.syncfusion.com/angular/documentation/api/grid/#datasourcechanged  
                 https://ej2.syncfusion.com/angular/documentation/api/grid/#datasource  

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 
 
If still facing the issue please share your issue reproducing sample then only we provide the appropriate solution as soon as possible. 

Please get back to us if your require any further assistance. 

Regards, 
Thiyagu S