How to send DataSourceRequest object to the controller via ajax call properly?

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,
    }
}