Ajax Binding
You can configure the Grid component extension for Ajax binding.
When configured for Ajax binding, the Grid for ASP.NET MVC 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.
To configure the Grid for ASP.NET MVC to do Ajax binding to the Products table of the Northwind database:
-
Create a new ASP.NET MVC web application. Follow the steps from the introductory article to add Telerik UI for ASP.NET MVC to the application.
If you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions, create a Telerik UI for ASP.NET MVC application.
-
Add a new
Entity Framework Data Model
. Right-click the~/Models
folder in the solution explorer and pick Add new item. Choose Data > ADO.NET Entity Data Model in the Add New Item dialog. Name the modelNorthwind.edmx
and click Next. This starts the Entity Data Model Wizard.
-
-
Pick the Generate from database option and click Next. Configure a connection to the Northwind database. Click Next.
-
Choose the Products table from the Which database objects do you want to include in your model?. Leave all other options as they are set by default. Click Finish.
-
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 IActionResult Products_Read() { }
-
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 theKendo.Mvc.UI.DataSourceRequestAttribute
. This attribute will populate theDataSourceRequest
object from the posted data. Now import theKendo.Mvc.UI
namespace.public IActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { }
-
Use the
ToDataSourceResult
extension method to convert the Products to aKendo.Mvc.UI.DataSourceResult
object. This extension method will page, filter, sort, or group your data using the information provided by theDataSourceRequest
object. To use theToDataSourceResult
extension method, import theKendo.Mvc.Extensions
namespace.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new SampleContext()) { IQueryable<Product> products = northwind.Products; DataSourceResult result = products.ToDataSourceResult(request); return Json(result); } }
-
Return the
DataSourceResult
as JSON. Configure the Kendo UI Grid for Ajax binding.public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new SampleContext()) { IEnumerable<Customers> customers = northwind.Customers; DataSourceResult result = customers.ToDataSourceResult(request); return Json(result); } } The same thing applies when you use the asynchronous `ToDataSourceResultAsync` counterpart. public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request) { using (var northwind = new NorthwindEntities()) { IQueryable<Product> products = northwind.Products; DataSourceResult result = await products.ToDataSourceResultAsync(request); return Json(result); } }
In the view, configure the Grid to use the action method created in the previous steps.
@(Html.Kendo().Grid<KendoGridAjaxBinding.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.
.Events(ev => ev.Error("onError"))
)
.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
)
<script>
function onError(e) {
console.log(e.status);
}
</script>
- Build and run the application.
To download a Visual Studio Project, refer to this GitHub repository.