CollectionView
CollectionView
Calculated Fields
This sample show how to add calculated fields to CollectionView.
Features
Sample
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.
Source
CalculatedFieldsController.cs
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)); } } }
CalculatedFields.cshtml
@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> }
Documentation