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
Question Comments
Added By:
Dhaval.Shah at:
6/23/2014 5:25:31 PM Hi Larry,
Good example for us, I must admit.
I noticed one thing:
I modify C2 value and press TAB, the total updates correctly.
However, when I "cancel changes" the total does not revert to the previous (unchanged) one.
Thought I'd let you know.
Best regards
Added By:
Larry (DevExpress Support) at:
6/24/2014 7:52:35 AM Hi Dhaval,
Thank you for your attention. I have modified the example. Added By:
Dhaval.Shah at:
6/24/2014 7:51:38 PM Hi Larry,
Thanks for the prompt (as always) update, much appreciated.
It works. However, something's not right it appears:
Please try this.
Run the example, click on first row C2 column, type a number and press TAB.
I ran it in Chrome and the total was not updated (the value in cell reverted to the original value 0).
Then, I went back to the same cell, typed another number and pressed ENTER.
this time it updated correctly.
I must be doing something wrong, but thought I'd run it past you first.
Do update the thread when you can please.
Thanks.
Added By:
Larry (DevExpress Support) at:
6/25/2014 3:09:00 AM Thank you for the clarification. I have created a separate ticket on your behalf to process the issue more effectively:
ASPxGridView - Batch Editing - Some issues with the T114923 examplePlease refer to it for further correspondence.