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

[Csaba]

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.});

[Alexander Valchev]

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

[Tom]

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.

[Tom]

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.

[Ryan]

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)

[Alexander Valchev]

Hi Ryan,

Please check this forum thread:

• http://www.telerik.com/forums/grid-pageable-error-uncaught-error-cannot-call-method-'value'-of-kendodropdownlist-before-it-is-initialized

Regards,
Alexander Valchev
Telerik

 

 

[Jason]

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.

[swetha]

hello @jason 

it's working. But I want server-side paging

if you don't mind please suggest to me 

[Martin]

Hello, Swetha,

Here is a Grid demo with server paging configured which should be helpful. If not, kindly share a small runnable example where I can see the Grid configuration and the issues you are experiencing.

[Viktor Tachev]

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.

• http://dojo.telerik.com/otawI/3

Regards,
Viktor Tachev
Telerik by Progress