Listening Has Always Been Our Strongest Tool!

Just Give Us a Try, we respond to all messages within 1 business day. Really!


How can we reach out to you?






NDA From The Start
We keep your idea safe. We're always willing to sign a Non-Disclosure Agreement with you and fully protect your intellectual property.

captcha

Other Ways To Meet Us :info@zealousys.com
Our Blog
Apr 10
2014

Configure Kendo UI grid for Asp.net MVC with Ajax Binding

By zealousys

Create a new ASP.NET MVC 4 application (or Telerik UI for ASP.NET MVC application if you have installed the Telerik UI for ASP.NET MVC Visual Studio Extensions). Name the application “KendoGridAjaxBinding”.

Open HomeController.cs and add a new action method which will return the Products as JSON. The grid will make ajax requests to this action.

  1. public ActionResult Products_Read()
  2. {
  3. }

Add a new parameter of type Kendo.Mvc.UI.DataSourceRequest to the action. This parameter will contain the current grid request information – page, sort, group and filter. Decorate that parameter with the Kendo.Mvc.UI.DataSourceRequestAttribute. That attribute will populate the DataSourceRequest object from the posted data. You need to import the Kendo.Mvc.UI namespace.

  1. public ActionResult
  2. Products_Read([DataSourceRequest]DataSourceRequest request)
  3. {
  4. }

Use the ToDataSourceResult extension method to convert the Products to a Kendo.Mvc.UI.DataSourceResult object. That 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.

  1. public ActionResult
  2. Products_Read([DataSourceRequest]DataSourceRequest request)
  3. {
  4. using (var northwind = new NorthwindEntities())
  5. {
  6. IQueryable products = northwind.Products;
  7. DataSourceResult result = products.ToDataSourceResult(request);
  8. }
  9. }

Return the DataSourceResult as JSON. Now let’s configure Kendo UI Grid for ajax binding.

  1. public ActionResult
  2. Products_Read([DataSourceRequest]DataSourceRequest request)
  3. {
  4. using (var northwind = new NorthwindEntities())
  5. {
  6. IQueryable products = northwind.Products;
  7. DataSourceResult result = products.ToDataSourceResult(request);
  8. return Json(result);
  9. }
  10. }

In the view configure the grid to use the action method created in the previous steps.
Index.aspx (ASPX)

  1. <%:
  2. Html.Kendo().Grid()
  3. .Name(“grid”)
  4. .DataSource(dataSource => dataSource // Configure the grid datasource
  5. .Ajax() // Specify that ajax binding is used
  6. .Read(read => read.Action(“Products_Read”, “Home”)) // Setthe action method which will return the data in JSON format
  7. )
  8. .Columns(columns =>
  9. {
  10. // Create a column bound to the ProductID property
  11. columns.Bound(product => product.ProductID);
  12. // Create a column bound to the ProductName property
  13. columns.Bound(product =>
  14. product.ProductName);
  15. // Create a column bound to the UnitsInStock property
  16. columns.Bound(product => product.UnitsInStock);
  17. })
  18. .Pageable() // Enable paging
  19. .Sortable() // Enable sorting
  20. %>

Index.cshtml (Razor)

  1. @(Html.Kendo().Grid()
  2. .Name(“grid”)
  3. .DataSource(dataSource => dataSource //
  4. Configure the grid data source
  5. .Ajax() // Specify that ajax binding is used
  6. .Read(read => read.Action(“Products_Read”, “Home”))
  7. // Set the action method which will return the data in
  8. JSON format
  9. )
  10. .Columns(columns =>
  11. {
  12. // Create a column bound to the ProductID property
  13. columns.Bound(product => product.ProductID);
  14. // Create a column bound to the ProductName property
  15. columns.Bound(product => product.ProductName);
  16. // Create a column bound to the UnitsInStock property
  17. columns.Bound(product => product.UnitsInStock);
  18. })
  19. .Pageable() // Enable paging
  20. .Sortable() // Enable sorting
  21. )

Build and run the application

View My Stats