This example demonstrates how to create a templated column, add an editor to the template, and update the data source on a callback when a user changes the editor's value.
Note
In v13.2 and higher, you can use the batch edit functionality to edit grid data on the client and send it to the server on a single request: Grid in Batch Edit Mode.
Overview
Specify a column's DataItemTemplate property and add an editor to the template. Handle the editor's server-side Init
event and do the following in the handler:
- Access the template container to get the row's key value and the column's field name.
- Assign a client-side
ValueChanged
event handler to the editor and pass the corresponding grid values as parameters.
ASPx<dx:GridViewDataTextColumn FieldName="Item" VisibleIndex="2">
<DataItemTemplate>
<dx:ASPxComboBox ID="cmbItem" runat="server" ValueType="System.Int32" Value='<%#
Eval("Item") %>' OnInit="editor_Init">
<Items>
<!-- ... -->
</Items>
</dx:ASPxComboBox>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
C#protected void editor_Init(object sender, EventArgs e) {
ASPxEdit txt = sender as ASPxTextEdit;
GridViewDataItemTemplateContainer container = txt.NamingContainer as GridViewDataItemTemplateContainer;
txt.SetClientSideEventHandler("ValueChanged", String.Format(CallbackArgumentFormat,
container.KeyValue,
container.Column.FieldName));
}
In the editor's ValueChanged
event handler, get the new editor's value and pass it to the server on a callback. To send a callback to the server, use a callback control and call its PerformCallback
method. In the server-side Callback
event handler, assign the editor's value to the XPO object and update the data source.
JavaScript function OnValueChanged(s, e, key, field) {
var value = s.GetValue();
if(s instanceof ASPxClientTextBox) { // encode text
s.SetText(encodeHtml(s.GetText()));
value = s.GetText();
}
if(s instanceof ASPxClientDateEdit)
value = s.GetText();
var param = key + "|" + field + "|" + value;
cb.PerformCallback(param);
}
C#protected void cb_Callback(object source, DevExpress.Web.CallbackEventArgs e) {
String[] p = e.Parameter.Split('|');
Int32 key = Convert.ToInt32(p[0]);
String field = p[1];
Object value = p[2];
MyObject obj = session.GetObjectByKey<MyObject>(key);
switch (field) {
case "Title":
if (value.ToString() == "null")
value = String.Empty;
break;
case "Item":
value = Convert.ToInt32(value);
break;
case "SomeDate":
DateTime result = DateTime.Now;
if (DateTime.TryParse(value.ToString(), out result))
value = result;
else
value = DateTime.Now;
break;
}
obj.SetMemberValue(field, value);
obj.Save();
}
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.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Xpo.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Xpo" 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>How to perform ASPxGridView instant updating using different editors in the DataItem
template</title>
<script type="text/javascript">
function encodeHtml(text) {
if (text === undefined || text === null)
return "";
var replacements = [
[/&/g, '&x;'], [/&/g, '&'], [/"/g, '"x;'], [/"/g, '"'],
[/</g, '<x;'], [/</g, '<'], [/>/g, '>x;'], [/>/g, '>']
];
for (var i = 0; i < replacements.length; i++) {
var repl = replacements[i];
text = text.replace(repl[0], repl[1]);
}
return text;
}
function OnValueChanged(s, e, key, field) {
var value = s.GetValue();
if (s instanceof ASPxClientTextBox) { // encode text
s.SetText(encodeHtml(s.GetText()));
value = s.GetText();
}
if (s instanceof ASPxClientDateEdit)
value = s.GetText();
var param = key + "|" + field + "|" + value;
cb.PerformCallback(param);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="xds"
KeyFieldName="Oid" EnableRowsCache="false">
<Columns>
<dx:GridViewDataTextColumn FieldName="Oid" ReadOnly="True" VisibleIndex="0" SortIndex="0"
SortOrder="Ascending">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Title" VisibleIndex="1">
<DataItemTemplate>
<dx:ASPxTextBox ID="txtTitle" runat="server" Width="170px" Value='<%# Eval("Title") %>'
OnInit="editor_Init">
</dx:ASPxTextBox>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Item" VisibleIndex="2">
<DataItemTemplate>
<dx:ASPxComboBox ID="cmbItem" runat="server" ValueType="System.Int32" Value='<%# Eval("Item") %>'
OnInit="editor_Init">
<Items>
<dx:ListEditItem Value="0" Text="Zero" />
<dx:ListEditItem Value="1" Text="One" />
<dx:ListEditItem Value="2" Text="Two" />
</Items>
</dx:ASPxComboBox>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="SomeDate" VisibleIndex="2">
<DataItemTemplate>
<dx:ASPxDateEdit ID="edtDate" runat="server" Value='<%# Eval("SomeDate") %>' OnInit="editor_Init">
</dx:ASPxDateEdit>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<dx:XpoDataSource ID="xds" runat="server" TypeName="MyObject">
</dx:XpoDataSource>
<dx:ASPxCallback ID="cb" runat="server" ClientInstanceName="cb" OnCallback="cb_Callback">
</dx:ASPxCallback>
</div>
</form>
</body>
</html>
C#using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.Xpo;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page
{
Session session = XpoHelper.GetNewSession();
const String CallbackArgumentFormat = "function (s, e) {{ OnValueChanged(s,e, {0}, '{1}'); }}";
protected void Page_Init(object sender, EventArgs e)
{
xds.Session = session;
}
protected void editor_Init(object sender, EventArgs e)
{
ASPxEdit txt = sender as ASPxTextEdit;
GridViewDataItemTemplateContainer container = txt.NamingContainer as GridViewDataItemTemplateContainer;
txt.SetClientSideEventHandler("ValueChanged", String.Format(CallbackArgumentFormat,
container.KeyValue,
container.Column.FieldName));
}
protected void cb_Callback(object source, DevExpress.Web.CallbackEventArgs e)
{
String[] p = e.Parameter.Split('|');
Int32 key = Convert.ToInt32(p[0]);
String field = p[1];
Object value = p[2];
MyObject obj = session.GetObjectByKey<MyObject>(key);
switch (field)
{
case "Title":
if (value.ToString() == "null")
value = String.Empty;
break;
case "Item":
value = Convert.ToInt32(value);
break;
case "SomeDate":
DateTime result = DateTime.Now;
if (DateTime.TryParse(value.ToString(), out result))
value = result;
else
value = DateTime.Now;
break;
}
obj.SetMemberValue(field, value);
obj.Save();
}
}