Kendo Pagination not working with new upgrade

4 posts, 1 answers
  1. Venku
    Venku avatar
    4 posts
    Member since:
    Jan 2016

    Posted 09 Feb 2020 Link to this post

    Hi,

    We are seeing an issue with new Kendo upgrade (2020). There are 2 scenarios that we have found that Kendo grid pagination is not working.

    Scenario 1 : 

    Kendo pagination doesn't work on the pageload, but it starts working when I click F12 to inspect the elements. It was working fine with the old version (2017). Below is the source code for the Grid.

      @(Html.Kendo().Grid<vm>()
                                                                .Name("id")
                                                                .Columns(columns =>
                                                                {
                                                                    columns.Bound(d => d.FirstName).Title("First Name").Width(150);
                                                                    columns.Bound(d => d.LastName).Title("Last Name").Width(150);
                                                                    columns.Bound(d => d.MemberAddress).Title("Address");
                                                                    columns.Bound(d => d.MemberDOB_STR).Title("DOB").Format("{0:MM/dd/yyyy}").Width(100);
                                                                    columns.Bound(d => d.MemberId).Title("Member ID").Width(140);
                                                                    columns.Bound(d => d.ZipCode).Title("Zip Code").Width(120);                                                                
                                                                })
                                                                .ToolBar(tools => tools.Excel())
                                                              .Excel(excel => excel
                                                              .Filterable(true)
                                                                .Filterable(filterable => filterable.Extra(false).Operators(operators => operators.ForString(str => str.Clear().StartsWith("Starts with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
                                                                .Scrollable(s => s.Height("200px"))
                                                                .Pageable()
                                                                 .Resizable(resize => resize.Columns(true))                                                      
                                                                .Sortable()
                                                                .DataSource(dataSource => dataSource
                                                                .Ajax()
                                                                 .Sort(s => s.Add("MemberId").Descending())
                                                                .PageSize(10)
                                                                .Read(read => read.Action("Some Action", "Controller").Data(""))
                                                            ).AutoBind(false)
                )

     

    Scenario 2: 

     

    In this case the pagination doesn't even work . The same was working fine with the old verison.

     

      @(Html.Kendo().Grid<DiagnosisICDVM>()
                                .Name("grdMemberDiagnosis")
                                .Events(e => e.DataBound("DisplayDataMessageMemberDiagnosis"))
                                .Columns(columns =>
                                {
                                    columns.Bound(d => d.CDCode).Title("Code").Width(100);
                                    columns.Bound(d => d.Description).Title("Diagnosis").Width(250);
                                    columns.Bound(d => d.CodeVersion).Title("ICD Version").Width(120);
                                    columns.Bound(d => d.ICDStartDate).Title("Start Date").EditorTemplateName("date").Format("{0:MM/dd/yyyy}").Width(120);
                                    columns.Bound(d => d.ICDEndDate).Title("End Date").EditorTemplateName("date").Format("{0:MM/dd/yyyy}").Width(120);
                                    columns.Bound(d => d.SourceType).Title("Source").Width(120).HtmlAttributes(new { title = "#=SourceType#" });
                                })
                                .ToolBar(tools => tools.Excel())
                                      .Excel(excel => excel
                                      .Filterable(true)
                            .Pageable(p => p.PageSizes(true).Refresh(true))
                            .Resizable(resize => resize.Columns(true))
                            .Sortable()
                            .Scrollable()
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Sort(s => s.Add("CDCode"))
                            .PageSize(100)
                              .Model(model => { model.Id(p => p.CDCode); })
                            .Events(events => events.Error("error_handler"))
                            .Read(read => read.Action("Some Action", controller).Data("JSFunction")))
            )

    Bootstrap 3 and JQuery 1.12.4 being used as per the Kendo recommendation.

    Please help in resolving this issue as we are close on the deadlines.

     

    Thanks

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2154 posts

    Posted 11 Feb 2020 Link to this post

    Hi Venku,

    In order for paging to work, the Grid needs information on the total number of records the data contains. See this screenshot, which shows how the response from the server looks like: https://www.screencast.com/t/NArlyvu1k

    Check the response from the "Some Action" end point and verify that it returns the data in the format shown above.

    We would recommend converting the data into a DataSourceResult object and returning it as JSON. For more details, see 7. and 8. in the AJAX Binding documentation article: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/binding/ajax-binding

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Venku
    Venku avatar
    4 posts
    Member since:
    Jan 2016

    Posted 10 Apr 2020 in reply to Ivan Danchev Link to this post

    --Issue Resolved---

    Hi Ivan,

    Thanks for the reply.

    Count is being sent from the server to kendo grid appropriately . 

    I have observed that this issue is caused by Responsive function in the Pagination API in the kendo grid.

    i.e Pagination.Responsive()

    By setting Responsive as false, this issue has been resolved.

    Please let us know if this is something need to be taken care by Telerik team or the developer.

    Thanks,

  4. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2154 posts

    Posted 14 Apr 2020 Link to this post

    Hi Venku,

    By default Responsive is enabled, and it shouldn't cause any issues. See our demos, which run on version 2020.1.406 and in which Responsive is not disabled: https://demos.telerik.com/aspnet-mvc/grid

    The issue appears to be specific to your project, which could be due to custom styles, so we would suggest attaching a sample project that demonstrates the problematic behavior with Responsive enabled. This will allow us to further investigate what could be causing it.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top