Ajax Binding

You can configure the Grid component extension for Ajax binding.

When configured for Ajax binding, the Grid for ASP.NET Core makes Ajax requests when doing paging, sorting, filtering, grouping, or when saving data. For a runnable example, refer to the demo on Ajax binding of the Grid.

The Ajax-bound mode has the following features:

• The Grid retrieves only the data (in JSON format) representing the current page. As a result, only the Grid is updated.
• All Grid templates (column, detail) are executed client-side. They follow the Kendo UI for jQuery template definition rules and may contain embedded JavaScript code.

The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.

To configure the Grid for ASP.NET Core to do Ajax binding to the Products table of a sample database:

1. Create a new ASP.NET Core web application. Follow the steps from the introductory article to add Telerik UI for ASP.NET Core to the application.

2. Install the Microsoft.EntityFrameworkCore NuGet package.

3. Install Microsoft.EntityFrameworkCore.SqlServer package.
4. Install Microsoft.EntityFrameworkCore.Tools package.

5. Run a Scaffold-DbContext command in the Visual Studio Package Management Console. It will generate models from the tables in a database called 'Sample'. For more information on scaffolding a model from an existing database refer to this Microsoft article.

   Scaffold-DbContext 'Server=(localdb)\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=D:\MyProjects\TelerikAspNetCoreApp1\TelerikAspNetCoreApp1\App_Data\Sample.mdf;Trusted_Connection=True;' Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Context SampleEntities

Note that the command specifies the path to the database Sample.mdf file.

1. Open the HomeController.cs and add a new action method which will return the Products as JSON. The Grid makes Ajax requests to this action.

   public ActionResult Products_Read()
   {
   }
   

2. Add a new parameter of type Kendo.Mvc.UI.DataSourceRequest to the action. It will contain the current Grid request information—page, sort, group, and filter. Decorate that parameter with the Kendo.Mvc.UI.DataSourceRequestAttribute. This attribute will populate the DataSourceRequest object from the posted data. Now import the Kendo.Mvc.UI namespace.

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
   }
   

3. Use the ToDataSourceResult extension method to convert the Products to a Kendo.Mvc.UI.DataSourceResult object. This extension method will page, filter, sort, or group your data using the information provided by the DataSourceRequest object. To use the ToDataSourceResult extension method, import the Kendo.Mvc.Extensions namespace.

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = products.ToDataSourceResult(request);
           return Json(result);
       }
   }
   

4. Return DataSourceResult as JSON. Alternatively, you can use an asynchronous action and return ToDataSourceResultAsync as JSON.

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = products.ToDataSourceResult(request);
           return Json(result);
       }
   }
   
   The asynchronous `ToDataSourceResultAsync` counterpart:
   
   public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request)
   {
       using (var northwind = new SampleEntities())
       {
           IQueryable<Product> products = northwind.Products;
           DataSourceResult result = await products.ToDataSourceResultAsync(request);
           return Json(result);
       }
   }
   

5. In the view, configure the Grid to use the action method created in the previous steps.

    @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.Products>()
          .Name("grid")
          .DataSource(dataSource => dataSource //Configure the Grid data source.
              .Ajax() //Specify that Ajax binding is used.
              .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format.
           )
          .Columns(columns =>
          {
              //Create a column bound to the ProductId property.
              columns.Bound(product => product.ProductId);
              //Create a column bound to the ProductName property.
              columns.Bound(product => product.ProductName);
              //Create a column bound to the UnitsInStock property.
              columns.Bound(product => product.UnitsInStock);
          })
          .Pageable() // Enable paging
             .Sortable() // Enable sorting
    )

<div style="width:500px">
    <kendo-grid name="grid">
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Action("Products_Read", "Home")" />
            </transport>
        </datasource>
        <pageable enabled="true">
        </pageable>
        <sortable enabled="true"/>
        <columns>
            <column field="ProductID"/>
            <column field="ProductName"/>
            <column field="UnitsInStock"/>
        </columns>
    </kendo-grid>
</div>

1. Build and run the application.

To download a Visual Studio Project, refer to this GitHub repository.

See Also

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