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 = "+92 302 8888 777";
employe.Address = " Pakistan";
employe.DeptId = 1;
var employe2 = new Employee();
employe2.FirstName = "First Name 2";
employe2.LastName = "Last Name 2";
employe2.Phone = "+92 333 4444 779";
employe2.Address = "UAE";
employe2.DeptId = 2;
var employe3 = new Employee();
employe3.FirstName = "First Name 3";
employe3.LastName = "Last Name 3";
employe3.Phone = "+92 302 4444 779";
employe3.Address = "Sydney,Australia";
employe3.DeptId = 3;
var employe4 = new Employee();
employe4.FirstName = "First Name 4";
employe4.LastName = "Last Name 4";
employe4.Phone = "+92 302 4444 999";
employe4.Address = "Sydney, Australia";
employe4.DeptId = 4;
var employe5 = new Employee();
employe5.FirstName = "First Name 5";
employe5.LastName = "Last Name 5";
employe5.Phone = "+92 302 1111 779";
employe5.Address = "Dubai, UAE";
employe5.DeptId = 5;
var employe6 = new Employee();
employe6.FirstName = "First Name 6";
employe6.LastName = "Last Name 6";
employe6.Phone = "+92 302 0000 779";
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 = "+1 111 111 111";
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 = "+1 222 111 111";
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 = "+1 111 000 111";
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 = "+1 111 222 000";
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 = "+1 555 888 999";
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 = "+1 555 777 000";
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.
