Skip to main content

ASPxClientCardViewBatchEditEndEditingEventArgs.visibleIndex Property

Gets the visible index of the card whose cells have been edited.

Declaration

visibleIndex: number

Property Value

Type Description
number

The card’s visible index.

Example

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