Example E2333
Visible to All Users

Grid View for ASP.NET Web Forms - How to use template editors to update grid data

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.

Use template editors to update grid data

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

Documentation

More Examples

Example Code

WebSite/Default.aspx
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 = [ [/&amp;/g, '&ampx;'], [/&/g, '&amp;'], [/&quot;/g, '&quotx;'], [/"/g, '&quot;'], [/&lt;/g, '&ltx;'], [/</g, '&lt;'], [/&gt;/g, '&gtx;'], [/>/g, '&gt;'] ]; 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>
WebSite/Default.aspx.cs(vb)
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(); } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.