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 1141 Views

Grid

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

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

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!

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

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