Set Kendo UI Grid Page Index in the MVC Controller

Question

I'm trying to set the page index for a kendo grid on the controller to avoid the client side paging. When using the client side paging to does not show any records besides that on the first page. When calling the data from the controller, I only return the 10 records that are required for the page. The data call includes Skip() and Take() functions to only return needed from the server instead of loading the whole grid.

.cshtml

@(Html.Kendo().Grid<Reckon.Service.Payroll.Data.DTO.EmployeeDto>()
        .Name("EmployeeGrid")
        .Columns(cols => 
        {
                cols.Bound(emp => emp.Id).Title("ID").Hidden();
                cols.Bound(emp => emp.EmployeeNumber).Title("Employee ID").Width(100);
                cols.Bound(emp => emp.IsPayRunReady).Title("Status").Width(10).ClientTemplate("<span title='This employee is #= IsPayRunReady ? '': 'not '#payrun ready.' class='#= IsPayRunReady ? 'okICN-small' : 'alertICN-small'#'>#= IsPayRunReady ? '': 'Not' # #= IsPayRunReady ? 'P':'p'#ayrun ready</span>");
                cols.Bound(emp => emp.FirstName).Title("First Name").Width(100);
                cols.Bound(emp => emp.LastName).Title("Last Name").Width(100);
                cols.Bound(emp => emp.DateOfBirth).Title("DOB").Format("{0:dd/MM/yyyy}").Width(100);
                cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailEdit", "EmployeeDetail") + "/#=Id#'>Edit</a>").Width(50);
                cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailRead", "EmployeeDetailRead") + "/#=Id#'>View</a>").Width(50);
                cols.Template(@<text></text>).ClientTemplate("<a class='k-button xxx' tag='#=Id#'>Delete</a>").Width(50);
        })
            .Pageable(pageable => pageable.ButtonCount(5))
            .Sortable(sortable => sortable.AllowUnsort(false))
            .Filterable()
            .Resizable(resize => resize.Columns(true))
            .Reorderable(reorder => reorder.Columns(true))
            .Navigatable()
            .Events(evt => evt.DataBound("afterGridLoaded"))
            .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .PageSize(10)
                                    .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(emp => emp.Id);
                                    })
                                    .Read(read => read.Action("EmployeeListPerPage", "EmployeeDetail"))
                                   )
      )

.cs

public ActionResult EmployeeListPerPage([DataSourceRequest] DataSourceRequest request)
    {
        Dispose();
        EmployeeListRequest empList = new EmployeeListRequest();
        empList.PageNum = request.Page;
        empList.PageSize = request.PageSize;
        //empList.OrderBy = null; //request.Sorts.Any() ? "EmployeeNumber" : request.Sorts[0].Member;

        var dataSource = _payrollService.GetEmployeeListPerPage(empList);
        var model = new EmployeeListModel(dataSource);

        DataSourceResult result = model.Employees.ToDataSourceResult(request);
        result.Total = dataSource.Total;            

        // Set the Page index here

        return Json(result, JsonRequestBehavior.AllowGet);            
    }

When using the client side paging, it sets the return data to the first page and then performs the client side paging returning no results.

Is it possible to be done? Any help would be greatly appreciated.

The kendo paging is client side and when the data is returned from the server-side it will only return the 10 records that was needed for the current page. The records are bind to the grid as the first 10 records and when you click for any other page besides the first page, it will not display any other records. That is the reason why I don't want to use the kendo paging as I'm not returning all the data to the grid and only the data that is needed for the current selected page. — Peter Channon
I don't understand why you're trying to do this: empList.PageNum = request.Page; You're doing a lot of extra work there, essentially fighting what Kendo does automatically for you. If you visit a page (via querystring), it will return the proper page for you. — Matt Millican
This, empList.PageNum = request.Page;, is done because the function GetEmployeeListPerPage takes in a EmployeeListRequest parameter only. Can you please give me an example? — Peter Channon
Is your GetEmployeeListPerPage() method returning an IQueryable<T> and are you using Entity Framework or nHibernate? It still seems like you're trying to fight Kendo. See Step 7 here: docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/… — Matt Millican

Matt Millican Matt Millican · Accepted Answer · 2013-12-23T18:38:35

Since you're using Entity Framework, change your controller to this to let Kendo/EF take care of the paging (it will be server side):

public ActionResult EmployeeList([DataSourceRequest] DataSourceRequest request)
{
    var employees = from emp in dbContext.Employees
                    select emp;

    return Json(employees.ToDataSourceResult(request), JsonRequestBehavior.
}

That's a rough example, but should be a starting point.

Set Kendo UI Grid Page Index in the MVC Controller

1 Answers