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

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

3 Answers 1890 Views
Grid
This is a migrated thread and some comments may be shown as answers.
FreightRover
Top achievements
Rank 1
FreightRover asked on 28 Jun 2017, 01:48 PM

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.

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 30 Jun 2017, 10:56 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
FreightRover
Top achievements
Rank 1
answered on 03 Jul 2017, 12:05 PM

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

0
Tsvetina
Telerik team
answered on 05 Jul 2017, 12:01 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
FreightRover
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
FreightRover
Top achievements
Rank 1
Share this question
or