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

Yet another kendo is not defined thread

3 Answers 1247 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dina
Top achievements
Rank 1
Dina asked on 10 May 2017, 07:05 AM

Why with upgrade from 2017.1.223 to 2017.2.504 I need to move including of kendo scripts at front of page after body?

In 2017.1.223 I simply include jquery after body (this is unavoidable I guess) and add all other at end of page. But then I upgrade to 2017.2.504 I get "kendo is not defined" (rolling back to 2017.1.223 solves). Also I even did not upgrade bower package in this situation. Just nuget.

so next is _layout.cshtml as to was (working on 2017.1.223 and do not on 2017.2.504 )

and second block works with 2017.2.504

Please tell me if I`am wrong but it is better to shove scripts to the bottom for page rendering performance.

was

<body>
    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
    </environment>
    <environment names="Staging,Production">
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7">
        </script>
    </environment>
 
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">TNPK</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @if (SignInManager.IsSignedIn(User))
                    {
                        <li><a asp-area="" asp-controller="Codeword" asp-action="Index">Кодовые слова</a></li>
                    }
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - TNPK</p>
        </footer>
    </div>
 
    <environment names="Development">
        <script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/lib/kendo-ui/js/jszip.min.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="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>
        <script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>
        <script src="~/lib/clipboard/dist/clipboard.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
                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="~/lib/kendo-ui/js/jszip.min.js"></script>
        <script src="~/lib/kendo-ui/js/kendo.all.min."></script>
        <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>
        <script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>
        <script src="~/lib/clipboard/dist/clipboard.min.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    <script>kendo.culture("ru-RU");</script>
    @RenderSection("Scripts", required: false)
</body>

 

second

<body>
    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
    </environment>
    <environment names="Staging,Production">
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7">
        </script>
    </environment>
    <environment names="Development">
        <script src="~/lib/jquery-ui/jquery-ui.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/lib/kendo-ui/js/jszip.min.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="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>
        <script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>
        <script src="~/lib/clipboard/dist/clipboard.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
                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="~/lib/kendo-ui/js/jszip.min.js"></script>
        <script src="~/lib/kendo-ui/js/kendo.all.min."></script>
        <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        <script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>
        <script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>
        <script src="~/lib/clipboard/dist/clipboard.min.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
 
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">TNPK</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @if (SignInManager.IsSignedIn(User))
                    {
                        <li><a asp-area="" asp-controller="Codeword" asp-action="Index">Кодовые слова</a></li>
                    }
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - TNPK</p>
        </footer>
    </div>
 
 
    <script>kendo.culture("ru-RU");</script>
    @RenderSection("Scripts", required: false)
</body>

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 May 2017, 06:20 AM
Hello Dima,

In this scenario, the issue occurs because of the rendering order.

This issue occurs when the scripts are loaded after the body is rendered, and the kendo object is still not available.

I can assume that in this scenario, the difference is that they are placed before and after:

@RenderBody()

The Kendo UI team has no full control where the scripts have to be placed, they just have to be loaded, before the widgets are rendered.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Dina
Top achievements
Rank 1
answered on 15 May 2017, 03:34 PM

it is strange why behaviour changed with update

I did not change _layout.cshtm.

Also rolling back to previous version and all works fine.

Also I thought documentation say I need to add them not at the top of body

0
Stefan
Telerik team
answered on 18 May 2017, 06:25 AM
Hello Dima,

In step 7 of the article, it is shown that the scripts have to be rendered in the body but over the @RenderSection() method. We will add the @RenderBody() method as well.

http://docs.telerik.com/aspnet-core/getting-started/getting-started

Still, as indeed there is an issue with the article as new changes occur with every new version of ASP.NET Core, we will try to update it accordingly.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
General Discussions
Asked by
Dina
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Dina
Top achievements
Rank 1
Share this question
or