Entire data grid rows to controller using ajax

[Majics]

Hi Team,

I am loading the grid data using ajax call and it is successful. However,  I am not able to find a solution to pass all the rows of  grid back to controller using ajax call 

Env: .NET core 3.1 MVC

Reviewed following threads already but it didn't help

https://www.syncfusion.com/forums/143082/how-to-redirect-after-batch-update-in-server-correctly 

https://www.syncfusion.com/forums/144219/save-function-for-drag-and-drop-grid 

https://www.syncfusion.com/forums/155612/pass-value-to-controller 

  var DestObj = document.getElementById("TestGrid").ej2_instances[0];

        var destdata = DestObj.dataSource;

        var data = JSON.stringify({data: destdata});

        alert(data);

        $.ajax({

            url: '@Url.Action("SaveDetails", "Test")',

            type: "POST",

            datatype: "json",

            contentType: "application/json; charset=utf-8",

            data: data,

        }); 

[Shalini Maragathavel]

  

Hi Majics, 

Greetings from Syncfusion support. 

Based on your query we understood that you want to send the Grid data to the server.You can achieve your requirement by using the AJAX call as demonstrated in the below code snippet, 

Index.cshtml 

 

@{ 

    ViewData["Title"] = "Grid"; 

} 

 

<ejs-button id="normalbtn" content="Render"></ejs-button> 

<ejs-button id="normalbtn1" content="Send"></ejs-button> 

 

<div> 

    <ejs-grid id="Grid" allowPaging="true"> 

        <e-grid-columns> 

….. 

 

  </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

 

    document.getElementById("normalbtn1").addEventListener("click", function () { 

        debugger; 

        var gridObj = document.getElementById('Grid').ej2_instances[0]; 

        

        var g = gridObj.dataSource; 

        var ajax = new ej.base.Ajax({ 

            url: 'Home/GetCurrentRowData', 

            type: 'POST', 

            

            data: JSON.stringify( g )  

 

        }); 

        ajax.send(); 

    }) 

 

 

</script> 

 

homecontroller.cs 

 

  public IActionResult GetCurrentRowData([FromBody]List<OrdersDetails1> data) 

        { 

            return Json(new { result = data }); 

        } 

 

In below sample using the button click we have sent the Grid’s datas to the server. 

 

Please refer the sample for more information. 

Sample: https://www.syncfusion.com/downloads/support/forum/157479/ze/TestSampleCoreAjax-87041572808465999.zip 

If we misunderstood your requirement, please share the purpose of sending the data to the server. 

 

Let us know if you have any concerns.


Regards,
Shalini M. 

[Majics]

Ms. Shalini,

Thank you very much and it is working fine with your approach. One more clarification, is it possible to have CRUD Model (ie, deleted, inserted or modified rows)  using same ajax approach?

[Majics]

Any update would be appreciated

[Shalini Maragathavel]

Hi Jacob, 

 

Sorry for the late reply. 

Based on your query we suspect that you need to perform CRUD operation in server-side. In this you have mentioned that you are loading the grid using ajax call so we suspect that you are bind data as local data. 

If you need to perform all Grid Actions in client-side except the CRUD operations, that should be interacted with server-side to persist data. It can be achieved in Grid by using RemoteSaveAdaptor. 

 

For more information please refer the below help document for the RemoteSaveAdaptor. 

 

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

If we misunderstood your query, then please share the below details, 

1. Share the complete Grid rendering code. 

2. Share the code example of binding the data to the Grid using ajax. 

Regards,  

Shalini M. 

[Majics]

Hi Shalini,

Appreciate your reply.

I am using the AJAX as provided in the sample shared by you. 

 https://www.syncfusion.com/downloads/support/forum/157479/ze/TestSampleCoreAjax-87041572808465999.zip  

Additionally I have attached the screenshots of the same with marking to depict my requirement using same ajax approach.

Thank you.

Attachment: Screenshots_371d68d5.rar

[Majics]

Any update would be appreciated. It is for a POC and decision making about the EJ2.

[Ajith Govarthan]

Hi Majics, 

Thanks for the update. 

Based on your requirement we have prepared sample and in that sample we have used the RemoteSaveAdaptor as datasource to perform the CRUD actions in server side. In the sample we have fetched the data using the ajax and set data for the remoteSaveAdaptor using the Json property. 

Note:  Using the RemoteSaveAdaptor you can perform the actions like filtering, grouping, sorting in the client side itself and you can perform the CRUD actions in the server side using the CRUD URLs. 

For your convenience we have attached the sample so please refer the sample for your reference. 

Code Example: 

Index.cshtml 

<ejs-button id="normalbtn" content="Render"></ejs-button> 

 

<div> 

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

        <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="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 

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

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    document.getElementById("normalbtn").addEventListener("click", function () { 

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

        var ajax = new ej.base.Ajax('/Home/DataSource', 'GET'); 

        ajax.send(); 

        ajax.onSuccess = function (data) { 

 

            var dataSource = new ej.data.DataManager({ 

                json: JSON.parse(data), 

                adaptor: new ej.data.RemoteSaveAdaptor(), 

                insertUrl: '/Home/Insert', 

                updateUrl: '/Home/Update', 

                removeUrl: '/Home/Remove' 

            }); 

            grid.dataSource = dataSource; 

        }; 

    }); 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSampleCoreAjax_remotesave975978495.zip 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.