I keep getting the following error when I try to create a grid or chart using the Kendo user interface. However, a simple ComboBox will work. We use a commercial license and download js and css from the Telerik website for authentication.
Untrained ReferenceError: kendo not defined
Unprepared ReferenceError: $ undefined
Configuration: _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>
This is where the error occurs in the DOM: `
Untrained ReferenceError: kendo not defined
<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(
Unprepared ReferenceError: $ undefined
<script>
$(document).ready
(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
EDIT . It seems javascript files are uploaded, but errors still occur: