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

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

10 Answers 330 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jayme
Top achievements
Rank 1
Jayme asked on 11 Sep 2015, 03:32 AM

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




 

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Sep 2015, 06:32 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Robert
Top achievements
Rank 1
answered on 23 Sep 2015, 07:09 PM

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 

0
Robert
Top achievements
Rank 1
answered on 23 Sep 2015, 07:12 PM

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

0
Jayme
Top achievements
Rank 1
answered on 25 Sep 2015, 10:18 AM
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.
0
Dimo
Telerik team
answered on 25 Sep 2015, 02:59 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jayme
Top achievements
Rank 1
answered on 25 Sep 2015, 03:59 PM

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

 

0
Dimo
Telerik team
answered on 29 Sep 2015, 07:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Manish
Top achievements
Rank 1
answered on 09 Nov 2015, 12:49 PM

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

0
Jayme
Top achievements
Rank 1
answered on 11 Nov 2015, 10:25 AM

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.

 

0
Manish
Top achievements
Rank 1
answered on 16 Nov 2015, 06:55 AM

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

Tags
Grid
Asked by
Jayme
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Robert
Top achievements
Rank 1
Jayme
Top achievements
Rank 1
Manish
Top achievements
Rank 1
Share this question
or