Server side filtering using kendo grid for angularjs

See more:

grid

WebAPI

Kendo

I'm trying to implement server side filtering using kendo grid for angularjs.
I'm not sure how to do it.

My code in Angularjs:

$scope.DS = new kendo.data.DataSource({
transport: {
read: {
url: "/api/Employees",
dataType: "json",
contentType: "application/json",
type: "GET" },
update: {
url: "/api/Employees/PUT",
dataType: "json",
contentType: "application/json",
type: "PUT" },
destroy:
 { url: "/api/Employees/DELETE",
  dataType: "json",
  contentType: "application/json",
   type: "DELETE" },
  create: { url: "/api/Employees/POST",
  dataType: "json",
  contentType: "application/json",
  type: "POST" },
  parameterMap: function (options, operation)
  { if (operation !== "read") {
  console.log(JSON.stringify(options.models));
  return JSON.stringify(options.models); } } }, 
  batch: true,
  pageSize: 5,
 schema: {
  model: {
 id: "Id",
 data: 'Data',
 total: 'Total',
 errors: 'Errors',
 fields: {
 Id: { editable: false, nullable: false, type: "number" },
 Email: { editable: true }, 
 UserName: { editable: true, type: "string"},
 FirstName: { editable: true, validation: { required: true } },
 LastName: { editable: true, validation: { required: true } },

  Age: { editable: true, validation: { required: true } },

  Phone: { editable: true, validation: { required: true } } } } } });

  $scope.mainGridOptions = { dataSource: $scope.DS,

  /*dataBound: function Autocolumnwidth(e) { var grid = e.sender; for (var 
   i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } },*/

  toolbar: ["create"],

 columns: [ { field: "Id", hidden: true },

{ field: "Email", title: "Email", width: "100px" },

{ field: "UserName", title: "User Name", width: "100px" },

 { field: "FirstName", title: "First Name", width: "100px" },

 { field: "LastName", title: "Last Name", width: "100px" },

 { field: "Phone", title: "Phone", width: "100px" },

 { field: "Age", title: "Age", width: "100px" },

 {command: [{ name: "edit", text: { edit: "Edit", update: "Save", cancel: "Cancel" } },"destroy"], title: "Actions", width: "150px" } ],

  pageable: {

  refresh: true,

 input: true,

   numeric: false,

  pageSizes: [5,10, 20, 30, 50, 75, 100, 500, 1000] },

  sortable: true,

 resizable: true, 

navigatable: true,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

 editable: { mode: "inline" },

 filter: {filters:

  [{ field: 'FirstName', operator: 'Contains', value: 'AA' }] }, // Not working I got SCRIPT438: SCRIPT438: Object doesn't support property or method 'call'

 serverFiltering: true,

 filterable: { mode: "row" },

 noRecords: { template: "No results available." } };

What I have tried:

I don't know how to handle it from server side, but I have this code in controller:

public DataSourceResult Filter(Models.DataSourceRequest request)
{

    var employees = db.Users.OrderBy(o => o.Id);
    var i = employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
    var data = i.Data; // This is contain filtered data
    request.Take = i.Total;
    request.Skip = 0;
    return employees.ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter);
}

This is the model:

 public class DataSourceRequest
{
    public int Take { get; set; }
    public int Skip { get; set; }
    public IEnumerable<Kendo.DynamicLinq.Sort> Sort { get; set; }
    public Kendo.DynamicLinq.Filter Filter { get; set; }
}