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

Load Kendo scripts on bottom of page - possible?

9 Answers 474 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Fabian
Top achievements
Rank 1
Fabian asked on 17 Dec 2012, 06:48 AM
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

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 17 Dec 2012, 02:22 PM
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!
0
Ericson
Top achievements
Rank 1
answered on 14 Sep 2017, 03:35 AM

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

0
Dimo
Telerik team
answered on 14 Sep 2017, 02:03 PM
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.
0
gregory
Top achievements
Rank 1
answered on 25 Jul 2019, 09:35 AM
What if you're not using a wrapper and just using Kendo UI?
0
Marin Bratanov
Telerik team
answered on 26 Jul 2019, 11:27 AM
Hello Gregory,

You can do it in a similar way to what my colleague Dimo suggested in his first post, you just need to ensure that the calls to .kendo<Widget>() are after the reference to the Kendo script, so that the Kendo extensions are loaded and available.

Here's an example and you can run it in this dojo I made for you: https://dojo.telerik.com/@bratanov/oTAwUcAV.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
  </head>
<body>
  <input id="datetimepicker" name="datetimepicker" type="datetime"  />
   
   
  <script>
      $("#datetimepicker").kendoDateTimePicker();
  </script>
</body>
</html>


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 08 Jul 2020, 06:12 PM
Could the wrapper API not be updated to put widget initializers at the bottom of the page so jQuery doesn't have to be loaded up front?
0
Accepted
Marin Bratanov
Telerik team
answered on 09 Jul 2020, 01:25 PM

Hello Jesse,

This is already possible through the .Deferred() configuration option: https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/fundamentals#deferred-initialization

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 09 Jul 2020, 02:14 PM
Oh, that's right. I forgot that that is what Deferred does and now see that was mentioned above. Sorry. Thank you.
0
Marin Bratanov
Telerik team
answered on 09 Jul 2020, 02:43 PM

You're welcome, Jesse.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Fabian
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ericson
Top achievements
Rank 1
gregory
Top achievements
Rank 1
Marin Bratanov
Telerik team
Jesse
Top achievements
Rank 1
Veteran
Share this question
or