Local Binding
When configured for local binding, the Grid for ASP.NET MVC will serialize the data as part of its data source and will perform all data operations, such as paging, sorting, filtering, grouping, and aggregating, on the client.
For a runnable example, refer to the demo on local binding of the Grid.
To configure the Grid for ASP.NET MVC to do local binding:
-
Define a model class or use an existing one from your application.
public class OrderViewModel { public int OrderID { get; set; } public string ShipCountry { get; set; } }
-
Open the
HomeController.cs
and return anIEnumerable
of the model type with the View. This is theView()
which holds the Grid definition.public ActionResult Index() { // Returns a collection of OrderViewModels. var model = orderService.Read(); /* For a quick test, you can mock the data, and copy and paste this snippet. var model = Enumerable.Range(1, 20).Select(i => new OrderViewModel { OrderID = i, ShipCountry = i % 2 == 0 ? "ShipCountry 1" : "ShipCountry 2" }); */ return View(model); }
-
In the
Index.cshtml
view, configure the Grid to accept the model in its constructor and setServerOperations(false)
.@model IEnumerable<AspNetCoreGrid.Models.OrderViewModel> @(Html.Kendo().Grid(Model) .Name("grid") .DataSource(dataSource => dataSource .Ajax() .PageSize(2) .ServerOperation(false) ) .ToolBar(tools => { tools.Pdf().Text("Custom PDF button text"); tools.Excel().Text("Custom Excel button text"); }) .Pageable() .Sortable() .Groupable() .Columns(columns => { columns.Bound(f => f.OrderID); columns.Bound(f => f.ShipCountry); }) )
Build and run the application.