ASPxClientGridView.BatchEditEndEditing Event

Fires before a cell/row switches from edit to browse mode.

Declaration

BatchEditEndEditing: ASPxClientEvent<ASPxClientGridViewBatchEditEndEditingEventHandler<ASPxClientGridView>>

Event Data

The BatchEditEndEditing event's data class is ASPxClientGridViewBatchEditEndEditingEventArgs. The following properties provide information specific to this event:

Property	Description
cancel	Specifies whether to cancel the related action (for example, row edit, export). Inherited from ASPxClientCancelEventArgs.
focusedColumn	Gets the column to which the edited cell belongs.
key	Gets the row’s key.
rowValues	Gets a hashtable that maintains information about editable cells.
visibleIndex	Gets the visible index of the row whose cells has been edited.

Remarks

The BatchEditEndEditing event fires in the following cases:

A user ends cell or row editing.
You call the grid’s client-side batchEditApi.EndEdit method.

In the event handler, use the rowValues argument property to get all cell values of an edited row. The cell values are specified by the column indexes.

ASPxGridView.BatchEditMode - EndEditing

rowValues = {
    1: {value: 'Chai', text: 'Chai'}
    2: {value: 'Beverages', text: 'Beverages'}
    3: {value: '40', text: '40'}
}

To leave a cell in edit mode, set the cancel argument property to true.

function OnBatchEditEndEditing(s, e) {
    var columnIndex = e.focusedColumn.index;
    var newValue = e.rowValues[columnIndex].value;
    if (newValue === null)
        e.cancel = true;
}

Select a Modified Row

When the grid raises the BatchEditEndEditing event, the cell value is not updated yet. To select the modified row in the event handler, use the setTimeout function.

ASPX

<dx:ASPxGridView ID="Grid" runat="server" ...>
    <!-- ... -->
    <SettingsEditing Mode="Batch" />
    <ClientSideEvents BatchEditEndEditing="OnBatchEditEndEditing" />
</dx:ASPxGridView>

function OnBatchEditEndEditing(s, e) {
    window.setTimeout(SelectModifiedRows, 0);

    function SelectModifiedRows() {
        if (s.batchEditApi.HasChanges(e.visibleIndex)) {
            s.SelectRowOnPage(e.visibleIndex);
        }
    }
}

Calculate Values Dynamically

The following axample demonstrates how to calculate values dynamically based on other column values in the BatchEditEndEditing event handler:

View Example: How to calculate values dynamically in batch edit mode

To enable this behavior, follow the steps below:

Create an unbound column and set its ShowEditorInBatchEditMode property to false to make the column read-only in batch edit mode.

ASPX

<dx:GridViewDataTextColumn FieldName="Sum" UnboundType="Decimal" ReadOnly="true">
    <Settings ShowEditorInBatchEditMode="false" />
</dx:GridViewDataTextColumn>

In the BatchEditEndEditing event handler, recalculate column values based on the changes and call the SetCellValue(visibleIndex, columnFieldNameOrId, value) method to set the new column value.

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, null, true);
    }, 10);
}