Grid View for ASP.NET Web Forms - How to calculate templated column values on the client

This example demonstrates how to create an unbound column (Total) that changes its value based on templated column values.

Overview

Follow the steps below to calculate templated column values on the client:

1. Specify a data column's DataItemTemplate property, add a spin editor to the template, and bind the editor to the corresponding column values.

   <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="5">
       <DataItemTemplate>
           <dx:ASPxSpinEdit ID="seUnitInStock" runat="server" Number="0" Value='<%# Bind("UnitsInStock") %>'
               OnInit="seQuantity_Init" />
       </DataItemTemplate>
   </dx:GridViewDataTextColumn>

2. Create an unbound column to display the calculation results, specify the column's DataItemTemplate property, and add a text box editor to the template.

   <dx:GridViewDataTextColumn FieldName="Total" VisibleIndex="6" UnboundType="Decimal">
       <DataItemTemplate>
           <dx:ASPxTextBox ID="tbTotal" runat="server" ClientEnabled="False" OnInit="tbTotal_Init" />
       </DataItemTemplate>
       <!-- ... -->
   </dx:GridViewDataTextColumn>

3. Handle the grid's server-side CustomUnboundColumnData event to calculate unbound column values.

   protected void grdProducts_CustomUnboundColumnData(object sender, DevExpress.Web.ASPxGridViewColumnDataEventArgs e) {
       if(e.Column.FieldName == "Total") {
           decimal price = (decimal)e.GetListSourceFieldValue("UnitPrice");
           int quantity = Convert.ToInt32(e.GetListSourceFieldValue("UnitsInStock"));
           e.Value = price * quantity;
       }
   }

4. Handle the spin editor's client-side NumberChanged event to calculate the resulting values of the unbound column. Use a hidden field control to store the calculated values.

   function OnCalculateTotal(visibleIndex, keyValue) {
       var controlCollection = ASPxClientControl.GetControlCollection();
       var unitPrice = controlCollection.GetByName("seClientPrice_" + visibleIndex).GetNumber();
       var unitsInStock = controlCollection.GetByName("seClientQuantity_" + visibleIndex).GetNumber();
       var total = unitPrice * unitsInStock;
       controlCollection.GetByName("tbClientTotal_" + visibleIndex).SetText(total.toFixed(2));
       hfChanges.Set("Row_" + visibleIndex.toString(), keyValue + "|" + unitPrice + "|" + unitsInStock);
   }

   <dx:ASPxHiddenField ID="hf" runat="server" ClientInstanceName="hfChanges" />

   protected void seQuantity_Init(object sender, EventArgs e) {
       ASPxSpinEdit spinEdit = (ASPxSpinEdit)sender;
       GridViewDataItemTemplateContainer container = spinEdit.NamingContainer as GridViewDataItemTemplateContainer;
       spinEdit.ClientInstanceName = String.Format("seClientQuantity_{0}", container.VisibleIndex);
       spinEdit.ClientSideEvents.NumberChanged = String.Format("function(s, e) {{ OnCalculateTotal({0},{1}); }}", container.VisibleIndex, container.KeyValue);
   }

5. To update the data source, send a postback to the server on a button click.

Files to Review

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

Documentation

• Grid View Templates
• Unbound Columns

More Examples

• How to calculate bound and unbound column values on the client

Does this example address your development requirements/objectives?

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