Load Kendo scripts on bottom of page - possible?

4 posts, 1 answers
  1. Fabian
    Fabian avatar
    1 posts
    Member since:
    Sep 2012

    Posted 17 Dec 2012 Link to this post

    Hi, we always load all js files at the bottom of a page because of performance. Before the </body> closing tag.
    If we shift the JS files from head to the end of the file, Kendo controls are not working.
    All the JS files are loaded correct if we check the network traffic with firebug tool.

    Is it an known issue? and we have always to load all the scripts in head?

    I made a 2nd quick test with the keno example code.
    Open kendoui.trial.2012.3.1114\wrappers\aspnetmvc\Examples\Areas\razor\Views\Shared\_WebLayout.cshtml and shifted the following scripts to the bottom. Than load e.g. the datepicker example page (http://localhost/kendo/razor/web/datepicker/index)

        <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
        <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
        <script src="@Url.Content("~/Scripts/console.min.js")"></script>
        <script src="@Url.Content("~/Scripts/prettify.min.js")"></script>

    Same problem. If I open the datepicker test page. Datepicker is not working.
    Thanks for your help.
    Regards fan
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 17 Dec 2012 Link to this post

    Hi Fabian,

    The Kendo UI widgets' server wrappers are self initialized, which means that the initialization script is rendered right after the widget's HTML markup in the following way:

    <input id="datetimepicker" name="datetimepicker" type="datetime"  />
    <script>
        jQuery(function(){jQuery("#datetimepicker").kendoDateTimePicker();});
    </script>

    This means that the Kendo scripts can be included at the bottom of the page, but jQuery must be registered before any Kendo UI widgets, otherwise you will get a "jQuery is undefined" error.

    When using plain client-side only Kendo UI widgets, the jQuery file can also be at the bottom of the page, because you have control over where the initialization scripts are placed.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ericson
    Ericson avatar
    1 posts
    Member since:
    May 2017

    Posted 13 Sep Link to this post

    This means that the Kendo scripts can be included at the bottom of the page, but jQuery must be registered before any Kendo UI widgets, otherwise you will get a "jQuery is undefined" error. How? example please

  4. Dimo
    Admin
    Dimo avatar
    8406 posts

    Posted 14 Sep Link to this post

    Hi Ericson,

    The idea is to use the following order:

    1. jQuery script
    2. widget declarations
    3. Kendo UI scripts

     
    @(Html.Kendo().NumericTextBox()
      .Name("age")
    )
     


    On the other hand, if you are using deferred initialization...

    http://docs.telerik.com/aspnet-mvc/getting-started/fundamentals#configuration-Deferring

    ... you can move the jQuery script below the widget declarations too. The required step is to render the widget initialization scripts below the jQuery and Kendo UI script files.

    @(Html.Kendo().NumericTextBox()
      .Name("age")
      .Deferred()
    )
     
     
    @Html.Kendo().DeferredScripts()


    Regards,
    Dimo
    Progress Telerik
    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