Local Binding

When configured for local binding, the Grid serializes the data as part of its DataSource and performs 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:

1. Define a model class or use an existing one from your application.

   C#

       public class OrderViewModel
       {
   
           public int OrderID
           {
               get;
               set;
           }
   
           public string ShipCountry
           {
               get;
               set;
           }
       }

2. Open the HomeController.cs and return an IEnumerable of the model type with the View. This is the View() which holds the Grid definition.

   C#

       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);
       }  

3. In the Index.cshtml view, configure the Grid to accept the model in its constructor and set ServerOperations(false).

   Razor

       @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);
           })
       )

4. Build and run the application.

See Also

• Custom Ajax Binding by the Grid HtmlHelper for ASP.NET MVC (Demo)
• Knowledge Base Section
• Server-Side API