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

6 posts, 1 answers
  1. Chris
    Chris avatar
    8 posts
    Member since:
    Jul 2015

    Posted 03 Oct 2016 Link to this post

    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.

  2. Chris
    Chris avatar
    8 posts
    Member since:
    Jul 2015

    Posted 04 Oct 2016 in reply to Chris Link to this post

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

     

  3. Answer
    Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 05 Oct 2016 Link to this post

    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
  4. Jesse
    Jesse avatar
    54 posts
    Member since:
    Aug 2013

    Posted 11 Apr 2018 in reply to Kostadin Link to this post

    Kostadin said:Hello Chris,

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

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

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1037 posts

    Posted 13 Apr 2018 Link to this post

    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.
  6. Jesse
    Jesse avatar
    54 posts
    Member since:
    Aug 2013

    Posted 26 Apr 2018 in reply to Alex Hajigeorgieva Link to this post

    Great! Thanks for tracking that down, Alex!
Back to Top