Example T114923
Visible to All Users

Grid View for ASP.NET Web Forms - 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. In this example, the grid's HighlightDeletedRows property is set to false.

Update total summaries

Overview

  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.
    ASPx
    <TotalSummary> <dx:ASPxSummaryItem SummaryType="Sum" FieldName="C2" Tag="C2_Sum" /> </TotalSummary>
    C#
    protected object GetTotalSummaryValue() { ASPxSummaryItem summaryItem = Grid.TotalSummary.First(i => i.Tag == "C2_Sum"); return Grid.GetTotalSummaryValue(summaryItem); }
  2. Replace the summary item with a custom footer template.
    ASPx
    <dx:GridViewDataSpinEditColumn Width="100" FieldName="C2"> <FooterTemplate> Sum = <dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="labelSum" Text='<%# GetTotalSummaryValue() %>' /> </FooterTemplate> </dx:GridViewDataSpinEditColumn>
  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.
    JavaScript
    function OnBatchEditEndEditing(s, e) { CalculateSummary(s, e.rowValues, e.visibleIndex, false); } var savedValue; 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; var sum = (parseFloat(labelSum.GetValue()) + dif).toFixed(1); savedValue = sum; labelSum.SetValue(sum); } function OnBatchEditRowDeleting(s, e) { CalculateSummary(s, e.rowValues, e.visibleIndex, true); }

Files to Review

Documentation

More Examples

Example Code

Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="DevExpress.Web.v18.2, Version=18.2.18.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function OnBatchEditEndEditing(s, e) { CalculateSummary(s, e.rowValues, e.visibleIndex, false); } var savedValue; function OnEndCallback(s, e) { if (!savedValue) return; labelSum.SetValue(savedValue); } 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; var sum = (parseFloat(labelSum.GetValue()) + dif).toFixed(1); savedValue = sum; labelSum.SetValue(sum); } function OnBatchEditRowDeleting(s, e) { CalculateSummary(s, e.rowValues, e.visibleIndex, true); } function OnChangesCanceling(s, e) { if (s.batchEditApi.HasChanges()) setTimeout(function () { savedValue = null; s.Refresh(); }, 0); } </script> </head> <body> <form id="frmMain" runat="server"> <dx:ASPxGridView ID="Grid" runat="server" KeyFieldName="ID" OnBatchUpdate="Grid_BatchUpdate" OnRowInserting="Grid_RowInserting" OnRowUpdating="Grid_RowUpdating" OnRowDeleting="Grid_RowDeleting" ClientInstanceName="gridView" Theme="Office2010Silver"> <Columns> <dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true" /> <dx:GridViewDataColumn FieldName="C1" /> <dx:GridViewDataSpinEditColumn Width="100" FieldName="C2"> <FooterTemplate> Sum = <dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="labelSum" Text='<%# GetTotalSummaryValue() %>'> </dx:ASPxLabel> </FooterTemplate> </dx:GridViewDataSpinEditColumn> <dx:GridViewDataTextColumn FieldName="C3" /> <dx:GridViewDataCheckColumn FieldName="C4" /> <dx:GridViewDataDateColumn FieldName="C5" /> </Columns> <SettingsEditing Mode="Batch" BatchEditSettings-HighlightDeletedRows="false" /> <Settings ShowFooter="true" /> <TotalSummary> <dx:ASPxSummaryItem SummaryType="Sum" FieldName="C2" Tag="C2_Sum" /> </TotalSummary> <ClientSideEvents EndCallback="OnEndCallback" BatchEditChangesCanceling="OnChangesCanceling" BatchEditRowDeleting="OnBatchEditRowDeleting" BatchEditEndEditing="OnBatchEditEndEditing" /> </dx:ASPxGridView> </form> </body> </html>
Default.aspx.cs
C#
using System; using System.Collections.Generic; using System.Collections.Specialized; using System.ComponentModel; using System.Linq; using DevExpress.Web.Data; using DevExpress.Web; public partial class _Default : System.Web.UI.Page { protected List<GridDataItem> GridData { get { var key = "34FAA431-CF79-4869-9488-93F6AAE81263"; if(!IsPostBack || Session[key] == null) Session[key] = Enumerable.Range(0, 100).Select(i => new GridDataItem { ID = i, C1 = i % 2, C2 = i * 0.5 % 3, C3 = "C3 " + i, C4 = i % 2 == 0, C5 = new DateTime(2013 + i, 12, 16) }).ToList(); return (List<GridDataItem>)Session[key]; } } protected void Page_Load(object sender, EventArgs e) { Grid.DataSource = GridData; Grid.DataBind(); } protected void Grid_RowInserting(object sender, ASPxDataInsertingEventArgs e) { InsertNewItem(e.NewValues); CancelEditing(e); } protected void Grid_RowUpdating(object sender, ASPxDataUpdatingEventArgs e) { UpdateItem(e.Keys, e.NewValues); CancelEditing(e); } protected void Grid_RowDeleting(object sender, ASPxDataDeletingEventArgs e) { DeleteItem(e.Keys, e.Values); CancelEditing(e); } protected void Grid_BatchUpdate(object sender, ASPxDataBatchUpdateEventArgs e) { foreach(var args in e.InsertValues) InsertNewItem(args.NewValues); foreach(var args in e.UpdateValues) UpdateItem(args.Keys, args.NewValues); foreach(var args in e.DeleteValues) DeleteItem(args.Keys, args.Values); e.Handled = true; } protected GridDataItem InsertNewItem(OrderedDictionary newValues) { var item = new GridDataItem() { ID = GridData.Count }; LoadNewValues(item, newValues); GridData.Add(item); return item; } protected GridDataItem UpdateItem(OrderedDictionary keys, OrderedDictionary newValues) { var id = Convert.ToInt32(keys["ID"]); var item = GridData.First(i => i.ID == id); LoadNewValues(item, newValues); return item; } protected GridDataItem DeleteItem(OrderedDictionary keys, OrderedDictionary values) { var id = Convert.ToInt32(keys["ID"]); var item = GridData.First(i => i.ID == id); GridData.Remove(item); return item; } protected void LoadNewValues(GridDataItem item, OrderedDictionary values) { item.C1 = Convert.ToInt32(values["C1"]); item.C2 = Convert.ToDouble(values["C2"]); item.C3 = Convert.ToString(values["C3"]); item.C4 = Convert.ToBoolean(values["C4"]); item.C5 = Convert.ToDateTime(values["C5"]); } protected void CancelEditing(CancelEventArgs e) { e.Cancel = true; Grid.CancelEdit(); } public class GridDataItem { public int ID { get; set; } public int C1 { get; set; } public double C2 { get; set; } public string C3 { get; set; } public bool C4 { get; set; } public DateTime C5 { get; set; } } protected object GetTotalSummaryValue() { ASPxSummaryItem summaryItem = Grid.TotalSummary.First(i => i.Tag == "C2_Sum"); return Grid.GetTotalSummaryValue(summaryItem); } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.