CollectionView
CollectionView
Calculated Fields
This sample show how to add calculated fields to CollectionView.
Features
ID
Start
End
Country
Product
Color
Amount2
Discount
Description
Net Revenue
Tax
Active
ID
Start
End
Country
Product
Color
Amount2
Discount
Description
Net Revenue
Tax
Active
1
Jan 25 25
00:00
German
Gadget
Green
$1,030.17
14%
Green Gadget
$885.95
$88.59
2
Feb 25 25
01:30
Italy
Gadget
Green
$3,499.71
13%
Green Gadget
$3,044.75
$304.47
3
Mar 25 25
02:00
China
Gadget
Black
$4,535.49
20%
Black Gadget
$3,628.39
$362.84
4
Apr 25 25
03:30
France
Widget
Green
$432.90
21%
Green Widget
$341.99
$34.20
5
May 25 25
04:00
UK
Widget
Red
$3,355.18
12%
Red Widget
$2,952.56
$295.26
6
Jun 25 25
05:30
France
Gadget
Red
$1,106.71
23%
Red Gadget
$852.17
$85.22
7
Jul 25 25
06:00
US
Widget
Green
$1,408.24
18%
Green Widget
$1,154.76
$115.48
8
Aug 25 25
07:30
Japan
Gadget
Black
$3,077.04
21%
Black Gadget
$2,430.86
$243.09
9
Sep 25 25
08:00
Korea
Widget
Red
$4,068.26
16%
Red Widget
$3,417.34
$341.73
10
Oct 25 25
09:30
US
Widget
Green
$4,568.15
1%
Green Widget
$4,522.47
$452.25
11
Nov 25 25
10:00
Canada
Widget
Green
$4,414.46
14%
Green Widget
$3,796.44
$379.64
12
Dec 25 25
11:30
UK
Gadget
Red
$1,705.14
1%
Red Gadget
$1,688.09
$168.81
13
Jan 25 25
12:00
Canada
Gadget
Red
$4,917.13
24%
Red Gadget
$3,737.02
$373.70
14
Feb 25 25
13:30
China
Gadget
Green
$1,702.41
19%
Green Gadget
$1,378.95
$137.90
15
Mar 25 25
14:00
Italy
Widget
Green
$4,148.18
14%
Green Widget
$3,567.43
$356.74
16
Apr 25 25
15:30
China
Gadget
Green
$506.04
11%
Green Gadget
$450.38
$45.04
17
May 25 25
16:00
Canada
Widget
Black
$1,471.61
21%
Black Widget
$1,162.57
$116.26
18
Jun 25 25
17:30
Japan
Gadget
Red
$4,562.80
7%
Red Gadget
$4,243.40
$424.34
19
Jul 25 25
18:00
France
Gadget
Green
$3,784.00
20%
Green Gadget
$3,027.20
$302.72
20
Aug 25 25
19:30
UK
Widget
Black
$4,926.25
1%
Black Widget
$4,876.99
$487.70
21
Sep 25 25
20:00
UK
Gadget
Red
$1,143.47
10%
Red Gadget
$1,029.12
$102.91
22
Oct 25 25
21:30
China
Widget
Red
$3,889.99
9%
Red Widget
$3,539.89
$353.99
23
Nov 25 25
22:00
Korea
Widget
Red
$4,829.86
11%
Red Widget
$4,298.58
$429.86
24
Dec 25 25
23:30
German
Widget
Green
$2,594.90
5%
Green Widget
$2,465.15
$246.52
25
Jan 25 25
00:00
Korea
Gadget
Red
$1,183.91
21%
Red Gadget
$935.29
$93.53
26
Feb 25 25
01:30
Korea
Widget
Red
$1,285.88
0%
Red Widget
$1,285.88
$128.59
0
Description
You can add calculated fields to CollectionView using CalculatedFields property. Each calculated field setting contains name and expression. The expression is regular with variable '$' that represents the current data item which allows referring to original and calculated fields of it.
Calculated fields are read-only and are automatically updated their dependent fields change.
Note: To use calculated fields in IE11, you must include a proxy polyfill such as https://www.npmjs.com/package/proxy-polyfill.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class CollectionViewController : Controller { public ActionResult CalculatedFields(FormCollection data) { var model = Sale.GetData(500); return View(model); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @using C1.Web.Mvc.Grid @model IEnumerable< Sale > < style > .calculated { background-color: honeydew; } .wj-alt.calculated { background-color: #DCF8C6; } </ style > @ (Html.C1().CollectionViewService() .Id( "CVService" ) .Bind(Model) .CalculatedFields(cfs => { cfs.Add(cf => cf.Name( "Description" ).Expression( "[$.Color,$.Product].join(' ')" )); cfs.Add(cf => cf.Name( "NetRevenue" ).Expression( "$.Amount2*(1-$.Discount)" )); cfs.Add(cf => cf.Name( "Tax" ).Expression( "$.NetRevenue*0.1" )); }) ) @ (Html.C1().FlexGrid< Sale >() .Id( "FlexGridCV" ) .ItemsSourceId( "CVService" ) .AutoGenerateColumns( false ) .Columns(bl => { bl.Add(cb => cb.Binding( "ID" ).Width( "60" )); bl.Add(cb => cb.Binding( "Start" ).Format( "MMM d yy" )); bl.Add(cb => cb.Binding( "End" ).Format( "HH:mm" )); bl.Add(cb => cb.Binding( "Country" )); bl.Add(cb => cb.Binding( "Product" )); bl.Add(cb => cb.Binding( "Color" )); bl.Add(cb => cb.Binding( "Amount2" ).Format( "c" )); bl.Add(cb => cb.Binding( "Discount" ).Format( "p0" )); bl.Add(cb => cb.Binding( "Description" ).CssClass( "calculated" )); bl.Add(cb => cb.Binding( "NetRevenue" ).Header( "Net Revenue" ).Format( "c" ).CssClass( "calculated" )); bl.Add(cb => cb.Binding( "Tax" ).Format( "c" ).CssClass( "calculated" )); bl.Add(cb => cb.Binding( "Active" ).Width( "90" )); }) .SortingType(AllowSorting.SingleColumn) .CssClass( "grid" ) .Height(500) ) @section Summary{ < p > @Html .Raw(Resources.CollectionView.CalculatedFields_Text0)</ p > } @section Description{ < p > @Html .Raw(Resources.CollectionView.CalculatedFields_Text1)</ p > < p > @Html .Raw(Resources.CollectionView.CalculatedFields_Text2)</ p > < p > @Html .Raw(Resources.CollectionView.CalculatedFields_Text3)</ p > } |