Grid View for ASP.NET Web Forms - How to implement an edit item template in batch mode

This example demonstrates how to create an edit item template, add an editor to the template, and configure the grid's cell edit functionality in batch mode.

Overview

Follow the steps below:

1. Specify a column's EditItemTemplate property and add an editor to the template.

   <dx:GridViewDataColumn FieldName="C1">
       <EditItemTemplate>
           <dx:ASPxSpinEdit ID="C1_spinEdit" runat="server" ClientInstanceName="C1spinEdit" Width="100%" />
       </EditItemTemplate>
   </dx:GridViewDataColumn>

2. Handle the grid's client-side BatchEditStartEditing event and do the following in the handler:

   • Use the rowValues argument property to get the value of the processed cell.
   • Call the editor's SetValue method to assign the cell value to the editor.
   • Focus the editor.

   function Grid_BatchEditStartEditing(s, e) {
       var templateColumn = s.GetColumnByField("C1");
       if (!e.rowValues.hasOwnProperty(templateColumn.index))
           return;
       var cellInfo = e.rowValues[templateColumn.index];
       C1spinEdit.SetValue(cellInfo.value);
       if (e.focusedColumn === templateColumn)
           C1spinEdit.Focus();
   }

3. Handle the grid's client-side BatchEditEndEditing event. In the handler, get the editor's value and use the rowValues argument property to assign this value to the processed cell.

   function Grid_BatchEditEndEditing(s, e) {
       var templateColumn = s.GetColumnByField("C1");
       if (!e.rowValues.hasOwnProperty(templateColumn.index))
           return;
       var cellInfo = e.rowValues[templateColumn.index];
       cellInfo.value = C1spinEdit.GetValue();
       cellInfo.text = C1spinEdit.GetText();
       C1spinEdit.SetValue(null);
   }

4. Handle the grid's client-side BatchEditRowValidating event. In the handler, use the validationInfo argument property to define whether the entered data is valid and specify an error text string for invalid data cells.

   function Grid_BatchEditRowValidating(s, e) {
       var templateColumn = s.GetColumnByField("C1");
       var cellValidationInfo = e.validationInfo[templateColumn.index];
       if (!cellValidationInfo) return;
       var value = cellValidationInfo.value;
       if (!ASPxClientUtils.IsExists(value) || ASPxClientUtils.Trim(value) === "") {
           cellValidationInfo.isValid = false;
           cellValidationInfo.errorText = "C1 is required";
       }
   }

5. Handle the editor's client-side KeyDown and LostFocus events to emulate the editor behavior when a user presses a key or clicks outside the editor.

Note
When you implement an edit item template, the control does not update the data source automatically. Handle the grid's server-side RowUpdating, RowInserting, and RowDeleting events to update the data source manually.

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Grid in Batch Edit Mode
• Grid View Templates
• EditItemTemplate

More Examples

• Grid View for ASP.NET MVC - How to implement an edit item template in batch mode

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)