This example demonstrates how to create a custom editor inside column's DataItem template when ASPxGridView is in Batch Edit mode. Since, ASPxGridView performs batch editing on the client side, we cannot process or pass values from editors placed inside templates on the server side. Thus, all processing will be performed on the client side.
You can implement the EditItem template for a column by performing the following steps:
1. Specify column's EditItem template:
[ASPx]<dx:GridViewDataColumnFieldName="C1"><EditItemTemplate> <dx:ASPxSpinEditID="C1_spinEdit"runat="server"ClientInstanceName="C1spinEdit"Width="100%"> </dx:ASPxSpinEdit></EditItemTemplate></dx:GridViewDataColumn>
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:
GridView - Batch Editing - A simple implementation of an EditItem template