How can I transmit edited cell data to a server-side relational method in ASP.NET MVC PivotClient 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;
}
