Angular, Kendo-UI, ASP.NET, and Server Side Paging

It was hard to find a good Angular and ASP.NET example of server side grouping, sorting, and filtering.  Kendo does have good documentation, and examples, but filtering through all the noise can be exhausting.  So here I will show how to setup some basic kendo grid page sorting and filtering.

First you will need to add the following to your app

  • Kendo.Mvc
  • kendo.aspnetmvc.min.js

Setting Up Your Server Side Code

Here is an example in the Kendo docs.

We will use a kendo object called “DataSourceRequest” which will hold information about sorting, grouping, filtering, and ordering.  When used with “ToDataSourceResult()” the list we are returning will automatically be filter down to the parameters that are defined in “DataSourceRequest”. Its pretty slick.

using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

namespace Test.Example

    public class ExampleController : Controller
        // GET api/Example/Get
        public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
            IList <item> myListToReturn = [Your array of object to return here];
            return myListToReturn.ToDataSourceResult(request);



Setting Up Your HTML

I will keep the grid’s “data source” and the grid’s “options” separate just to make things slightly easier to understand. In practiced, they can easily be combined.

<div class="container-fluid" ng-controller="exampleController">
    <div kendo-grid k-options="kendoGridOptions" k-data-source="kendoGridDataSource"></div>


Setting Up Your Angular Conroller

In you angular controller, set up “kendoGridOptions” and “kendoGridDataSource”.

angular.module('myApp', ['kendo.directives']);

    .controller('exampleController', exampleController) 

exampleController.$inject = ['$scope', "$http"];
function exampleController($scope, $http) {

    //Set the grid's options
    $scope.kendoGridOptions = {
        sortable: true,
        groupable: true,
        selectable: true,
        resizable: true,
        pageable: {
            pageSizes: [15, 25, 50, 100, 500]

    //set the data source
    $scope.kendoGridDataSource = {
        transport: {
            read: function (options) {
                var webapi = new{ prefix: "" });
                var params = webapi.parameterMap(;
                $http.get("/api/Example", { params: params })
                    .success(function (data) {
                    .error(function (data) {
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        serverGrouping: true,
        serverAggregates: true,
        pageSize: 15,
        schema: $.extend({},, { data: "Data", total: "Total", errors: "Errors" })


Other Kendo Links

Here are a couple other posts that I have done about Kendo-UI’s Grid tools

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s