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
ID
Start
End
Country
Product
Color
Amount2
Discount
Description
Net Revenue
Tax
Active
0
loading...
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 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Primitives; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class CollectionViewController : Controller { public ActionResult CalculatedFields(IFormCollection collection) { return View(); } public ActionResult CalculatedFields_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { var extraData = requestData.ExtraRequestData .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString())); var data = new FormCollection(extraData); _optionsModel.LoadPostData(data); var model = Sale.GetData(500); return this.C1Json(CollectionViewHelper.Read(requestData, 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 | @using C1.Web.Mvc.Grid @model IEnumerable<Sale> <style> .calculated { background-color: honeydew; } .wj-alt.calculated { background-color: #DCF8C6; } </style> <c1-items-source id="CVService" initial-items-count="500" read-action-url="@Url.Action("Index_Bind")"> <c1-calculated-field name="Description" expression="[$.Color,$.Product].join(' ')"></c1-calculated-field> <c1-calculated-field name="NetRevenue" expression="$.Amount2*(1-$.Discount)"></c1-calculated-field> <c1-calculated-field name="Tax" expression="$.NetRevenue*0.1"></c1-calculated-field> </c1-items-source> <c1-flex-grid id="FlexGridCV" items-source-id="CVService" auto-generate-columns="false" sorting-type="SingleColumn" class="grid"> <c1-flex-grid-column binding="ID" width="60"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column> <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Description" class="calculated"></c1-flex-grid-column> <c1-flex-grid-column binding="NetRevenue" header="Net Revenue" format="c" class="calculated"></c1-flex-grid-column> <c1-flex-grid-column binding="Tax" format="c" class="calculated"></c1-flex-grid-column> <c1-flex-grid-column binding="Active" width="90"></c1-flex-grid-column> </c1-flex-grid> @section Summary{ <p>@Html.Raw(CollectionViewRes.CalculatedFields_Text0)</p> } @section Description{ <p>@Html.Raw(CollectionViewRes.CalculatedFields_Text1)</p> <p>@Html.Raw(CollectionViewRes.CalculatedFields_Text2)</p> <p>@Html.Raw(CollectionViewRes.CalculatedFields_Text3)</p> } |