FlexGrid
FlexGrid
Remote Data Bind
This example shows how you can bind FlexGrid with the data from some Action.
Features
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
0
loading...
Description
This example shows how you can bind FlexGrid with the data from some Action.
This example also demos how you can set ariaLabel to the grid control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | using C1.Web.Mvc; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult RemoteBind_Read([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500))); } public ActionResult RemoteBind() { return View(); } } } |
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 | <c1-flex-grid auto-generate-columns="false" sorting-type="SingleColumn" is-read-only="true" class="grid" selection-mode="Row" id="remoteGrid" aria-label="This is a FlexGrid of Sale."> <c1-items-source read-action-url="@Url.Action("RemoteBind_Read")"></c1-items-source> <c1-flex-grid-column binding="ID" is-visible="false"></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="Amount" format="c"></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="Active"></c1-flex-grid-column> </c1-flex-grid> <p></p> AriaLabel: <input type="text" style="width:500px" id="txtLabel" value="This is a FlexGrid of Sale." /> <input type="button" class="btn" onclick="applyAriaLabel()" value="Apply" /> @section Scripts{ <script> function applyAriaLabel() { var ariaLabel = document.getElementById("txtLabel").value; if (ariaLabel != "") { var control = wijmo.Control.getControl("#remoteGrid"); if (control) { control.ariaLabel = ariaLabel; control.invalidate(); } } } </script>} @section Description{ <p>@Html.Raw(FlexGridRes.RemoteBind_Text0)</p> <p>@Html.Raw(FlexGridRes.RemoteBind_Text1)</p> } |