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
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
ID
Start
End
Country
Product
Color
Amount2
Discount
Description
Net Revenue
Tax
Active
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 > } |