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 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.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 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. The BatchEditRowValidating event allows validating the grid's cell based on the entered value:

[JScript]
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. 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 === ASPx.Key.Esc){               var cellInfo = grid.batchEditApi.GetEditCellInfo();                window.setTimeout(function(){                    grid.SetFocusedCell(cellInfo.rowVisibleIndex, cellInfo.column.index);               }, 0);                s.GetInputElement().blur();               return;           }           if(keyCode !== ASPx.Key.Tab && keyCode !== ASPx.Key.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