Grid + Pageable Error: Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized

[Jayme]

I have an Angular JS app.  When I browse to a new page and go back to the page with the grid, I receive the following error:

"Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized"

Datasource:
app.factory('giftService', ['coreSettings', function (coreSettings) { 
    var giftServiceFactory = {};
    var crudServiceBaseUrl = coreSettings.apiServiceBaseUri + "odata/Order";
    var ds = new kendo.data.DataSource({     
        type: "odata",
        transport: {
            read: {
                url: crudServiceBaseUrl,
                dataType: "json"
            }
        },
        batch: false,
        serverPaging: true,
        pageSize:10,
        serverSorting: true,
        serverFiltering: true,
        aggregate: [
               { field: "Amount", aggregate: "sum" }
        ],
        schema: {
            errors: function (response) {
                if (response.Errors) {
                    return (response.Errors);
                    this.cancelChanges();
                }
            },
            data: function (data) { return data.value; },
            total: function (data) { return data["odata.count"]; },
            model: {
                fields: {
               ​...
                }
            }
          
        },
        error: function (e) {
            return (e.xhr.responseText);
            this.cancelChanges();
        },
        success: function (e) {
            alert('Success!');
        }
    })

    giftServiceFactory.ds = ds;
    return giftServiceFactory;

}]);

Angular Controller:

 $scope.gifts = salesService.GetAllGifts();

    $scope.gridOptions = {
        toolbar:  ["excel"],
        excel: {
            fileName: "Exclusively Gifted Sales.xlsx",          
            filterable: true,
            allPages: true
        },
        sortable: true,
        selectable: true,
        reorderable: true,
        groupable: true,
        columnmenu: true,      
        pageable: {
            refresh: true,
            pageSizes: true,
            pageSize: 10,
            messages: {
                refresh: "Refresh the grid"
            }
        },
        filterable: true ,
        dataSource: $scope.gifts,
        columns: [
            { field: "PurchaserName", title: "Purchaser" },
            { field: "SendMethodPurchaser", title: "Purchaser Email" },
            { field: "RecipientName", title: "Recipient" },
            {
                field: "Amount", format: "{0:c}", aggregates: ["sum"],
                footerTemplate: "Total Amount: #= kendo.toString(sum, 'C') #",
                groupFooterTemplate: "Total : #= kendo.toString(sum, 'C') #"               
            },
            { field: "PurchaseDate", title: "Purchased", format: "{0:yyyy-MM-dd}" },
            { field: "SendDate", title: "Sent", format: "{0:yyyy-MM-dd}" },
            { field: "RedeemedDate", title: "Redeemed", format: "{0:yyyy-MM-dd}" }
        ]
    };


Do you have any suggestions as to what can be causing this behavior? When I remove the paging the issue does not occur.  Many thanks,

 

Jayme

​

 

[Dimo]

Hello Jayme,

My understanding is that the error occurs only when the browser's back button is pressed, and no problem is exhibited on initial page load. If this is the case, then a possible cause of the Javascript error is an invalid page state, retrieved from the so-called browser bfcache (back-forward cache). The easiest way to disable this cache is to subscribe to the unload event of the page.

$(window).unload(function(){});

Please check the following SO thread for more relevant information.

http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates/1195934#1195934

Regards,
Dimo
Telerik

 

 

[Robert]

Hi Dimo,

 We're having the same issue using AngularJS and KendoUI.

 Error: Cannot call method 'value' of kendoDropDownList before it is initialized

    at Error (native)
    at HTMLSelectElement.<anonymous> (http://localhost:56537/app/lib/kendo/kendo.all.min.js:10:2501)

 

 

 The user is not hitting the back button on the browser.  I can navigate to a page with a summary grid, then I choose an option to view a more detailed version of a similar grid and that's when I start to receive the error.

 

We are using the angular-ui-router and the detailed grid is a child view of the summary grid and view.

 

 

 

Can you 

[Robert]

Hi Dimo, 

Can you please provide more details on what we should put in the function that is called by the unload function?  What are we supposed to do?  The thread you referenced doesn't provide any working solutions.

 

$(window).unload(function(){});

Please check the following SO thread for more relevant information.

http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates/1195934#1195934

[Jayme]

Like Robert, we are also experiencing this error when navigating (though our app is a SPA).  I have not addressed this issue yet - but it is odd that it is occurs only when  pageSizes: true is set.

[Dimo]

Hello,

The unload handler doesn't have to do anything particular, its very existence disables the browser's bfcache.

The issue occurs only when pageSizes:true is set, because otherwise there is no DropDownList in the Grid pager.

In case the problem persists and you need further assistance, please provide a standalone runnable example for inspection.

Regards,
Dimo
Telerik

[Jayme]

The problem does indeed persist.  As to your suggestion of using  $(window).unload(function(){});  - what is the Angular way to use this?  When I have a few moments, I'll post our code in Fiddler or Plunker for you to see.  There are tons of people listing the same issue all over StackOverflow with no resolution though.

Many thanks for your time,

Jayme

 

[Dimo]

Hello Jayme,

OK, I will be looking forward to your demo, so that we can track down the cause of the problem. In the meantime, you can also verify that there are no duplicate jQuery instaces loaded at any time.

http://docs.telerik.com/kendo-ui/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined

I am afraid I am not able to comment on the Angular way to attach a window.unload handler, as this is not a Kendo UI-specific question.

Regards,
Dimo
Telerik

[Manish]

I faced the same issue, and yes there is a fix for it, basically you just need to destroy the grid before your redirect...

The best way to tackle this is by using "resolve" in $routeProvider

$routeProvider.when('/' + nPageData.id, {
                        controller: nPageData.id + "Controller",
                        template: vm.getPageHTML(nPageData),
                        resolve:{
                            "kendogridfix":function($location){
                                angular.element("[kendo-grid]").each(function(idx,kGrid){
                                    var dataObj=angular.element(kGrid).data();
                                    for(mData in dataObj)
                                    {
                                        if(angular.isObject(dataObj[mData]))
                                        {
                                            if("destroy" in dataObj[mData])
                                            {
                                                dataObj[mData].destroy();
                                            }
                                        }
                                    }
                                })
                            }
                        }
                    });

Hope this helps...

[Jayme]

Excellent - thank you for the fix.  

I did notice that the grid does not do this consistently in an AngularJS SPA.  I have 3 views with grids and the issue only persists on 2 of them. 

On the page that does not have the issue, I did have tooltips and experienced the issue, however when I removed the tooltips the issue went away.  Unfortunately, I removed the tooltip from one of the other grids but it still has the issue.  Its a very odd issue. 

If I figure out the cause, I will post back.

 

[Manish]

Hi,

 

I am using tooltip also with grid, basically to show a tooltip when you hover on the small arrow button to show details in grid... and even pageSize dropdown... i have total 5 views with kendo grid in each view and it works perfectly fine...