How to pass edited cell information to server side method (relational) in ASP.NET MVC PivotGrid control?

This KB illustrates that how to pass AJAX information to server side

Solution

You can call a service method through the AJAX post on the cell edit event. You can do the desired operations like storing values into DB through the AJAX and service methods. Follow the given steps:

Step 1

Prepare a getting started sample and enable the cell editing (enableCellEditing: true), and then trigger the cell edit event (cellEdit: “OnCellEdit”).

JavaScript

$("#PivotGrid1").ejPivotGrid(
{
 //dataSource
 enableCellEditing: true,
 cellEdit: "OnCellEdit"
 
});

ASP

<ej:PivotGrid ID="PivotGrid1" runat="server" ClientIDMode="Static" EnableCellEditing="true">
//…
<ClientSideEvents CellEdit="OnCellEdit"/>
</ej:PivotGrid>

MVC

@Html.EJ().Pivot().PivotGrid("PivotGrid1").Url(Url.Content("~/api/RelationalGrid")).EnableCellEditing(true).ClientSideEvents(evt => evt.CellEdit("OnCellEdit"))

On cell edit event, you can get “JSON Records”, “rowHeader”, and “columnHeader”. You can pass this information to the server-side through the AJAX post.

JavaScript (cellEdit event for all platforms)

function OnCellEdit(args) {
        
$.ajax({
 type: "POST",
 url: "/Relational/LoadGridData",
 data: JSON.stringify({
     CellInfo: args
 }),
 contentType: 'application/json; charset=utf-8',
 dataType: 'json',
 async: false,
 success: function (val) {
       alert("Success");
 },
 error: function (msg) {
       alert("Error");
 }
});
}

In server-side, you can perform the desired operations. The following code snippet explains the splitting of the stringified data which is obtained from the client-side.

[HttpPost]
[System.Web.Http.ActionName("LoadGridData")]
public Dictionary<string, object> LoadGridData(Dictionary<string, object> args)
 {
  String rowHeader, columnHeader;
  dynamic data = serializer.Deserialize<dynamic>( args["CellInfo"].ToString());
    foreach (KeyValuePair<string, object> i in data["editCellsInfo"])
    {
      if(i.Key == "rowHeader")
        rowHeader = ((object[])i.Value)[0].ToString();
      else if(i.Key == "columnHeader")
        columnHeader = ((object[])i.Value)[0].ToString();
  }
          
return dictionary;        
}

Conclusion

I hope you enjoyed learning about how to pass edited cell information to server side method (relational) in ASP.NET MVC Pivot Grid control.

You can refer to our ASP.NET MVC PivotGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC PivotGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!