Grid View for ASP.NET MVC - 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. Call a column's SetEditItemTemplateContent method and add an editor to the template.

   settings.Columns.Add(column => {
       column.FieldName = "C1";
       column.SetEditItemTemplateContent(c => {
           @Html.DevExpress().SpinEdit(spinSettings => {
               spinSettings.Name = "C1spinEdit";
               // ...
           }).Render();
       });
   });

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.

Files to Review

• _GridViewPartial.cshtml
• Index.cshtml

Documentation

• Batch Edit Mode
• SetEditItemTemplateContent

More Examples

• Grid View for ASP.NET Web Forms - 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)