Hello,
This error is happening quite frequently across all three browsers on a ASP.NET MVC Kendo Grid we use. I attempted to wrap any javascript functions we wrote that interact with the kendo controls in document ready but it did not make any difference. Sample code is below:
@Html.HiddenFor(m => m.CustomerTypesQuery)
@(Html.Kendo().Grid<SelectListItem>()
.Name("CustomerTypes")
.HtmlAttributes(new { style = "width: 100%; height: 165px;" })
.Columns(columns =>
{
columns.Bound(p => p.Value).Hidden();
columns.Bound(p => p.Text).Title("Customers");
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadCustomerTypes", "Search"))
.Model(m => m.Id(p => p.Value))
)
.Events(events => events.Change("CustomerTypesChange").DataBound("CustomerTypesDataBound"))
)
<script type="text/javascript">
function CustomerTypesChange() {
var grid = $('#CustomerTypes').data('kendoGrid');
var rows = grid.select();
$('#CustomerTypesQuery').val('');
rows.each(
function () {
var record = grid.dataItem($(this));
$('#CustomerTypesQuery').val($('#CustomerTypesQuery').val() + record.Value + ",");
}
);
$('#CustomerTypesQuery').val($('#CustomerTypesQuery').val().replace(/,$/, ''));
//posts a form to the server
submitAjaxForm();
}
function CustomerTypesDataBound() {
filterHiddenFieldDataBound.call(this, 'CustomerTypesQuery');
}
//wrapping any fo these interactions wit document ready does not help
var filterHiddenFieldDataBound = function(hiddenfield) {
var hiddenfieldId = '#' + hiddenfield;
var grid = this;
var dataSource = this.dataSource;
var matchedItems = new Array();
var value = $(hiddenfieldId).val();
if (value) {
$.each(value.split(','), function() {
var item = dataSource.get(this);
if (item) {
var row = grid.tbody.find('[data-uid=' + item.uid + ']');
row.addClass('k-state-selected');
matchedItems.push(this);
}
});
$(hiddenfieldId).val(matchedItems.toString());
}
};
</script>
I attempted to wrap functions that called the .value() method of kendo in document ready as per http://www.telerik.com/forums/cannot-call-method-%27value%27-of-kendodropdownlist-before-it-is-initialised-error#dhl__nLrG0GvjpwmSeI5PQ but this did not help
We are using kendo version 2014.1.318 but even attempting to upgrade to 2014.1.416 did not fix this issue. I know this is a kendo grid example but the error is being thrown on the kendo drop down list component of the kendo library so I thought this section would be appropriate.
This error is happening quite frequently across all three browsers on a ASP.NET MVC Kendo Grid we use. I attempted to wrap any javascript functions we wrote that interact with the kendo controls in document ready but it did not make any difference. Sample code is below:
@Html.HiddenFor(m => m.CustomerTypesQuery)
@(Html.Kendo().Grid<SelectListItem>()
.Name("CustomerTypes")
.HtmlAttributes(new { style = "width: 100%; height: 165px;" })
.Columns(columns =>
{
columns.Bound(p => p.Value).Hidden();
columns.Bound(p => p.Text).Title("Customers");
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadCustomerTypes", "Search"))
.Model(m => m.Id(p => p.Value))
)
.Events(events => events.Change("CustomerTypesChange").DataBound("CustomerTypesDataBound"))
)
<script type="text/javascript">
function CustomerTypesChange() {
var grid = $('#CustomerTypes').data('kendoGrid');
var rows = grid.select();
$('#CustomerTypesQuery').val('');
rows.each(
function () {
var record = grid.dataItem($(this));
$('#CustomerTypesQuery').val($('#CustomerTypesQuery').val() + record.Value + ",");
}
);
$('#CustomerTypesQuery').val($('#CustomerTypesQuery').val().replace(/,$/, ''));
//posts a form to the server
submitAjaxForm();
}
function CustomerTypesDataBound() {
filterHiddenFieldDataBound.call(this, 'CustomerTypesQuery');
}
//wrapping any fo these interactions wit document ready does not help
var filterHiddenFieldDataBound = function(hiddenfield) {
var hiddenfieldId = '#' + hiddenfield;
var grid = this;
var dataSource = this.dataSource;
var matchedItems = new Array();
var value = $(hiddenfieldId).val();
if (value) {
$.each(value.split(','), function() {
var item = dataSource.get(this);
if (item) {
var row = grid.tbody.find('[data-uid=' + item.uid + ']');
row.addClass('k-state-selected');
matchedItems.push(this);
}
});
$(hiddenfieldId).val(matchedItems.toString());
}
};
</script>
I attempted to wrap functions that called the .value() method of kendo in document ready as per http://www.telerik.com/forums/cannot-call-method-%27value%27-of-kendodropdownlist-before-it-is-initialised-error#dhl__nLrG0GvjpwmSeI5PQ but this did not help
We are using kendo version 2014.1.318 but even attempting to upgrade to 2014.1.416 did not fix this issue. I know this is a kendo grid example but the error is being thrown on the kendo drop down list component of the kendo library so I thought this section would be appropriate.