title: Kendo UI for ASP.NET Core - kendo is not defined
body: <p>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.</p>
  <blockquote>
  <p>Uncaught ReferenceError: kendo is not defined</p>
  <p>Uncaught ReferenceError: $ is not defined</p>
  </blockquote>
  <p><strong>Config: _Layout.cshtml</strong></p>
  <pre><code>&lt;head&gt;
      &lt;environment names=&quot;Development&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.css&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/kendo-ui/styles/kendo.bootstrap.min.css&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.css&quot; /&gt;
      &lt;/environment&gt;
      &lt;environment names=&quot;Staging,Production&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css&quot;
                asp-fallback-href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot;
                asp-fallback-test-class=&quot;sr-only&quot; asp-fallback-test-property=&quot;position&quot; asp-fallback-test-value=&quot;absolute&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot;
                href=&quot;https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css&quot;
                asp-fallback-href=&quot;~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css&quot;
                asp-fallback-test-class=&quot;k-common-test-class&quot;
                asp-fallback-test-property=&quot;opacity&quot; asp-fallback-test-value=&quot;0&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot;
                href=&quot;https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css&quot;
                asp-fallback-href=&quot;~/lib/kendo-ui/styles/kendo.bootstrap.min.css&quot;
                asp-fallback-test-class=&quot;k-theme-test-class&quot;
                asp-fallback-test-property=&quot;opacity&quot; asp-fallback-test-value=&quot;0&quot; /&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.min.css&quot; asp-append-version=&quot;true&quot; /&gt;
      &lt;/environment&gt;
  &lt;/head&gt;
      &lt;environment names=&quot;Development&quot;&gt;
          &lt;script src=&quot;~/lib/jquery/dist/jquery.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;~/lib/bootstrap/dist/js/bootstrap.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;~/lib/kendo-ui/js/kendo.all.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;~/lib/kendo-ui/js/kendo.aspnetmvc.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;~/js/site.js&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
      &lt;/environment&gt;
      &lt;environment names=&quot;Staging,Production&quot;&gt;
          &lt;script src=&quot;https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js&quot;
                  asp-fallback-src=&quot;~/lib/jquery/dist/jquery.min.js&quot;
                  asp-fallback-test=&quot;window.jQuery&quot;
                  crossorigin=&quot;anonymous&quot;
                  integrity=&quot;sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk&quot;&gt;
          &lt;/script&gt;
          &lt;script src=&quot;https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js&quot;
                  asp-fallback-src=&quot;~/lib/bootstrap/dist/js/bootstrap.min.js&quot;
                  asp-fallback-test=&quot;window.jQuery &amp;&amp; window.jQuery.fn &amp;&amp; window.jQuery.fn.modal&quot;
                  crossorigin=&quot;anonymous&quot;
                  integrity=&quot;sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa&quot;&gt;
          &lt;/script&gt;
          &lt;script src=&quot;https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js&quot;
                  asp-fallback-src=&quot;~/lib/kendo-ui/js/kendo.all.min.js&quot;
                  asp-fallback-test=&quot;window.kendo&quot;&gt;
          &lt;/script&gt;
          &lt;script src=&quot;https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js&quot;
                  asp-fallback-src=&quot;~/lib/kendo-ui/js/kendo.aspnetmvc.min.js&quot;
                  asp-fallback-test=&quot;kendo.data.transports['aspnetmvc-ajax']&quot;&gt;
          &lt;/script&gt;
          &lt;script src=&quot;~/js/site.min.js&quot; asp-append-version=&quot;true&quot;&gt;&lt;/script&gt;
      &lt;/environment&gt;
  </code></pre>
  <p><strong>_ViewImports.cshtml</strong></p>
  <pre><code>@using Microsoft.AspNetCore.Identity
  @using Kendo.Mvc.UI
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  </code></pre>
  <p><strong>View.cshtml</strong></p>
  <pre><code>&lt;div class=&quot;invoice-charts-container&quot;&gt;
    &lt;h3&gt;Invoice History Week Totals&lt;/h3&gt;
    &lt;div class=&quot;demo-section k-content wide&quot;&gt;
      @(Html.Kendo().Chart()
          .Name(&quot;chart&quot;)
          .HtmlAttributes(new { style = &quot;height: 400px;&quot; })
          .Title(&quot;Site Visitors Stats /thousands/&quot;)
          .Legend(legend =&gt; legend
              .Position(ChartLegendPosition.Bottom)
          )
          .SeriesDefaults(seriesDefaults =&gt; seriesDefaults
              .Column().Stack(true)
          )
          .Series(series =&gt;
          {
              series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name(&quot;Total Visits&quot;);
              series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name(&quot;Unique visitors&quot;);
          })
          .CategoryAxis(axis =&gt; axis
              .Categories(&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;)
              .MajorGridLines(lines =&gt; lines.Visible(false))
          )
          .ValueAxis(axis =&gt; axis
              .Numeric()
              .Line(line =&gt; line.Visible(false))
          )
          .Tooltip(tooltip =&gt; tooltip
              .Visible(true)
              .Format(&quot;{0}&quot;)
          )
      )
    &lt;/div&gt;
    &lt;div class=&quot;box wide&quot;&gt;
      &lt;div class=&quot;box-col&quot;&gt;
        &lt;h4&gt;API Functions&lt;/h4&gt;
        &lt;ul class=&quot;options&quot;&gt;
          &lt;li&gt;
            &lt;input id=&quot;typeColumn&quot; name=&quot;seriesType&quot;
                   type=&quot;radio&quot; value=&quot;column&quot; checked=&quot;checked&quot; autocomplete=&quot;off&quot; /&gt;
            &lt;label for=&quot;typeColumn&quot;&gt;Columns&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;input id=&quot;typeBar&quot; name=&quot;seriesType&quot;
                   type=&quot;radio&quot; value=&quot;bar&quot; autocomplete=&quot;off&quot; /&gt;
            &lt;label for=&quot;typeBar&quot;&gt;Bars&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;input id=&quot;typeLine&quot; name=&quot;seriesType&quot;
                   type=&quot;radio&quot; value=&quot;line&quot; autocomplete=&quot;off&quot; /&gt;
            &lt;label for=&quot;typeLine&quot;&gt;Lines&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;input id=&quot;stack&quot; type=&quot;checkbox&quot; autocomplete=&quot;off&quot; checked=&quot;checked&quot; /&gt;
            &lt;label for=&quot;stack&quot;&gt;Stacked&lt;/label&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;
          &lt;strong&gt;refresh()&lt;/strong&gt; will be called on each configuration change
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      $(document).ready(function() {
          $(&quot;.options&quot;).bind(&quot;change&quot;, refresh);
          $(document).bind(&quot;kendo:skinChange&quot;, updateTheme);
      });
  
      function refresh() {
          var chart = $(&quot;#chart&quot;).data(&quot;kendoChart&quot;),
              series = chart.options.series,
              type = $(&quot;input[name=seriesType]:checked&quot;).val(),
              stack = $(&quot;#stack&quot;).prop(&quot;checked&quot;);
  
          for (var i = 0, length = series.length; i &lt; length; i++) {
              series[i].stack = stack;
              series[i].type = type;
          };
  
          chart.refresh();
      }
  
      function updateTheme() {
          $(&quot;#chart&quot;).getKendoChart().setOptions({ theme: kendoTheme });
      }
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is where the error occurs in the DOM:`</p>
  <blockquote>
  <p>Uncaught ReferenceError: kendo is not defined</p>
  </blockquote>
  <pre><code>&lt;script&gt;kendo.syncReady(function(){jQuery(&quot;#chart&quot;).kendoChart(
  </code></pre>
  <blockquote>
  <p>Uncaught ReferenceError: $ is not defined</p>
  </blockquote>
  <pre><code>&lt;script&gt;
      
  $(document).ready
  
  (function() {
              $(&quot;.options&quot;).bind(&quot;change&quot;, refresh);
              $(document).bind(&quot;kendo:skinChange&quot;, updateTheme);
          });
  </code></pre>
  <p><strong>EDIT</strong> - It seems the javascript files are loaded but the errors are happening anyway:<a href="https://i.stack.imgur.com/7T8Jz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7T8Jz.png" alt="enter image description here" /></a></p>