Local Binding

Updated on Oct 27, 2026

With local binding, the Grid serializes data in its DataSource and performs 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 Core 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 HomeController.cs and return an IEnumerable of the model type to the view that contains the Grid definition.

   C#

       public IActionResult 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 Index.cshtml, configure the Grid to accept the model in its constructor and set ServerOperation(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);
           })
       )

   Razor

       @addTagHelper *, Kendo.Mvc
       @model IEnumerable<AspNetCoreGrid.Models.OrderViewModel>
   
       <kendo-grid name="grid">
           <datasource type="DataSourceTagHelperType.Ajax" page-size="2" server-operation="false" data="@Model">
           </datasource>
           <toolbar>
               <toolbar-button name="pdf" text="Custom PDF button text"></toolbar-button>
               <toolbar-button name="excel" text="Custom Excel button text"></toolbar-button>
           </toolbar>
           <pageable enabled="true">
           </pageable>
           <sortable enabled="true" />
           <groupable enabled="true" />
           <columns>
               <column field="OrderID">
               </column>
               <column field="ShipCountry">
               </column>
           </columns>
       </kendo-grid>

4. Build and run the application.

See Also

• ASP.NET Core DataGrid Homepage

• Custom Ajax Binding by the Grid HtmlHelper for ASP.NET Core (Demo)

• Grid Knowledge Base Articles

• Grid API Reference