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
        [HttpGet]
        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>
</div>

 

Setting Up Your Angular Conroller

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


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

angular
    .module('myApp')
    .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 kendo.data.transports.webapi({ prefix: "" });
                var params = webapi.parameterMap(options.data);
                $http.get("/api/Example", { params: params })
                    .success(function (data) {
                        options.success(data);
                    })
                    .error(function (data) {
                        options.error();
                    });
            }
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        serverGrouping: true,
        serverAggregates: true,
        pageSize: 15,
        schema: $.extend({}, kendo.data.schemas.webapi, { 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