FlexGrid
Remote Data Bind
Features
Sample
AriaLabel:
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.
Source
RemoteBindController.cs
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(); } } }
RemoteBind.cshtml
<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> }
Documentation