How to: Calculate Values on the Fly in Batch Edit Mode

• Dec 17, 2020
• 4 minutes to read

The following example creates an unbound column that calculates the sum of other columns and changes its values dynamically when an end-user changes a grid value in Batch edit mode.

function OnBatchEditEndEditing(s, e) {
    window.setTimeout(function () {
        var price = s.batchEditApi.GetCellValue(e.visibleIndex, "Price");
        var quantity = s.batchEditApi.GetCellValue(e.visibleIndex, "Quantity");
        s.batchEditApi.SetCellValue(e.visibleIndex, "Sum", price * quantity);
    }, 10);
}

Default.aspx

<dx:ASPxCardView ID="Grid" runat="server" KeyFieldName="ID" AutoGenerateColumns="False"
                 OnBatchUpdate="ASPxCardView1_BatchUpdate" OnCardDeleting="ASPxCardView1_CardDeleting" 
                 OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" 
                 OnCustomUnboundColumnData="ASPxCardView1_CustomUnboundColumnData" >
    <ClientSideEvents BatchEditEndEditing="OnBatchEditEndEditing" />
    <SettingsEditing Mode="Batch" />
    <Columns>
        <dx:CardViewSpinEditColumn FieldName="Quantity" >
            <PropertiesSpinEdit DisplayFormatString="g" />
        </dx:CardViewSpinEditColumn>
        <dx:CardViewSpinEditColumn FieldName="Price" >
            <PropertiesSpinEdit DisplayFormatString="g" />
        </dx:CardViewSpinEditColumn>
        <dx:CardViewTextColumn FieldName="Sum" ReadOnly="True" UnboundType="Decimal" />
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowDeleteButton="True" 
                                          ShowEditButton="True" ShowNewButton="True">
            </dx:CardViewCommandLayoutItem>
            <dx:CardViewColumnLayoutItem ColumnName="Quantity" />
            <dx:CardViewColumnLayoutItem ColumnName="Price" />
            <dx:CardViewColumnLayoutItem ColumnName="Sum" />
            <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
        </Items>
    </CardLayoutProperties>
</dx:ASPxCardView>

Default.aspx.cs

protected List<GridDataItem> GridData {
    get
    {
        var key = "34FAA431-CF79-4869-9488-93F6AAE81263";
        if (!IsPostBack || Session[key] == null)
            Session[key] = Enumerable.Range(1, 100).Select(i => new GridDataItem
            {
                ID = i,
                Quantity = i * 10 % 7 % i,
                Price = i * 0.5 % 3
            }).ToList();
        return (List<GridDataItem>)Session[key];
    }
}
protected void Page_Load(object sender, EventArgs e) {
    Grid.DataSource = GridData;
    Grid.DataBind();
}
protected void ASPxCardView1_BatchUpdate(object sender, DevExpress.Web.Data.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 void ASPxCardView1_CardInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
    InsertNewItem(e.NewValues);
    CancelEditing(e);
}
protected void ASPxCardView1_CardUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
    UpdateItem(e.Keys, e.NewValues);
    CancelEditing(e);
}
protected void ASPxCardView1_CardDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
    DeleteItem(e.Keys, e.Values);
    CancelEditing(e);
}
protected void ASPxCardView1_CustomUnboundColumnData(object sender, DevExpress.Web.ASPxCardViewColumnDataEventArgs e) {
    if (e.Column.FieldName == "Sum")
    {
        decimal price = Convert.ToDecimal(e.GetListSourceFieldValue("Price"));
        int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));

        e.Value = price * quantity;
    }
}
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.Quantity = Convert.ToInt32(values["Quantity"]);
    item.Price = Convert.ToDouble(values["Price"]);
}
protected void CancelEditing(CancelEventArgs e) {
    e.Cancel = true;
    Grid.CancelEdit();
}
public class GridDataItem {
    public int ID { get; set; }
    public int Quantity { get; set; }
    public double Price { get; set; }
}

Default.aspx.vb

Protected ReadOnly Property GridData() As List(Of GridDataItem)
    Get
        Dim key = "34FAA431-CF79-4869-9488-93F6AAE81263"
        If (Not IsPostBack) OrElse Session(key) Is Nothing Then
            Session(key) = Enumerable.Range(1, 100).Select(Function(i) New GridDataItem With {.ID = i, .Quantity = i * 10 Mod 7 Mod i, .Price = i * 0.5 Mod 3}).ToList()
        End If
        Return DirectCast(Session(key), List(Of GridDataItem))
    End Get
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Grid.DataSource = GridData
    Grid.DataBind()
End Sub
Protected Sub ASPxCardView1_BatchUpdate(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataBatchUpdateEventArgs)
    For Each args In e.InsertValues
        InsertNewItem(args.NewValues)
    Next args
    For Each args In e.UpdateValues
        UpdateItem(args.Keys, args.NewValues)
    Next args
    For Each args In e.DeleteValues
        DeleteItem(args.Keys, args.Values)
    Next args

    e.Handled = True
End Sub
Protected Sub ASPxCardView1_CardInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
    InsertNewItem(e.NewValues)
    CancelEditing(e)
End Sub
Protected Sub ASPxCardView1_CardUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
    UpdateItem(e.Keys, e.NewValues)
    CancelEditing(e)
End Sub
Protected Sub ASPxCardView1_CardDeleting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
    DeleteItem(e.Keys, e.Values)
    CancelEditing(e)
End Sub
Protected Sub ASPxCardView1_CustomUnboundColumnData(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewColumnDataEventArgs)
    If e.Column.FieldName = "Sum" Then
        Dim price As Decimal = Convert.ToDecimal(e.GetListSourceFieldValue("Price"))
        Dim quantity As Integer = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"))

        e.Value = price * quantity
    End If
End Sub
Protected Function InsertNewItem(ByVal newValues As OrderedDictionary) As GridDataItem
    Dim item = New GridDataItem() With {.ID = GridData.Count}
    LoadNewValues(item, newValues)
    GridData.Add(item)
    Return item
End Function
Protected Function UpdateItem(ByVal keys As OrderedDictionary, ByVal newValues As OrderedDictionary) As GridDataItem

    Dim id_Renamed = Convert.ToInt32(keys("ID"))
    Dim item = GridData.First(Function(i) i.ID = id_Renamed)
    LoadNewValues(item, newValues)
    Return item
End Function
Protected Function DeleteItem(ByVal keys As OrderedDictionary, ByVal values As OrderedDictionary) As GridDataItem

    Dim id_Renamed = Convert.ToInt32(keys("ID"))
    Dim item = GridData.First(Function(i) i.ID = id_Renamed)
    GridData.Remove(item)
    Return item
End Function
Protected Sub LoadNewValues(ByVal item As GridDataItem, ByVal values As OrderedDictionary)
    item.Quantity = Convert.ToInt32(values("Quantity"))
    item.Price = Convert.ToDouble(values("Price"))
End Sub
Protected Sub CancelEditing(ByVal e As CancelEventArgs)
    e.Cancel = True
    Grid.CancelEdit()
End Sub
Public Class GridDataItem
    Public Property ID() As Integer
    Public Property Quantity() As Integer
    Public Property Price() As Double
End Class