This example demonstrates how to create an unbound column that calculates the sum of other columns and changes its values on the fly when an end-user changes any grid values using the Batch edit mode.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.v15.2, Version=15.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
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);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="Grid" runat="server" KeyFieldName="ID" OnBatchUpdate="ASPxCardView1_BatchUpdate"
OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" OnCardDeleting="ASPxCardView1_CardDeleting"
OnCustomUnboundColumnData="ASPxCardView1_CustomUnboundColumnData" AutoGenerateColumns="False">
<ClientSideEvents BatchEditEndEditing="OnBatchEditEndEditing" />
<SettingsEditing Mode="Batch">
</SettingsEditing>
<Columns>
<dx:CardViewSpinEditColumn FieldName="Quantity" VisibleIndex="0">
<PropertiesSpinEdit DisplayFormatString="g">
</PropertiesSpinEdit>
</dx:CardViewSpinEditColumn>
<dx:CardViewSpinEditColumn FieldName="Price" VisibleIndex="1">
<PropertiesSpinEdit DisplayFormatString="g">
</PropertiesSpinEdit>
</dx:CardViewSpinEditColumn>
<dx:CardViewTextColumn FieldName="Sum" ReadOnly="True" UnboundType="Decimal" VisibleIndex="2">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowDeleteButton="True" ShowEditButton="True" ShowNewButton="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Quantity">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Price">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Sum">
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
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(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; }
}
}
Imports System
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.ComponentModel
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
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
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.v15.2, Version=15.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
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);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="Grid" runat="server" KeyFieldName="ID" OnBatchUpdate="ASPxCardView1_BatchUpdate"
OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" OnCardDeleting="ASPxCardView1_CardDeleting"
OnCustomUnboundColumnData="ASPxCardView1_CustomUnboundColumnData" AutoGenerateColumns="False">
<ClientSideEvents BatchEditEndEditing="OnBatchEditEndEditing" />
<SettingsEditing Mode="Batch">
</SettingsEditing>
<Columns>
<dx:CardViewSpinEditColumn FieldName="Quantity" VisibleIndex="0">
<PropertiesSpinEdit DisplayFormatString="g">
</PropertiesSpinEdit>
</dx:CardViewSpinEditColumn>
<dx:CardViewSpinEditColumn FieldName="Price" VisibleIndex="1">
<PropertiesSpinEdit DisplayFormatString="g">
</PropertiesSpinEdit>
</dx:CardViewSpinEditColumn>
<dx:CardViewTextColumn FieldName="Sum" ReadOnly="True" UnboundType="Decimal" VisibleIndex="2">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowDeleteButton="True" ShowEditButton="True" ShowNewButton="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Quantity">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Price">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Sum">
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
</div>
</form>
</body>
</html>