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

Grid + Pager: Cannot call method 'value' of kendoDropDownList before it is initialized

7 Answers 690 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Csaba
Top achievements
Rank 1
Csaba asked on 20 Jul 2013, 08:33 AM
I made a SPA, and I replace the #content after every menu element click.
First time when I load a grid it's work correctly. After when I click to the menu element I get this error message: Cannot call method 'value' of kendoDropDownList before it is initialized.
If I don't use pager it's work correctly.
Can somebody help me?

Here is the code:
var obuDS = new kendo.data.DataSource({
    transport: {
        read: {
            url: function(data) {
                return api_url_v1+"obus/user/"+$.cookie('user')+"?ssid="+$.cookie('ssid');
            },
            dataType: "json",
            complete: function(response,type) {
            }
        }
    },
    pageSize: 10
});
01.webcontrol.route("/obus", function() {
02.    $("#content").html(obus({}));
03.    $("#obus").kendoGrid({
04.        dataSource: obuDS,
05.        sortable: true,
06.        filterable: true,
07.        pageable: {
08.            refresh: true,
09.            pageSizes: true
10.        },
11.        columns: [
12.            { field: "name",        title: "Name",      width: 50, template: "<a href=\"\\#/obu/#:obu#/0\">#:name#</a>" },
13.            { field: "obu",         title: "OBU",   width: 70},
14.            { field: "country",     title: "Country",       width: 30 },
15.            { field: "eurocode",    title: "EURO",          width: 30 }
16.        ]
17.    });
18.});

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 23 Jul 2013, 04:23 PM
Hello Csaba,

I am afraid that the provided information is not sufficient enough in order to determine where exactly the problem comes from. I cannot see a DropDownList control in the provided code snippet.

Would it be possible for you to provide a more complete jsBin sample which isolates the issue? In this way I would be able to examine your current implementation in details and assist you further.

Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tom
Top achievements
Rank 1
answered on 01 Oct 2013, 11:16 AM
I suspect this is the same as my problem, the kendoDropDownList in question is that of the pageSizes control; and its failing on exactly this line (kendo.web.js), in the pager widget:
            if (options.pageSizes) {
                that.element.find(".k-pager-sizes select").val(pageSize).filter("[" + kendo.attr("role") + "=dropdownlist]").kendoDropDownList("value", pageSize).kendoDropDownList("text", pageSize);

Same for me, when i create a kendo grid, remove it from the DOM (Backbone.js view closed), then re-create it - it fails only on the re-create.

There is some event firing that is calling pager.refresh when the drop-down widget is not initialised:
Call stack is attached - it starts with the success callback of an AJAX call, most likely the return of the dataSource.read() operation - and ends with the refresh method on the Kendo pager.

Removing the pager stops the error, but then the whole grid freezes up.

...on further analysis... the second time 'round the kendoDropDownList widget is gone. The drop-down is in the DOM fine - but jQuery data is not attached. I can see the drop-down initialised + attached to a Kendo widget, but by the time it get's round to the refresh method, the widget is gone.

0
Tom
Top achievements
Rank 1
answered on 02 Oct 2013, 02:47 PM
OK, i have fixed this - my mistake. I was removing and re-adding stuff from the DOM without using detach() - so all jQuery data was nuked.
0
Ryan
Top achievements
Rank 1
answered on 04 Nov 2015, 02:44 PM

Hi,

I'm not sure whether I should create a new post as this is 3 years old or just reply to this one, but here goes. I have the same issue as in the title and Tom spells out my issue quite well. I am using angularjs/Typescript/jquery 2.1.4 and kendo v2015.2.902. When I remove the pagerSize: true below in my grid options everything works fine.

When using the PagerSize: true, I am able to view the grid with the pager and it works fine but if I navigate away, using angularjs state/route then I go back to the view I was on with the pageSize: true then it throw the error. Any help you can give would be appreciated. FYI, I am not using detach() as mentioned above.

pageable: {
                    refresh: false,
                    pageSizes: true
                },

 

Error: Cannot call method 'value' of kendoDropDownList before it is initialized
   at Anonymous function (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:10:2625)
   at each (http://localhost/S​oftwareV2/Scripts/jquery-2.1.4.js:374:6)
   at jQuery.prototype.each (http://localhost/S​oftwareV2/Scripts/jquery-2.1.4.js:139:3)
   at e.fn[a] (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:10:2528)
   at refresh (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:20:5052)
   at proxy (http://localhost/S​oftwareV2/Scripts/jquery-2.1.4.js:512:4)
   at trigger (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:9:6446)
   at _process (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:11:30490)
   at success (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:11:26496)
   at success (http://localhost/S​oftwareV2/Scripts/kendotrial/js/kendo.all.min.js:11:25358)

0
Alexander Valchev
Telerik team
answered on 06 Nov 2015, 12:25 PM
Hi Ryan,

Please check this forum thread:

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jason
Top achievements
Rank 1
answered on 13 Mar 2017, 08:49 PM
Has a solution been posted for this issue? I am getting the same error as a result of the Kendo Grid's pageSizes:true setting. I have the following implementation:

pageable: {
            refresh: true,
            pageSizes: [10, 15, 20, 25, 'All'], // If I remove this or set to false no error is thrown
        },  

My application is a SPA that is populating a div with partial views. These partial views contain the grid. I have tried $(window).on("unload", function() {}); like some have suggested, destroying the grid like others have suggested, and adding the destroy() code within the window unload like this $(window).on("unload", function() { // destroy() code... });  But nothing works, and the 'Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized' persists.
0
Viktor Tachev
Telerik team
answered on 15 Mar 2017, 01:18 PM
Hi Jason,

Please ensure that you are using the latest version of the components. The current release is 2017.1.223. I tested the behavior with the same setup as the one you have described and it works as expected on my end. Check out the example below as reference.



Regards,
Viktor Tachev
Telerik by Progress
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
Csaba
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Tom
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Jason
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or