Before You Begin:
The WebCalcManager has the ability to do calculations inside a WebGrid column. This walk through guides you through the steps on how to this.
Follow These Steps:
- Set up a project with WebCalcManager and WebGrid. Start by creating a new ASP.NET Application in Visual Studio, in either Visual Basic .NET or C#. Add an UltraWebCalcManager and UltraWebGrid to the form.
-
Next you need to data bind the WebGrid, for information on how to do this you can review the Binding to the Northwind Flat Data topic. This topic uses the Order Details table in the Northwind database for its data. The Northwind database (Nwind.mdb) is available in the NetAdvantage for .NET SDK installation in the following folder, depending on your operating system:
- XP -- C:\Documents and Settings\All Users\Documents\Infragistics\NetAdvantage for .NET 2007 Vol. 2 CLR 2.0\Samples\ASP.NET\App_Data
- Vista -- C:\Users\Public\Documents\Infragistics\NetAdvantage for .NET 2007 Vol. 2 CLR 2.0\Samples\ASP.NET\App_Data
- Now that the grid's data source is set up, the next thing to do is to create an unbound column for the calculation. Add an unbound column to the WebGrid. Right-click the WebGrid and select "Quick Design" to launch the grid designer.
- In the WebGrid designer, drill down to the node: "Basic Settings > Data Structure > Edit Data Structure > Bands and Columns." Select this node to open the Bands and Columns designer in the right pane.
- On the toolbar on the right side of the Bands and Columns designer, click the "Add New" button and select the "Add New Column" menu item.
- Change the Key of the Column to "Item Total". Change the Header.Caption of the column to "Item Total". Change the DataType of the column to System.Decimal.
- Just to make things look a little neater, set the Format property on the UnitPrice and Item Total columns to Currency, and set the Format of the Discount column to "p0" to make it show as a percentage. Also, set the Hidden property of the OrderID and ProductID columns to True.
- To create a Formula for the unbound column go to the Formula property of the Item Total column and click the ellipsis (...) to bring up the FormulaBuilder.
On the left-hand side you will see the Operands list. Click on the "Controls" node and press the asterisk (*) on the numeric keypad of your keyboard. This will expand the entire tree. You will see the UltraWebGrid, its single band (Order Details), and the six columns in the grid.
Notice that the unbound column in the list is grayed out. This is because "Item Total" is the column whose formula is being edited. A formula that references itself creates a circular reference, and so the node is disabled.
- The formula for this column will multiply UnitPrice times Quantity and then apply the Discount as a percentage. The first thing to do is multiply UnitPrice times Quantity. There are two ways to do this: the standard multiplication operator (*), or the product function. We'll show you the standard multiplication operator way.
The first thing to do is insert a reference to the UnitPrice column into the Formula window. There are three ways to do this: -
- Double-click on the UnitPrice node in the Operands tree.
- Right-click on the Formula window and select "Insert Operand" and then drill down the menus to get to UnitPrice.
- Type directly into the Formula window.
- Next, add the multiplication operator. Either click the * button (in the row of buttons under the Formula window), or type an asterisk at the appropriate place.
- Then add the Quantity reference the same way you added UnitPrice.
Notice that the Formula status window on the bottom right shows that the Formula has compiled successfully. This indicates that the formula is valid as-is, but it does not yet account for the discount.
- There are a variety of ways to design this formula. Finish it up by multiplying 1 minus the discount. Here are some examples of what your formula might look like; these are all valid:
- When you are done, click OK on the FormulaBuilder dialog. The Formula you created is now displayed in the Formula property of the grid columns.
Click Apply to save your settings you've made in the designer. Then click OK to exit the grid designer.
- Run the application and observe the results.
What You Accomplished:
This walk through was designed to guide you through the process of using the WebCalcManager to create a calculated column in the WebGrid.
