New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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:

  1. 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;
        }
    }
    
  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.

        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).

        @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

In this article