Menu
I keep getting the following error when I try to create a Grid or a Chart using Kendo UI. A simple ComboBox will work, though. We are using the commercial lisence and downloaded the js and css from Telerik's website while authenticated.
Uncaught ReferenceError: kendo is not defined
Uncaught ReferenceError: $ is not defined
Config: _Layout.cshtml
<head>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
_ViewImports.cshtml
@using Microsoft.AspNetCore.Identity
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
View.cshtml
<div class="invoice-charts-container">
<h3>Invoice History Week Totals</h3>
<div class="demo-section k-content wide">
@(Html.Kendo().Chart()
.Name("chart")
.HtmlAttributes(new { style = "height: 400px;" })
.Title("Site Visitors Stats /thousands/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Stack(true)
)
.Series(series =>
{
series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
<div class="box wide">
<div class="box-col">
<h4>API Functions</h4>
<ul class="options">
<li>
<input id="typeColumn" name="seriesType"
type="radio" value="column" checked="checked" autocomplete="off" />
<label for="typeColumn">Columns</label>
</li>
<li>
<input id="typeBar" name="seriesType"
type="radio" value="bar" autocomplete="off" />
<label for="typeBar">Bars</label>
</li>
<li>
<input id="typeLine" name="seriesType"
type="radio" value="line" autocomplete="off" />
<label for="typeLine">Lines</label>
</li>
<li>
<input id="stack" type="checkbox" autocomplete="off" checked="checked" />
<label for="stack">Stacked</label>
</li>
</ul>
<p>
<strong>refresh()</strong> will be called on each configuration change
</p>
</div>
</div>
<script>
$(document).ready(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
type = $("input[name=seriesType]:checked").val(),
stack = $("#stack").prop("checked");
for (var i = 0, length = series.length; i < length; i++) {
series[i].stack = stack;
series[i].type = type;
};
chart.refresh();
}
function updateTheme() {
$("#chart").getKendoChart().setOptions({ theme: kendoTheme });
}
</script>
</div>
Here is where the error occurs in the DOM:`
Uncaught ReferenceError: kendo is not defined
<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(
Uncaught ReferenceError: $ is not defined
<script>
$(document).ready
(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
EDIT - It seems the javascript files are loaded but the errors are happening anyway:
732
When I had this problem, after upgrading an existing project to 2017.2.504, it was because I had my scripts defined in the body... Like you.
They have to be in the head. Here's the response I got from support:
kendo.syncReady was introduced to address a major issue with jQuery 3.1.1 and the way Kendo UI widgets are generated on the client when using the MVC wrappers. This change, however, requires that Kendo UI script files are referenced in the page head section (this has been the default instruction for Kendo UI references in the past, as well). Please, try moving your Kendo UI references to the tag, after the jQuery files are referenced and let me know if the error keeps occurring.
80
Adding to what @Brian MacKay already mentioned, you have the possibility to defer script output:
@(Html.Kendo().DatePicker().Name("datepicker").Deferred())
When you're using .Deferred(), you'll store the rendered JavaScript and you'll have the possibility to place this deferred script wherever you want:
<head>
</head>
<body>
<!-- stuff -->
@(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
<!-- other stuff -->
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.web.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
@Html.Kendo().DeferredScripts()
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
