devexpress-examples / gridview-how-to-update-total-summaries-on-the-client-side-in-batch-edit-mode-t137186

Replace a summary item with a custom footer template to calculate the total summary dynamically in batch edit mode.

Grid View for ASP.NET MVC - How to update total summaries on the client in batch edit mode

This example demonstrates how to replace a summary item with a custom footer template to calculate the total summary dynamically in batch edit mode.

Overview

Follow the steps below to update total summaries on the client in batch edit mode:

1. Add a total summary item for the corresponding column. Use the item's Tag property to identify the summary item and get its value.

   settings.Columns.Add(column => {
   column.FieldName = "C2";
   column.ColumnType = MVCxGridViewColumnType.SpinEdit;
   
   ASPxSummaryItem summaryItem = new ASPxSummaryItem(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.

   column.SetFooterTemplateContent(c => {
   	Html.DevExpress().Label(lbSettings => {
   		string fieldName = (c.Column as GridViewDataColumn).FieldName;
   		lbSettings.Name = "labelSum";
   		lbSettings.Properties.EnableClientSideAPI = true;
   		ASPxSummaryItem summaryItem1 = 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 and BatchEditRowDeleting events. In handlers, use the grid's batchEditApi.GetCellValue method to get initial cell values and rowValues argument property to get new cell values. Then recalculate the summary value and assign it to the label.

   function OnBatchEditEndEditing(s, e) {
       CalculateSummary(s, e.rowValues, e.visibleIndex, false);
   }
   function CalculateSummary(grid, rowValues, visibleIndex, isDeleting) {
       var originalValue = grid.batchEditApi.GetCellValue(visibleIndex, "C2");
       var newValue = rowValues[(grid.GetColumnByField("C2").index)].value;
       var dif = isDeleting ? -newValue : newValue - originalValue;
       labelSum.SetValue((parseFloat(labelSum.GetValue()) + dif).toFixed(1));
   }
   function OnBatchEditRowDeleting(s, e) {
       CalculateSummary(s, e.rowValues, e.visibleIndex, true);
   }
   function OnChangesCanceling(s, e) {
       if (s.batchEditApi.HasChanges())
           setTimeout(function () {
               s.Refresh();
           }, 0);
   }

Files to Review

• HomeController.cs (VB: HomeController.vb)
• _GridViewPartial.cshtml
• Index.cshtml

Documentation

• Grid in Batch Edit Mode

More Examples

• Grid View for ASP.NET Web Forms - How to update total summaries on the client in batch edit mode
• Grid View for ASP.NET MVC - How to calculate values dynamically in batch edit mode
• Grid View for ASP.NET MVC - How to calculate values and total summaries dynamically in batch edit mode