Grid View for ASP.NET Web Forms - How to implement a single cell edit feature

This example demonstrates how to edit a grid cell in batch mode and update the data source on a callback.

Overview

Follow the steps below to configure a single cell's edit functionality:

1. Create the Grid View control, bind it to a data source, and set the grid's Mode property to Batch. Add a callback panel to the page.

   <dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="grid" KeyFieldName="ID">
       <!-- ... -->
       <ClientSideEvents BatchEditEndEditing="onBatchEditEndEditing" />
       <SettingsEditing Mode="Batch">
           <BatchEditSettings StartEditAction="Click" ShowConfirmOnLosingChanges="false" />
       </SettingsEditing>
       <Columns>
           <!-- ... -->
   </dx:ASPxGridView>
   <dx:ASPxCallback ID="ASPxCallback" runat="server" ClientInstanceName="callback" OnCallback="ASPxCallback_Callback">
       <ClientSideEvents CallbackComplete="onEndUpdateCallback" />
   </dx:ASPxCallback>

2. Handle the grid's client-side BatchEditEndEditing event. In the handler, call the BatchEditApi.GetEditCellInfo method to get the value of the edited cell and use the callback panel's PerformCallback method to pass that value to the server.

   function onBatchEditEndEditing(s, e) {
       var cellInfo = s.batchEditApi.GetEditCellInfo();
       setTimeout(function() {
           if (s.batchEditApi.HasChanges(cellInfo.rowVisibleIndex, cellInfo.column.index))
               UpdateEdit(createObject(s, s.GetRowKey(e.visibleIndex), e.rowValues), cellInfo);
       }, 0);
   }
   function UpdateEdit(object, cellInfo) {
       callback.cpCellInfo = cellInfo;
       callback.PerformCallback(JSON.stringify(object));
   }
   
   function createObject(grid, key, values) {
       // ...
       return object;
   }

3. Handle the panel's server-side Callback event to update the data source and specify the resulting text string.

   protected void ASPxCallback_Callback(object source, DevExpress.Web.CallbackEventArgs e) {
       try {
           GridDataItem.UpdateData(JsonConvert.DeserializeObject<GridDataItem>(e.Parameter));
           e.Result = "OK";
       }
       catch(Exception ex) {
           e.Result = ex.Message;
       }
   }

4. To focus the modified cell when server-side validation fails, handle the panel's client-side CallbackComplete event.

Files to Review

• GridDataItem.cs (VB: GridDataItem.vb)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Grid in Batch Edit Mode
• Callbacks

More Examples

• Grid View for ASP.NET MVC - How to implement a single cell edit feature

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)