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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Entire data grid rows to controller using ajax

Entire data grid rows to controller using ajax

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,

        }); 

7 Replies 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team September 2, 2020 01:59 PM UTC

  
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. 

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. 



Marked as answer
MA Majics September 7, 2020 05:03 AM UTC

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?

MA Majics September 8, 2020 10:09 AM UTC

Any update would be appreciated

SM Shalini Maragathavel Syncfusion Team September 8, 2020 12:26 PM UTC

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. 
 

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. 


MA Majics September 8, 2020 05:19 PM UTC

Hi Shalini,

Appreciate your reply.

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


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

MA Majics September 9, 2020 09:31 AM UTC

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

AG Ajith Govarthan Syncfusion Team September 10, 2020 02:06 PM UTC

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> 




Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


Loader.
Up arrow icon