Skip to content

Latest commit

 

History

History

CS

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Default.aspx
Default.aspx
 
 
Default.aspx.cs
Default.aspx.cs
 
 
T115096.sln
T115096.sln
 
 
licenses.licx
licenses.licx
 
 
readme.htm
readme.htm
 
 
web.config
web.config
 
 

readme.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ASPxGridView - Batch Editing - A simple implementation of an EditItemTemplate - Developer Express Example</title>
<style>
html, body, form 
{
	font-family: Tahoma, Arial, Verdana;
    font-size: small;
    color: #303440;
}
h1 {
	font-size: 125%;
	font-weight: normal;
	color: Black;
	letter-spacing: 101%;
}
</style>
</head>
<body>
<h1>Developer Express Example<br />ASPxGridView - Batch Editing - A simple implementation of an EditItemTemplate</h1>
<p>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:

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



2. Handle grid's client-side BatchEditStartEditing (https://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_BatchEditStartEditingtopic) event to set the grid's cell values to the editor. It is possible to get the focused cell value using the e.rowValues (https://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridViewBatchEditStartEditingEventArgs_rowValuestopic) property:

        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 (https://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_BatchEditEndEditingtopic) event to pass the value entered in the editor to the grid's cell:

        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 (https://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_BatchEditRowValidatingtopic) event allows validating the grid's cell based on the entered value:

        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 (https://documentation.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientTextEdit_KeyDowntopic.aspx) and LostFocus (https://documentation.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_LostFocustopic.aspx) events to emulate the behavior of standard grid editors when an end-user uses a keyboard or mouse:

        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:
http://www.devexpress.com/scid=T115130</p>
<p>You can find sample updates and versions for different programming languages here:<br /><a href="http://www.devexpress.com/example=T115096">http://www.devexpress.com/example=T115096</a>.</p>
</body>
</html>