How to send DataSourceRequest object to the controller via ajax call properly? - asp.net-mvc

Question

I have a kendo grid on my razor view mvc as below:
#(Html.Kendo().Grid(Model.employeeList)
.Name("grid")
.Pageable(pager => pager
.Messages(messages => messages.Empty("No data"))
)
.Pageable(pager => pager
.PageSizes(new[] { 15, 20, 25, 50 })
)
.Filterable()
.Groupable()
.Sortable()
.Columns(columns =>
{
columns.Bound(employee => employee.employeeId);
columns.Bound(employee => employee.firstName);
columns.Bound(employee => employee.lastName);
columns.Bound(employee => employee.jobTitle);
columns.Bound(employee => employee.employeeId).ClientTemplate(
"<a href='" + Url.Action("Edit", "Employee", new { id = "#=employeeId#" }) + "'>Edit</a> | " +
"<a href='" + Url.Action("Details", "Employee", new { id = "#=employeeId#" }) + "'>Details</a> | " +
"<a href='" + Url.Action("Delete", "Employee", new { id = "#=employeeId#" }) + "'>Delete</a>"
)
.Filterable(false)
.Groupable(false)
.Sortable(false)
.Title("");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetEmployeesList", "Employee").Data("branchData")).PageSize(15)
)
)
Along with the controller for GetEmployeesList ActionResult:
[HttpPost]
public ActionResult GetEmployeesList([DataSourceRequest]DataSourceRequest request, int branchId, bool includeNonActive)
{
IQueryable<Employee> employees;
if (includeNonActive)
{
employees = db.Employee.Where(e => e.branchId == branchId && e.isDeleted == false)
.Include(e => e.HireType).Include(e => e.HireStatus);
}
else
{
employees = db.Employee.Where(e => e.branchId == branchId && e.HireStatus.hireStatusId == 1 && e.isDeleted == false)
.Include(e => e.HireType).Include(e => e.HireStatus);
}
DataSourceResult result = employees.ToDataSourceResult(request, employee => new EmployeeViewModel
{
employeeId = employee.employeeId,
firstName = employee.firstName,
lastName = employee.lastName,
jobTitle = employee.jobTitle,
HireStatus = new HireStatus() { hireStatus = employee.HireStatus.hireStatus },
HireType = new HireType() { hireType = employee.HireType.hireType }
});
return Json(result);
}
So far, everything went well. DataSourceRequest request was passed from the grid successfully.
But then I have another post AJAX call via jQuery:
$(document).ready(function () {
$('#ddlBranchList').change(function () {
var isNonActive = $('#isNonActive')[0].checked;
var ddlValue = $('#ddlBranchList').val();
$.ajax({
type: "POST",
url: "/Employee/GetEmployeesList",
data: JSON.stringify({ branchId: ddlValue, includeNonActive: isNonActive }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
resultData = result;
},
error: function () {
alert("Error retrieving Employees List!");
}
}).done(function () {
var dataSource = new kendo.data.DataSource({
data: resultData.Data,
pageSize: 15
});
var grid = $('#grid').data("kendoGrid");
grid.setDataSource(dataSource);
dataSource.read();
});
});
}
A dropdown change event should trigger an ajax post to the controller, but I couldn't properly pass a proper object to DataSourceRequest request parameter. When it is posted, DataSourceRequest request is always null.
How do I pass the object correctly?

Answer 1

I got it working by forcing the kendo grid to re-read the data:
$('#ddlBranchList').change(function () {
var grid = $('#grid').data("kendoGrid");
grid.dataSource.read();
});
and then modify the branchData function:
function branchData() {
var isNonActive = $('#isNonActive')[0].checked;
var ddlValue = $('#ddlBranchList').val();
if (ddlValue > 0) {
branchId = ddlValue;
}
return {
branchId: branchId,
includeNonActive: isNonActive,
}
}