GridView - Batch Editing - A simple implementation of an EditItem template

This example demonstrates how to create a custom editor inside column's DataItem template when GridView is in Batch Edit mode.

You can implement the EditItem template for a column by performing the following steps:

1. Specify column's EditItem template:

[C#]
       settings.Columns.Add(column=>       {           column.FieldName="C1";           column.SetEditItemTemplateContent(c=>           {               @Html.DevExpress().SpinEdit(spinSettings=>               {                   spinSettings.Name="C1spinEdit";                   spinSettings.Width=System.Web.UI.WebControls.Unit.Percentage(100);                   spinSettings.Properties.ClientSideEvents.KeyDown="C1spinEdit_KeyDown";                   spinSettings.Properties.ClientSideEvents.LostFocus="C1spinEdit_LostFocus";               }).Render();           });       });

2. Handle grid's client-side BatchEditStartEditing event to set the grid's cell values to the editor. It is possible to get the focused cell value using the e.rowValues property:

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

3. Handle the BatchEditEndEditing event to pass the value entered in the editor to the grid's cell:

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

4. The BatchEditRowValidating event allows validating the grid's cell based on the entered value:

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

 
5. Finally, handle the editor's client-side KeyDown and LostFocus events to emulate the behavior of standard grid editors when an end-user uses a keyboard or mouse:

[JScript]
var preventEndEditOnLostFocus = false;function C1spinEdit_KeyDown(s, e){var keyCode = ASPxClientUtils.GetKeyCode(e.htmlEvent);if(keyCode !== ASPxKey.Tab && keyCode !== ASPxKey.Enter)return;var moveActionName = e.htmlEvent.shiftKey ? "MoveFocusBackward" : "MoveFocusForward";if(grid.batchEditApi[moveActionName]()){
                ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);
                preventEndEditOnLostFocus = true;}}function C1spinEdit_LostFocus(s, e){if(!preventEndEditOnLostFocus)
                grid.batchEditApi.EndEdit();
            preventEndEditOnLostFocus = false;}

 
 
See Also:
ASPxGridView - Batch Editing - A simple implementation of an EditItem template 
GridView - Batch Editing - A simple implementation of an EditItemTemplate with client-side unobtrusive validation