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:
- Specify a column's EditItemTemplate property and add an editor to the template.ASPx
<dx:GridViewDataColumn FieldName="C1"> <EditItemTemplate> <dx:ASPxSpinEdit ID="C1_spinEdit" runat="server" ClientInstanceName="C1spinEdit" Width="100%" /> </EditItemTemplate> </dx:GridViewDataColumn>
- 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.
JavaScriptfunction 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(); }
- 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.JavaScript
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); }
- 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.JavaScript
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"; } }
- Handle the editor's client-side
KeyDown
andLostFocus
events to emulate the editor behavior when a user presses a key or clicks outside the editor.
Note
When you implement an edit item template, the control does not update the data source automatically. Handle the grid's server-side RowUpdating, RowInserting, and RowDeleting events to update the data source manually.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v22.1, Version=22.1.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!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">
<head runat="server">
<title></title>
<script type="text/javascript">
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();
}
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);
}
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";
}
}
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;
}
</script>
</head>
<body>
<form id="frmMain" runat="server">
<dx:ASPxGridView ID="Grid" runat="server" KeyFieldName="ID" Width="600" OnBatchUpdate="Grid_BatchUpdate"
OnRowInserting="Grid_RowInserting" OnRowUpdating="Grid_RowUpdating" OnRowDeleting="Grid_RowDeleting" ClientInstanceName="grid" Theme="Office365">
<ClientSideEvents BatchEditStartEditing="Grid_BatchEditStartEditing" BatchEditEndEditing="Grid_BatchEditEndEditing"
BatchEditRowValidating="Grid_BatchEditRowValidating" />
<Columns>
<dx:GridViewCommandColumn ShowNewButtonInHeader="true" Width="100" ShowDeleteButton="true" />
<dx:GridViewDataColumn Width="100" FieldName="C1">
<EditItemTemplate>
<dx:ASPxSpinEdit ID="C1_spinEdit" runat="server" ClientInstanceName="C1spinEdit" Width="100%">
<ClientSideEvents KeyDown="C1spinEdit_KeyDown" LostFocus="C1spinEdit_LostFocus" />
</dx:ASPxSpinEdit>
</EditItemTemplate>
</dx:GridViewDataColumn>
<dx:GridViewDataSpinEditColumn Width="100" FieldName="C2" />
<dx:GridViewDataTextColumn Width="100" FieldName="C3" />
<dx:GridViewDataCheckColumn Width="100" FieldName="C4" />
<dx:GridViewDataDateColumn Width="100" FieldName="C5" />
</Columns>
<SettingsPager PageSize="3" />
<SettingsEditing Mode="Batch" />
</dx:ASPxGridView>
</form>
</body>
</html>
C#using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using DevExpress.Web.Data;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page {
protected List<GridDataItem> GridData {
get {
var key = "34FAA431-CF79-4869-9488-93F6AAE81263";
if(!IsPostBack || Session[key] == null)
Session[key] = Enumerable.Range(0, 100).Select(i => new GridDataItem {
ID = i,
C1 = i % 2,
C2 = i * 0.5 % 3,
C3 = "C3 " + i,
C4 = i % 2 == 0,
C5 = new DateTime(2013 + i, 12, 16)
}).ToList();
return (List<GridDataItem>)Session[key];
}
}
protected void Page_Load(object sender, EventArgs e) {
Grid.DataSource = GridData;
Grid.DataBind();
}
protected void Grid_RowInserting(object sender, ASPxDataInsertingEventArgs e) {
InsertNewItem(e.NewValues);
CancelEditing(e);
}
protected void Grid_RowUpdating(object sender, ASPxDataUpdatingEventArgs e) {
UpdateItem(e.Keys, e.NewValues);
CancelEditing(e);
}
protected void Grid_RowDeleting(object sender, ASPxDataDeletingEventArgs e) {
DeleteItem(e.Keys, e.Values);
CancelEditing(e);
}
protected void Grid_BatchUpdate(object sender, ASPxDataBatchUpdateEventArgs e) {
foreach(var args in e.InsertValues)
InsertNewItem(args.NewValues);
foreach(var args in e.UpdateValues)
UpdateItem(args.Keys, args.NewValues);
foreach(var args in e.DeleteValues)
DeleteItem(args.Keys, args.Values);
e.Handled = true;
}
protected GridDataItem InsertNewItem(OrderedDictionary newValues) {
var item = new GridDataItem() { ID = GridData.Count };
LoadNewValues(item, newValues);
GridData.Add(item);
return item;
}
protected GridDataItem UpdateItem(OrderedDictionary keys, OrderedDictionary newValues) {
var id = Convert.ToInt32(keys["ID"]);
var item = GridData.First(i => i.ID == id);
LoadNewValues(item, newValues);
return item;
}
protected GridDataItem DeleteItem(OrderedDictionary keys, OrderedDictionary values) {
var id = Convert.ToInt32(keys["ID"]);
var item = GridData.First(i => i.ID == id);
GridData.Remove(item);
return item;
}
protected void LoadNewValues(GridDataItem item, OrderedDictionary values) {
item.C1 = Convert.ToInt32(values["C1"]);
item.C2 = Convert.ToDouble(values["C2"]);
item.C3 = Convert.ToString(values["C3"]);
item.C4 = Convert.ToBoolean(values["C4"]);
item.C5 = Convert.ToDateTime(values["C5"]);
}
protected void CancelEditing(CancelEventArgs e) {
e.Cancel = true;
Grid.CancelEdit();
}
public class GridDataItem {
public int ID { get; set; }
public int C1 { get; set; }
public double C2 { get; set; }
public string C3 { get; set; }
public bool C4 { get; set; }
public DateTime C5 { get; set; }
}
}