Kendo Pagination not working with new upgrade

[Venku]

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

 

[Ivan Danchev]

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

[Venku]

--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,

[Anonymous]

This solved my problem when upgrading from an old 2019 to 2023 version of Kendo. Just had to add .Reponse(false) and the pagination started showing up properly on the grid again.

Thank you!!

[Ivan Danchev]

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