Yet another kendo is not defined thread

4 posts, 0 answers
  1. Dina
    Dina avatar
    50 posts
    Member since:
    Feb 2012

    Posted 10 May 2017 Link to this post

    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>
  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 15 May 2017 Link to this post

    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 visualization (charts) and form elements.
  3. Dina
    Dina avatar
    50 posts
    Member since:
    Feb 2012

    Posted 15 May 2017 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 May 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top