Grid View for ASP.NET Web Forms - How to update total summaries on the client in batch edit mode when deleted rows are highlighted

This example demonstrates how to calculate the total summary dynamically in batch edit mode when the grid's HighlightDeletedRows property is enabled.

Overview

Create a Custom Summary Item

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

<TotalSummary>
    <dx:ASPxSummaryItem SummaryType="Sum" FieldName="C2" Tag="C2_Sum" />
</TotalSummary>

protected object GetTotalSummaryValue() {
    ASPxSummaryItem summaryItem = Grid.TotalSummary.First(i => i.Tag == "C2_Sum");
    return Grid.GetTotalSummaryValue(summaryItem);
}

Replace the summary item with a custom footer template.

<dx:GridViewDataSpinEditColumn Width="100" FieldName="C2">
    <FooterTemplate>
        Sum =
        <dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="labelSum" Text='<%# GetTotalSummaryValue() %>' />
    </FooterTemplate>
</dx:GridViewDataSpinEditColumn>

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);
}

Create a Custom Recovery Button

Use the command column's CustomButtons property to create a custom Recovery button.

<dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true" ShowRecoverButton="true">
    <CustomButtons>
        <dx:GridViewCommandColumnCustomButton ID="customRecover" Text="Recover"></dx:GridViewCommandColumnCustomButton>
    </CustomButtons>
</dx:GridViewCommandColumn>

Add custom CSS classes to control the custom button's visibility based on a condition and hide the default Recovery button.

<Styles>
    <CommandColumnItem CssClass="commandCell"></CommandColumnItem>
    <BatchEditDeletedRow CssClass="deletedRow"></BatchEditDeletedRow>
</Styles>

.deletedRow a[data-args*="customRecover"].commandCell {
    display: inline !important;
}

a[data-args*="customRecover"].commandCell {
    display: none;
}

a[data-args*="Recover"].commandCell {
    display: none;
}

Handle the grid's client-side CustomButtonClick event to restore the deleted row and recalculate the total summary.

function OnCustomButtonClick(s, e) {
    if (e.buttonID == 'customRecover') {
        s.batchEditApi.ResetChanges(e.visibleIndex);
        var value = s.batchEditApi.GetCellValue(e.visibleIndex, "C2");
        labelSum.SetValue((parseFloat(labelSum.GetValue()) + value).toFixed(1));
    }
}

Files to Review

Default.aspx (VB: Default.aspx)
Default.aspx.cs (VB: Default.aspx.vb)

Documentation

Grid in Batch Edit Mode

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

DevExpress-Examples/asp-net-web-forms-grid-update-total-summary-with-highlighted-deleted-rows-in-batch-mode