This is a migrated thread and some comments may be shown as answers.

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

5 Answers 173 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 2
Chris asked on 03 Oct 2016, 10:40 PM

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.

5 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 2
answered on 04 Oct 2016, 12:48 PM

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

 

0
Accepted
Kostadin
Telerik team
answered on 05 Oct 2016, 11:55 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jesse
Top achievements
Rank 1
Veteran
answered on 11 Apr 2018, 05:05 PM

[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.

0
Alex Hajigeorgieva
Telerik team
answered on 13 Apr 2018, 01:54 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 26 Apr 2018, 01:19 PM
Great! Thanks for tracking that down, Alex!
Tags
Grid
Asked by
Chris
Top achievements
Rank 2
Answers by
Chris
Top achievements
Rank 2
Kostadin
Telerik team
Jesse
Top achievements
Rank 1
Veteran
Alex Hajigeorgieva
Telerik team
Share this question
or