Kendo grid server side pagination throws "Uncaught TypeError: r[n].call is not a function" upon navigating to next page

[FreightRover]

We were using telerik version Kendo UI v2015.1.408 and recently upgraded to Kendo UI v2017.2.504 after which the server side pagination is not working fine. The sample code is as follows:

var allNameDataSource = new kendo.data.DataSource({
             serverPaging: true,
             serverFiltering: true,
             transport: {
                 read: {
                     url: "/StudentNames/Name/GetAllNames",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     async: false,
                     type: "POST"
                 },
                 parameterMap: function (options, operation) {
                     debugger;
                     if (operation !== "read" && options) {
                         return JSON.stringify({
                             model: options
                         });
                     }
                     else if (operation == "read") {
                         debugger;
                         var sortOrderField = null;
                         var sortOrderValue = null;
                         var selectedSorting = allNameViewModel.allNameDataSource.sort();
                         if (typeof (selectedSorting) != "undefined" && selectedSorting.length > 0) {
                             sortOrderField = selectedSorting[0].field;
                             sortOrderValue = selectedSorting[0].dir;
                         }
                         var filterAndCondition = allNameViewModel.allNameDataSource.filter();
                         if (typeof (filterAndCondition) != "undefined" && filterAndCondition != null) {
                             if (filterAndCondition.filters.length > 0) {
                                 debugger;
                                 allNameViewModel.pushKendoCustomFilter(filterAndCondition);
                                 debugger;
                                 var CustomFilters = allNameViewModel.Filters;
                                 return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter, CustomFilters: CustomFilters });
                             }
                         }
                         return JSON.stringify({ skip: options.skip, take: options.take, pageSize: options.pageSize, OrderByField: sortOrderField, OrderByValue: sortOrderValue, filter: allNameViewModel.filter });
                     }
                 }
             },

           pageSize: PageCountValue > 0 ? PageCountValue: 10,
             schema: {
                 model: {
                     id: "StudentId",
                     fields: {
                         Name: { type: 'string' },
                         Age: { type: 'string' },                      
                        Address: { type: 'string' },
                         Email: { type: 'string' }                        
                   }
                 },
                 data: function (data) {
                     return data.data;
                 },
                 total: function (data) {
                     return data.total;
                 },
             }
         }),

Please let me know what is wrong with this.

[Tsvetina]

Hi,

The error message comes from the minified Kendo UI scripts and it does not tell much. To see what error exactly is thrown and on what line of kendo.all, it would be best if you could temporaily reference kendo.all.js instead of kendo.all.min.js. You can find this file in the Kendo UI Professional Source archive:

1) Go to your Telerik account -> Downloads -> Kendo UI Professional.
2) Scroll down to Source Code section and download one of the two archives.
3) The kendo.all.js file is in the src/js folder.

When you see the actual error message and line, you can post them here.

Additionally, have you checked the details about the request that the DataSource makes to the server? You can check the content of the request and response body in the browser developer tools (F12) Network tab for any unexpected parameters or data.

Regards,
Tsvetina
Progress Telerik

[FreightRover]

As per your request we have downloaded and used the latest kendo.all.js instead of kendo.all.min.js and this is the error message we received 

Uncaught TypeError: events[idx].call is not a function
error
[Violation] 'click' handler took 1225ms
kendo.all.js:124 Uncaught TypeError: events[idx].call is not a function
    at init.trigger (kendo.all.js:124)
    at init.<anonymous> (kendo.all.js:51475)
    at init.trigger (kendo.all.js:124)
    at init.page (kendo.all.js:26335)
    at init._click (kendo.all.js:26324)
    at HTMLAnchorElement.f (jquery-2.1.3.min.js:2)
    at HTMLDivElement.dispatch (jquery-2.1.3.min.js:3)
    at HTMLDivElement.r.handle (jquery-2.1.3.min.js:3)

The following error occurs in the below mentioned line (Line No: 123 in kendo.all.js):

for (idx = 0, length = events.length; idx < length; idx++) {
                   events[idx].call(that, e);
                 }

Please reply back as soon as possible

[Tsvetina]

Hi Michael,

The error occurs in the Observable class definition, which is a base class for all Kendo UI widgets. I would guess that there is some problem with triggering the Grid page event (introduced in 2016 R3 release).

Can you show us your Grid definition as well? Could you confirm that there is no page setting in it, different than an event handler assignment? I am able to reproduce the same error if I set, for example: page: 5 in the Grid settings, which is an invalid value for an event handler assignment.

Regards,
Tsvetina
Progress Telerik