GridView - How to update total summaries on the client side in Batch Edit mode

This example demonstrates how to update total summaries on the client side when GridView is in Batch Edit mode. To implement the required task, perform the following steps:

1. Add a total summary item for a required column. The Tag property is used to find this summary item and get its value: 

[C#]
settings.Columns.Add(column=>{column.FieldName="C2";column.ColumnType=MVCxGridViewColumnType.SpinEdit;ASPxSummaryItemsummaryItem=newASPxSummaryItem(column.FieldName,DevExpress.Data.SummaryItemType.Sum);summaryItem.Tag=column.FieldName+"_Sum";summaryItem.DisplayFormat="{0}";settings.TotalSummary.Add(summaryItem);});

 2. Replace the summary item with a custom Footer template:

[C#]
column.SetFooterTemplateContent(c=>{Html.DevExpress().Label(lbSettings=>{stringfieldName=(c.ColumnasGridViewDataColumn).FieldName;lbSettings.Name="labelSum";lbSettings.Properties.EnableClientSideAPI=true;ASPxSummaryItemsummaryItem1=c.Grid.TotalSummary.First(i=>i.Tag==(fieldName+"_Sum"));lbSettings.Text=c.Grid.GetTotalSummaryValue(summaryItem1).ToString();}).Render();});

 3. Handle the grid's client-side BatchEditEndEditing event to calculate a new summary value and set it when any cell value has been changed:

[JScript]
function OnBatchEditEndEditing(s, e){var originalValue = s.batchEditApi.GetCellValue(e.visibleIndex, "C2");var newValue = e.rowValues[(s.GetColumnByField("C2").index)].value;var dif = newValue - originalValue;
    labelSum.SetValue((parseFloat(labelSum.GetValue()) + dif).toFixed(1));}

4. Finally, replace standard Save changes and Cancel changes buttons with custom buttons to refresh a summary value when all modifications have been canceled:

[C#]
settings.SetStatusBarTemplateContent(c=>{ViewContext.Writer.Write("<div style='text-align: right'>");Html.DevExpress().HyperLink(hlSettings=>{hlSettings.Name="hlSave";hlSettings.Properties.Text="Save changes";hlSettings.Properties.ClientSideEvents.Click="function(s, e){ GridView.UpdateEdit(); }";}).Render();ViewContext.Writer.Write(" ");Html.DevExpress().HyperLink(hlSettings=>{hlSettings.Name="hlCancel";hlSettings.Properties.Text="Cancel changes";hlSettings.Properties.ClientSideEvents.Click="function(s, e){ GridView.CancelEdit(); GridView.Refresh(); }";}).Render();ViewContext.Writer.Write("</div>");});

See Also:
GridView - Batch Edit - How to calculate values on the fly 
GridView - Batch Edit - How to calculate unbound column and total summary values on the fly

ASP.NET Web Forms Example:
ASPxGridView - How to update total summaries on the client side in Batch Edit mode