Use Web API with Server-Side Operations
Kendo UI does not provide any out-of-the-box capability for implementing server-side paging, sorting, and grouping.
However, you can implement server-side data operations by using Telerik UI for ASP.NET MVC. The following example demonstrates how to use the ToDataSourceResult extension method to implement the server-side data operations of paging, sorting, and grouping.
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using grid_data_source_request_web_api.Models;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
namespace grid_data_source_request_web_api.Controllers
{
public class OrdersController : ApiController
{
private NorthwindEntities db = new NorthwindEntities();
// GET api/Orders
public DataSourceResult GetOrders([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
return db.Orders.ToDataSourceResult(request);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
Important
The
dataSourcetype Web API is intended for Telerik UI for ASP.NET MVC. As a result, you need to includekendo.aspnetmvc.js.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ "title": "Order ID", "width": "100px", "field": "OrderID" },
{ "title": "Ship City", "width": "200px", "field": "ShipCity" },
{ "title": "Ship Address", "field": "ShipAddress" }
],
groupable: true,
pageable: true,
sortable: true,
dataSource: {
type: "webapi",
transport: {
read: {
url: "/api/orders"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors"
}
}
});
</script>
<div ng-app="app" ng-controller="controller">
<div kendo-grid k-options="gridOptions" k-data-source="gridDataSource"></div>
</div>
<script>
var app = angular.module("app", ["kendo.directives"]);
app.controller("controller", ["$http", "$scope", function ($http, $scope) {
$scope.gridOptions = {
columns: [
{ "title": "Order ID", "width": "100px", "field": "OrderID" },
{ "title": "Ship City", "width": "200px", "field": "ShipCity" },
{ "title": "Ship Address", "field": "ShipAddress" }
],
groupable: true,
pageable: true,
sortable: true
};
$scope.gridDataSource = {
transport: {
read: function (options) {
var webapi = new kendo.data.transports.webapi({ prefix: "" });
var params = webapi.parameterMap(options.data);
$http.get("/api/orders", { params: params })
.success(function (data) {
options.success(data);
})
.error(function (data) {
options.error();
});
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
schema: $.extend({}, kendo.data.schemas.webapi, { data: "Data", total: "Total", errors: "Errors" })
};
}]);
</script>