Saving edited data to database

[Sunil]

Hi,

I have a datagrid, used for inline edit. How do I capture the edited row and use that to update in the backend DB? Tried the sample code you provided with 'RemoteAdapter', but it is not working. PLease assist. Also, i need to know how I can add a button outside to add a new  for the inline editing grid?

Thank you!

Sunil

[Praveenkumar Gajendiran]

Hi Sunil,

Thanks for contacting Syncfusion support.

By default in EJ2 Grid we have built-in support for data Adaptors, if you want to use the RemoteSaveAdaptor option, you can perform the Grid actions like filtering, sorting and grouping in the client-side and you can perform the CRUD actions alone on the server-side. But the Datasource must be set to json property and set RemoteSaveAdaptor to the adaptor property. CRUD operations can be mapped to server-side using updateUrl, insertUrl, removeUrl, batchUrl, crudUrl properties and then return the json list data to the Grid in order to update it. 

 

For more reference, please refer to the below documentation, code example and sample. 

 

UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-save-adaptor

Code Example: 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Cancel" })"> 

    <e-data-manager json="@ViewBag.DataSource.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager> 

     

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" ></e-grid-editSettings> 

     

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"  textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168968/ze/CRUD-NormatEdit-732515605-1342504402.zip

Still if you are facing any difficulties, please let us know the exact issue you have facing with the following details,  

1. Please elaborate on your exact issue scenario.
2. Syncfusion package used
3. Complete Grid rendering code
4. Let us know the replication procedure for reproducing the problem.

For this query, “i need to know how I can add a button outside to add a new  for the inline editing grid?”

We suspect that you want to add a new record through external button, for this we suggest you to use addRecord method of grid to achieve your requirement. Please refer the below API documentation, code example for your reference.

API Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#addrecord 

document.getElementById("togglebtn1").addEventListener('click', function () { 

         var grid = document.getElementById('Grid').ej2_instances[0]; // Grid Instances
        grid.addRecord(); 

    }); 

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G