How to pass edited cell information to server side method (relational) in ASP.NET MVC PivotClient control?
This KB illustrates that how to pass AJAX information to server side in ASP.NET MVC PivotClient.
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 PivotClient control.
You can refer to our ASP.NET MVC PivotClient feature tour page to know about its other groundbreaking feature representations. You can also explore our ASP.NET MVC PivotClient documentation to understand how to present and manipulate data.
For current customers, you can check out our ASP.NET MVC 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 ASP.NET MVC PivotClient and other ASP.NET MVC components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
