Web Api Server Side Processing

Kendo DataSource needs to have a "Total" to make Server Paging work.

/*
I assume your total is on each and every record? 
If it's not, you can just do...
*/

schema: {
  total: "TotalRecords"
}

/*
Ideally your JSON should be structured like this...
*/

{ data:[...], total: 100 }

/*

However you can parse the schema if you can't send it over from the
server like that. If the total count is attached to every record, you
can add a field to hold it and populate it in the parse.

*/
schema: {
  parse: function(data) {
      // assign top level array to property
      data.data = data;
      // assign the count off one of the fields to a new total field
      data.total = data.data[0].TotalRecords;
      return data;
  }
}

Kendo UI does not provide any out-of-box capability for implementing server-side paging, sorting ang grouping.

Option 1: By using ASP.NET MVC

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);
        }
    }
}

<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>

From Server Side, it returns a DataSourceResult object, which can be parsed by Kendo UI DataSource Schema Class.

Working Sample: E:\cloud\Dropbox\dev\samples_web.javascript.telerik_webapi\webapi-crud

Option 2: By using KendoGridBindEx (https://github.com/StefH/KendoGridBinderEx)

Option 3a: Burke Holland Server Side Sorting With Web API http://www.telerik.com/blogs/ask-kendo-ui-ndash-server-side-sorting-with-webapi

Paging, Sorting, Take, etc information will be sent to server side directly.

   parameterMap: function(data, operation) {
        if (operation != "read") {
            // post the products so the ASP.NET DefaultModelBinder will understand them:
            // products[0].Name="name"
            // products[0].ProductID =1
            // products[1].Name="name"
            // products[1].ProductID =1
            var result = {};
            console.log(data);
            console.log(data.model);
            for (var i = 0; i < data.models.length; i++) {
                var product = data.models[i];
                for (var member in product) {
                    result["products[" + i + "]." + member] = product[member];
                }
            }
            return result;
        } else {
            // pass paging, sorting, information to server side. 
            return JSON.stringify(data)
        }
     }
    }

Option 3b.

/*
As per my approach I used the parameter map attribute to stringify the parameters so i can accept one DTO on WebAPI:
*/
transport: {
    read: {
        url: svcSampleUrl,
        contentType: "application/json; charset=utf-8",
        type: "POST",
        dataType: "json"
    },
    parameterMap: function (options) {
        return kendo.stringify(options); //contains take, skip, sort, and filters
    }
},