some confusion about kendo grid databind - kendo-ui

Question

I have one kendo grid where i am calling databinding dynamically.
Below is the code:
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var _dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "/Dashboard/GetAttritionEmployeeDetailsWithColl",
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
return JSON.stringify(options);
}
},
schema: {
data: "Data",
errors: "Errors",
total: "Total",
model: {
fields: {
Department: { type: "string" },
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource:_dataSource,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "Department",
title: "Department"
}
]
});
});
</script>
</div>
and here is the function used in dashboard controller
public List<Entity.EmployeeHeadCountResponse> GetAttritionEmployeeDetailsWithColl(Entity.DashboardEmpRequest request)
{
try
{
employeeHeadCountResponseList = new List<Entity.EmployeeHeadCountResponse>();
DashboardServiceAgent client = new DashboardServiceAgent();
request.FlapName = "Attrition";
request.LoggedInStaffId = "33019";
request.RoleName = "Administrator";
client.GetDashboardEmpDetailsWithBytes(request, (s, e) =>
{
if (e.GetType() == typeof(Service.GetDashboardEmpDetailsWithBytesCompletedEventArgs))
{
Service.GetDashboardEmpDetailsWithBytesCompletedEventArgs err = (Service.GetDashboardEmpDetailsWithBytesCompletedEventArgs)e;
if (err.Error == null && err.Result != null)
{
List<Service.GenericCollection> GenColl = new List<Service.GenericCollection>();
byte[] compress = err.Result;
GenColl = PayloadHelper.CompressedBytesToObject(compress) as List<Service.GenericCollection>;
HierarchyCollection collection = new HierarchyCollection(GenColl);
ServiceResult = GenColl;
EmpCollection = collection;
var mylist = EmpCollection.ToList();
if (EmpCollection != null)
{
dict = new HierarchyCollection().FillForCategoryValues(GenColl);
Employee_Read(request2);
}
}
}
}
);
}
catch (System.Exception ex)
{
Common.InsertLogging(ex);
}
return employeeHeadCountResponseList;
}
so in this function it is getting return data from wcf services so this is asynchronous service first time it is providing null value and second time it is getting the value so whenever it is getting data i am calling Employee_Read function inside this function. but not able to display data in kendo grid.
Now my question is here do i have to call main function which is returning json??

Answer 1

Instead of using
public List<Entity.EmployeeHeadCountResponse> GetAttritionEmployeeDetailsWithColl(Entity.DashboardEmpRequest request)
use
public ActionResult GetAttritionEmployeeDetailsWithColl()
and Return Plain Json instead of kendoDataSourceResult as you're already converting it to kendo datasource in the JavaScript side You must use
return Json(employeeHeadCountResponseList)
this is more than enough.