[Solved] MVC Grid Paging Not Working With Ajax DataSource

[Rehan]

I have the following code:

Controller Action

[HttpPost, Route("json", Name = "GetIndexJson")]
public ActionResult Index([DataSourceRequest]DataSourceRequest request)
{
    IQueryable<IncidentIndexViewModel> incidents = this.databast.Incidents
        .Select(i =>
            new IncidentIndexViewModel()
            {
                Name = i.Name,
            });

    DataSourceResult result = incidents.ToDataSourceResult(request);
    return this.Json(result, JsonRequestBehavior.AllowGet);
}

View

@(Html.Kendo()
    .Grid<IncidentIndexViewModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(14)
        .Read(read => read.Route("GetIndexJson").Type(HttpVerbs.Post))
        .ServerOperation(true))
    .Columns(
        columns =>
        {
            columns.Bound(x => x.Name).Width(70);
        })
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Sortable(x => x.SortMode(GridSortMode.MultipleColumn))
    .Filterable()
    .Groupable()
    .Navigatable()
    .Selectable(x => x.Mode(GridSelectionMode.Single))
    .Pageable(x => x.Enabled(true).Refresh(true))
    .Scrollable(x => x.Height(423)))

However, the paging on the grid does not work. The page is stuck on page zero but has the next page button enabled. When I click the next page button I get the following JavaScript error:

Unhandled exception at line 89, column 3956 in http://localhost/bundles/kendo
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'slice'

[Nikolay Rusev]

Hello Rehan,

Can you demonstrate this behavior in a runnable example? We will need on in order to debug it locally and assist you further.

You also go through the steps in the following article - Grid Ajax Binding, and see whether your setup follows them.

Regards,
Nikolay Rusev
Telerik