Angularjs Kendo Grid Server side Filters - angularjs

Question

I am trying to develop kendo grid using Asp.NET MVC and Angularjs. my code is as mentioned below.
Index.cshtml
<div ng-controller="telerikGridController">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City"/></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.Phone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
AngularJS controller (telerikGridController)
'use strict';
var app = angular.module('myApp', ['kendo.directives', 'ui.bootstrap']);
app.controller('telerikGridController', ['$scope', function telerikGridController($scope) {
$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "Grid/Departments"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "DepartmentName",
title: "Department Name",
width: "120px"
}, {
field: "Country",
title: "Country",
width: "120px"
}, {
field: "City",
width: "120px"
}, {
field: "Phone",
width: "120px"
}, {
field: "Description"
}
]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 2,
filter: { field: "DeptId", operator: "eq", value: dataItem.DeptId }
},
scrollable: false,
sortable: true,
pageable: true,
filterable:true,
columns: [
{ field: "FirstName", title: "First Name", width: "56px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Address", title: "Address" },
{ field: "Phone", title: "Phone", width: "190px" }
]
};
}
}
]);
ASP.NET MVC Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoGridApp.Models;
using Kendo.Mvc;
using Kendo.Mvc.UI;
namespace KendoGridApp.Controllers
{
public class GridController : Controller
{
List<Employee> employees = new List<Employee>();
List<Department> deptList = new List<Department>();
public GridController()
{
Employee employe = new Employee();
employe.FirstName = "First Name";
employe.LastName = "Last Name";
employe.Phone = "[phone]";
employe.Address = " Pakistan";
employe.DeptId = 1;
var employe2 = new Employee();
employe2.FirstName = "First Name 2";
employe2.LastName = "Last Name 2";
employe2.Phone = "[phone]";
employe2.Address = "UAE";
employe2.DeptId = 2;
var employe3 = new Employee();
employe3.FirstName = "First Name 3";
employe3.LastName = "Last Name 3";
employe3.Phone = "[phone]";
employe3.Address = "Sydney,Australia";
employe3.DeptId = 3;
var employe4 = new Employee();
employe4.FirstName = "First Name 4";
employe4.LastName = "Last Name 4";
employe4.Phone = "[phone]";
employe4.Address = "Sydney, Australia";
employe4.DeptId = 4;
var employe5 = new Employee();
employe5.FirstName = "First Name 5";
employe5.LastName = "Last Name 5";
employe5.Phone = "[phone]";
employe5.Address = "Dubai, UAE";
employe5.DeptId = 5;
var employe6 = new Employee();
employe6.FirstName = "First Name 6";
employe6.LastName = "Last Name 6";
employe6.Phone = "[phone]";
employe6.Address = "Dehli, India";
employe6.DeptId = 6;
employees.Add(employe);
employees.Add(employe2);
employees.Add(employe3);
employees.Add(employe4);
employees.Add(employe5);
employees.Add(employe6);
}
// GET: Grid
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
{
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
employees = employees.Where(x => x.DeptId == deptId).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public JsonResult Departments()
{
Department dept = new Department();
dept.DeptId = 1;
dept.DepartmentName = "Information Technology";
dept.Phone = "[phone]";
dept.Country = "Pakistan";
dept.City = "Lahore";
dept.Description = "This is Description Text 1";
Department dept2 = new Department();
dept2.DeptId = 2;
dept2.DepartmentName = "Mechnical Engineering";
dept2.Phone = "[phone]";
dept2.Country = "India";
dept2.City = "Dehli";
dept2.Description = "This is Description Text 2";
Department dept3 = new Department();
dept3.DeptId = 3;
dept3.DepartmentName = "Civil Engineering";
dept3.Phone = "[phone]";
dept3.Country = "Pakistan";
dept3.City = "Islamabad";
dept3.Description = "This is Description Text 3";
Department dept4 = new Department();
dept4.DeptId = 4;
dept4.DepartmentName = "Radiology";
dept4.Phone = "[phone]";
dept4.Country = "UAE";
dept4.City = "Dubai";
dept4.Description = "This is Description Text 4";
Department dept5 = new Department();
dept5.DeptId = 5;
dept5.DepartmentName = "Defence";
dept5.Phone = "[phone]";
dept5.Country = "Australia";
dept5.City = "Sydney";
dept5.Description = "This is Description Text 5";
Department dept6 = new Department();
dept6.DeptId = 6;
dept6.DepartmentName = "Socialogy";
dept6.Phone = "[phone]";
dept6.Country = "United States";
dept6.City = "New York";
dept6.Description = "This is Description Text 6";
deptList.Add(dept);
deptList.Add(dept2);
deptList.Add(dept3);
deptList.Add(dept4);
deptList.Add(dept5);
deptList.Add(dept6);
return Json(deptList, JsonRequestBehavior.AllowGet);
}
}
}
Issue:
Issue i am facing is in GetEmployees JsonResult function, DataSourceRequest command has always Filters = null. Whereas, my request is showing requests like,
Query String Parameters:
take:2
skip:0
page:1
pageSize:2
filter[logic]:and
filter[filters][0][field]:DeptId
filter[filters][0][operator]:eq
filter[filters][0][value]:3
and Request link is like,
GetEmployees?take=2&skip=0&page=1&pageSize=2&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=DeptId&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=3
currently I am able to get filters in server side using HttpRequestWrapper as mentioned below in GetEmployees JsonResult
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
but is there any better approach to get these filters at server side? for example using DataSourceRequest?
Thanks.

Answer 1

This is works for me for server side filtering. Try add [DataSourceRequest] tag before variable type to solve your filter binding issue and to handle filtering you can use extension ToDataSourceResult() which provided by Kendo.Mvc.Extensions.
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
// removed for brevity
// .......
return Json(viewModels.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Hope this help.

Answer 2

Use type: "aspnetmvc-ajax", instead of type: "json", in your dataSource and use the [DataSourceRequest] attribute in your controller.
public JsonResult GetEmployees([DataSourceRequest]DataSourceRequest command)

Answer 3

Finally, After hammering my head long i found the solution.
In my Code above mentioned,
Replace in $scope.detailGridOptions: (telerikGridController)
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
With:
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: "Grid/GetEmployees",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
schema:
{
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
And in Asp.NET MVC controller:
Replace
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
With
[HttpPost]
public JsonResult GetEmployees(DataSourceRequest command)
And Everything will start working file. you will be receiving Filters/Sort etc everyting in DataSourceRequest object.