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

4 posts, 0 answers
  1. FreightRover
    FreightRover avatar
    2 posts
    Member since:
    Apr 2015

    Posted 28 Jun 2017 Link to this post

    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.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 Jun 2017 Link to this post

    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.
  3. FreightRover
    FreightRover avatar
    2 posts
    Member since:
    Apr 2015

    Posted 03 Jul 2017 in reply to Tsvetina Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 05 Jul 2017 Link to this post

    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.
Back to Top