ASPxGridView - 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 ASPxGridView 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 ASPxSummaryItem.Tag property is used to find this summary item on the server side: 

[ASPx]
<SettingsShowFooter="true"/><TotalSummary><dx:ASPxSummaryItemSummaryType="Sum"FieldName="C2"Tag="C2_Sum"/></TotalSummary>

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

[ASPx]
<dx:GridViewDataSpinEditColumnFieldName="C2"><FooterTemplate>
		Sum =<dx:ASPxLabelID="ASPxLabel1"runat="server"ClientInstanceName="labelSum"Text='<%# GetTotalSummaryValue() %>'></dx:ASPxLabel></FooterTemplate></dx:GridViewDataSpinEditColumn>

 The GetTotalSummaryValue method is used to get the actual summary value when the grid is initialized:

[C#]
protectedobjectGetTotalSummaryValue(){ASPxSummaryItemsummaryItem=Grid.TotalSummary.First(i=>i.Tag=="C2_Sum");returnGrid.GetTotalSummaryValue(summaryItem);}

 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:

[ASPx]
<Templates><StatusBar><divstyle="text-align: right"><dx:ASPxHyperLinkID="hlSave"runat="server"Text="Save changes"><ClientSideEventsClick="function(s, e){ gridView.UpdateEdit(); }"/></dx:ASPxHyperLink><dx:ASPxHyperLinkID="hlCancel"runat="server"Text="Cancel changes"><ClientSideEventsClick="function(s, e){ gridView.CancelEdit(); gridView.Refresh(); }"/></dx:ASPxHyperLink></div></StatusBar></Templates>

See Also:

ASPxGridView - Batch Edit - How to calculate values on the fly 
ASPxGridView - Batch Edit - How to calculate unbound column and total summary values on the fly 

ASP.NET MVC Example:
GridView - How to update total summaries on the client side in Batch Edit mode