AngularJS kendo grid binding to angular service webapi - sorts always null when parsing with [fromuri]

Question

I am attempting to follow 'angular best practice' by using an angular service that wraps my WebApi calls. I have it working for the most part but cannot figure out how to create the query string using the kendo datasourcerequest parameters in a way that parses out correctly on the webapi side.

Page

    <div ng-controller="HomeCtrl as ctrl">
         <div kendo-grid 
              k-pageable='{ "refresh": true, "pageSizes": true }'
              k-ng-delay="ctrl.businessGridOption" 
              k-options="ctrl.businessGridOption"></div>
    </div>

TS/JS

module Tql.Controllers { 
    'use strict';
    export class BusinessWebApi {
        public static $inject = ["$resource","$http"];
        public static IID = "BusinessWebApi"; 
        private httpService: ng.IHttpService;
        public constructor($resource,$http) {
            var vm = this;           
            vm.httpService = $http;
        }        
        public GetBusinessCount() {
            return this.httpService.get("/api/Business/GetBusinessCount");  
        }
        public GetBusinesses(kendoOptions) {
            console.log(JSON.stringify( kendoOptions));
            return this.httpService.get("/api/Business/GetBusinesses"
            + "?page=" + kendoOptions.page
            + "&pageSize=" + kendoOptions.pageSize
            + "&sort[0][field]=" + kendoOptions.sort.split('-')[0] + "&sort[0][dir]=" + kendoOptions.sort.split('-')[1] );
        //%5B = '['
        //%5D = ']'
    }
}    
export interface IHomeCtrl {
    Title: string
}
export class HomeCtrl implements IHomeCtrl {
    public static $inject = [BusinessWebApi.IID]; 
    public Title: string;
    public businessGridOption: any; 
    public constructor(myservice: BusinessWebApi) {
        var vm = this; 
        vm.Title = "Welcome to TQL Admin.";           
        vm.businessGridOption = {
            sortable: true,
            filterable: true,
            pageable: true,               
            columns: [
                { field: "BusinessId", title: "ID" },
                { field: "BusinessLegalName", title:"Name"},
                { field: "CreatedDate", title: "Created" },
            ],                        
            dataSource: new kendo.data.DataSource({
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 5,            
                transport: {                        
                    read: function (kendoOptions) {
                        this.options = { prefix: "" };
                        var data = kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call(this, kendoOptions.data, "read", false);

                        myservice.GetBusinesses(data)
                            .success(function (data) {
                                kendoOptions.success(data);
                            }).error(function (error) {
                                kendoOptions.error(error);
                            });                            
                    },
                    /*  this only needs defined if you delegate the $get to the grid itself, which is bad practice for angular
                        since we have a service we need to call this manually (see above) 
    kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call
                    parameterMap: function (data, operation) { 
                        return JSON.stringify(data);
                    }
                    */                     
                },
                schema: { //this is needed to tell the grid how to parse the result object
                    data: function (data) { return data.Data; },
                    total: function (data) { return data.Total; },
                    errors: function (data) { return data.Errors; }                        
                }    
            }),


        };                                   
    }
}
angular.module('tql').service(BusinessWebApi.IID, BusinessWebApi); angular.module('tql').controller("HomeCtrl",HomeCtrl); }

WebApi

[RoutePrefix( "api/Business" )]
public class BusinessApiController : ApiController
{
    private TQLContext db = new TQLContext();

    [HttpGet]
    [Route( "GetBusinesses" )]        
    public DataSourceResult GetBusinesses([FromUri]DataSourceRequest request)
    {
        //if (sort == null)
        //    sort = "BusinessId-asc";
        //var req = this.Request;
        return db.Businesses.Select(x => x).ToDataSourceResult( request );

    }
    [HttpGet]
    [Route( "GetBusinessCount" )]
    public int GetBusinessCount()
    {
        return db.Businesses.Count();
    }
}

Answer 1

Turns out the issue was less on the client side, I got this to work using the above methods but my using the following on the APIController side of things to correctly parse out the query values. This is very poorly documented by the Telerik team.

public DataSourceResult Get( [ModelBinder( typeof( WebApiDataSourceRequestModelBinder ) )] DataSourceRequest request)