ASPxClientGridView.BatchEditStartEditing Event

Fires when a cell/row switches to batch edit mode and allows you to disable cell/row editing.

Declaration

BatchEditStartEditing: ASPxClientEvent<ASPxClientGridViewBatchEditStartEditingEventHandler<ASPxClientGridView>>

Event Data

The BatchEditStartEditing event's data class is ASPxClientGridViewBatchEditStartEditingEventArgs. 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 grid column that owns a cell that is about to be edited.
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 are about to be edited.

Remarks

The BatchEditStartEditing event fires in the following cases:

• A user clicks a focused cell or the Edit button.
• You call the BatchEditApi.StartEdit or BatchEditApi.StartEditByKey method.
• You call the grid’s client-side StartEditRow(visibleIndex) or StartEditRowByKey(key) method.
• A user clicks the New button.
• You call the BatchEditApi.AddNewRow or the grid’s client-side AddNewRow method.

The rowValues argument property allows you to get information about the edited row and define values for cells in edit mode. The data cells are specified by the column indexes.

rowValues = {
    2: {value: 'Maria Anders', text: 'Maria Anders'}
    3: {value: 'Alfreds Futterkiste', text: 'Alfreds Futterkiste'}
    4: {value: 'Germany', text: 'Germany'}
}

Disable Cell or Row Editing

In the BatchEditStartEditing event handler, you can set the cancel argument property to true to disable cell/row editing.

The following example demonstrates how to disable the current cell editing and switch a particular cell to edit mode. Note that in this example, a StartEdit(visibleIndex, columnIndex) method call has no effect if the EditMode property is set to Row.

ASPX

<dx:ASPxGridView ID="Grid" runat="server" ClientInstanceName="ClientGrid" KeyFieldName="CustomerID"
    AutoGenerateColumns="False">
    <Columns>
        <!-- ... -->
        <dx:GridViewDataTextColumn FieldName="ContactName" />
        <dx:GridViewDataTextColumn FieldName="CompanyName" />
        <dx:GridViewDataTextColumn FieldName="Country" />
    </Columns>
    <SettingsEditing Mode="Batch" />
    <ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing"/>
</dx:ASPxGridView>

JS

function OnBatchEditStartEditing(s, e) {
    if (e.focusedColumn.fieldName === 'ContactName') {
        e.cancel = true;

        var columnIndex = s.GetColumnByField('CompanyName').index;
        window.setTimeout(function () {
            s.batchEditApi.StartEdit(e.visibleIndex, columnIndex);
        }, 0);
    }               
}

When the EditMode property is set to Row, use the rowValues argument property to disable a particular cell editing – delete this cell value from the hashtable of values.

ASPX

<dx:ASPxGridView ID="Grid" runat="server" ClientInstanceName="ClientGrid" KeyFieldName="CustomerID"
    AutoGenerateColumns="False">
    <Columns>
        <!-- ... -->
        <dx:GridViewDataTextColumn FieldName="ContactName" />
        <!-- ... -->
    </Columns>
    <SettingsEditing Mode="Batch">
        <BatchEditSettings EditMode="Row" />
    </SettingsEditing>
    <ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing"/>
</dx:ASPxGridView>

JS

function OnBatchEditStartEditing(s, e) {
    var columnIndex = ClientGrid.GetColumnByField('ContactName').index;
    delete e.rowValues[columnIndex];
}

Implement Clone Functionality in Batch Edit Mode

This example demonstrates how to implement a custom Copy button that allows a user to clone a grid row in batch edit mode:

View Example: How to implement clone functionality in batch edit mode

To implement this functionality, follow the steps below:

1. Create a custom command button and handle the grid’s client-side CustomButtonClick event.

   ASPX

   <Columns>
       <dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true">
           <CustomButtons>
               <dx:GridViewCommandColumnCustomButton ID="CopyButton" Text="Copy"></dx:GridViewCommandColumnCustomButton>
           </CustomButtons>
       </dx:GridViewCommandColumn>
       <!-- ... -->
   </Columns>
   <SettingsEditing Mode="Batch" />
   <ClientSideEvents BatchEditStartEditing="OnStartEdit" CustomButtonClick="OnCustomButtonClick" />
   

2. In the CustomButtonClick event handler, call the grid’s AddNewRow method to add a new row.

   JS

   function OnCustomButtonClick(s, e) {
       if (e.buttonID == "CopyButton") {
           index = e.visibleIndex;
           copyFlag = true;
           s.AddNewRow();
       }
   }
   

3. Handle the client-side BatchEditStartEditing event to insert values of the previous row into the newly created row.

   Use the rowValues argument property to define values for cells in edit mode (every cell in Row edit mode and the focused cell in Cell edit mode) and the BatchEditApi.SetCellValue method to assign values to cells that are not in edit mode (unfocused cells in Cell edit mode).

   JS

   function OnStartEdit(s, e) {
       if (copyFlag) {
           copyFlag = false;
           for (var i = 0; i < s.GetColumnCount() ; i++) {
               var column = s.GetColumn(i);
               if (column.visible == false || column.fieldName == undefined)
                   continue;
               ProcessCells(rbl.GetSelectedIndex(), e, column, s);
           }
       }
   }
   function ProcessCells(selectedIndex, e, column, s) {
       var isCellEditMode = selectedIndex == 0;
       var cellValue = s.batchEditApi.GetCellValue(index, column.fieldName);
   
       if(isCellEditMode) {
           if(column.fieldName == e.focusedColumn.fieldName)
               e.rowValues[column.index].value = cellValue;
           else
               s.batchEditApi.SetCellValue(e.visibleIndex, column.fieldName, cellValue);
       } else {
           e.rowValues[column.index].value = cellValue;
       }
   }
   

MVC Example

View Example: GridView for MVC - How to implement clone functionality in batch edit mode