Grid View for ASP.NET Web Forms - How to use an edit item and data item templates in batch mode

This example demonstrates how to create a column's template, add a rating control to the template, and configure the grid's cell edit functionality in batch mode.

Overview:

Follow the steps below to configure the grid's edit functionality for templated cells in batch mode:

1. Create the Grid View control, set its Mode property to Batch, and enable the AllowRegularDataItemTemplate property.

   <dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="ID" ClientInstanceName="grid"
       DataSourceID="ObjectDataSource1">	
       <!-- ... -->
       <SettingsEditing Mode="Batch">
           <BatchEditSettings EditMode="Cell" AllowRegularDataItemTemplate="true"
           StartEditAction="FocusedCellClick" />
       </SettingsEditing>
       <ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing"
           BatchEditEndEditing="OnBatchEditEndEditing"
           FocusedCellChanging="OnFocusedCellChanging" Init="OnGridInit" />
   </dx:ASPxGridView>

2. Specify a column's DataItemTemplate and EditItemTemplate properties, add rating controls to the templates, and specify their ClientInstanceName properties.

   <DataItemTemplate>
       <dx:ASPxRatingControl ID="ratingControl" runat="server"
           ClientInstanceName='<%# "DataItemRateControl"+ Container.VisibleIndex %>' 
           ItemCount="5" Value='<%# Convert.ToInt32(Eval("RatingValue")) %>'>
           <ClientSideEvents ItemClick="OnItemMouseClick_DataItem" ItemMouseOver="OnItemMouseOver_DataItem"
               ItemMouseOut="OnItemMouseOut_DataItem" />
       </dx:ASPxRatingControl>
   </DataItemTemplate>
   <EditItemTemplate>
       <dx:ASPxRatingControl ID="ratingControl" runat="server" ClientInstanceName="EditItemRateControl" ItemCount="5">
           <ClientSideEvents ItemClick="OnItemMouseClick_EditItem" Init="OnRateControlInit_EditItem" />
       </dx:ASPxRatingControl>
   </EditItemTemplate>

3. Handle the grid's client-side BatchEditStartEditing event to assign the edit value to the rating control. To save this value when editing ends, handle the grid's client-side BatchEditEndEditing event.

   function OnBatchEditStartEditing(s, e) {
       EditItemRateControl.SetValue(e.rowValues[s.GetColumnByField("RatingValue").index].value);
   }
   function OnBatchEditEndEditing(s, e) {
       var templateColumn = s.GetColumnByField("RatingValue");
       if (!e.rowValues.hasOwnProperty(templateColumn.index))
           return;
       var cellInfo = e.rowValues[templateColumn.index];
       cellInfo.value = EditItemRateControl.GetValue();
       SetRateControlValueByRowIndex_DataItem(e.visibleIndex, cellInfo.value);
   }

4. For rating controls, handle their client-side ItemMouseClick events and do the following in handlers:

   • Call the grid's EndEdit method to finish editing after a user clicks a rating control item in the edit item template.
   • Call the grid's SetCellValue method to assign a new value to a rating control item in the data item template.

   function OnItemMouseClick_EditItem(s, e) {
       grid.batchEditApi.EndEdit();
   }
   function OnItemMouseClick_DataItem(s, e) {
       grid.batchEditApi.SetCellValue(currentFocusedCell.itemVisibleIndex, currentFocusedCell.column.index, s.GetValue());
   }

5. To add keyboard navigation to the grid, handle the grid's client-side Init event and add a KeyDown event handler. In this handler, process key codes as follows:

   function OnGridInit(s, e) {
       ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
           return OnKeyDown(evt, s);
       });
   }
   function OnGridViewKeyDown(evt, grid) {
       if (typeof (event) != "undefined" && event != null)
           evt = event;
       if (!grid.InCallback() && NeedProcessDocumentKeyDown(evt)) {
           if (evt.shiftKey && evt.keyCode == 9 /*Shift + tab */) {
               setTimeout(function () {
                   grid.batchEditApi.MoveFocusBackward();
               }, 0);
           } else if (evt.keyCode == 9 /*Tab key*/) {
               setTimeout(function () {
                   grid.batchEditApi.MoveFocusForward();
               }, 0);
           }
       }
   }

6. To add keboard navigation to the rating control, handle its client-side Init event as described in the previous step.

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• BatchEditController.js (VB: BatchEditController.js)

Documentation

• Grid in Batch Edit Mode
• Grid View Templates

More Examples

• Grid View for ASP.NET Web Forms - How to use and modify a control placed in templated column in batch edit mode

Does this example address your development requirements/objectives?

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