Can't get Server-Side Paging to work with AJAX Binding

[Chris]

I am attempting to enable server-side filtering for my ASP.NET MVC Grid. I have tried every tutorial, walkthrough, and blog post I could find, but with no success.

I would like to, on page load, call out to my data source and return just the first 25 records, but alert the grid of the total record count so that it can display the appropriate number of pages. Here is my Grid Razor code:

@(Html.Kendo().Grid<ViewModel>().Name("MyGrid").EnableCustomBinding(true).Columns(columns =>
  {
    columns.Bound(c => c.FieldA);
    columns.Bound(c => c.FieldB);
    columns.Bound(c => c.FieldC);
    columns.Bound(c => c.FieldD);
  }).ClientDetailTemplateId("DetailsTemplate").HtmlAttributes(new {@class = "myClass"}).DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read
        .Action("Data_Read", "MyController"))
    ).AutoBind(false).Events(events =>
    {
      events.DetailCollapse("setDetailIndicatorToExpand");
      events.DetailExpand("setDetailIndicatorToCollapse");
      events.DataBound("replaceDetailTemplateIndicatorStyle");
    }).Pageable().Deferred())

This was done by following this article: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/binding/custom-binding#configuration-Apply

I have tried many variations of this, including removing AutoBind(). As far as I can tell, part of my issue is that I am not defining what the PageSizes are; whenever I set the PageSizes value I get an error of "Uncaught TypeError: r._query is not a function".

No matter what I try, the page count is always 0.

From the server-side, I am using the PageSize and Page number from the DataSourceRequest object to pass in as parameters to my data source. I am then returning the following:

var result = new DataSourceResult
{
    Data = myData,
    Total = 300 // this is dynamic, just hardcoded here as an example
};

return Json(result);

Can someone please assist?

Thank you.

[Chris]

I have attached an image showing what my pager display always looks like.

 

[Kostadin]

Hello Chris,

I already answered the support ticket with the same requirement. I would appreciate if we continue our conversation in it.

Regards,
Kostadin
Telerik by Progress

[Jesse]

[quote]Kostadin said:Hello Chris,

I already answered the support ticket with the same requirement. I would appreciate if we continue our conversation in it.

[/quote]

But now the rest of us don't know what the solution was.

[Alex Hajigeorgieva]

Hi, Jesse,

The response of my colleague was this:

Could you please verify that the collection that you are passing is not empty and for this purpose to see an empty grid? I would appreciate if you share your View and Controller in order to examine it and check if you are missing something.
Regards the issue with the PageSize could you please verify that the pagesize option is working if you refer all scripts?

And the client seems to have found errors in his server logic and also added this comment, which you may find useful:

The root of it (I believe) was conflicting script includes within the view.

When using the server side extensions in an Ajax grid, the best place to start is the article below:

https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

Let me know if you need further assistance.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Jesse]

Great! Thanks for tracking that down, Alex!