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
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
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
The idea is to use the following order:
1. jQuery script
2. widget declarations
3. Kendo UI scripts
<script src=
"https://code.jquery.com/jquery-1.12.3.min.js"
></script>
@(Html.Kendo().NumericTextBox()
.Name(
"age"
)
)
<script src=
"https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"
></script>
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()
)
<script src=
"https://code.jquery.com/jquery-1.12.3.min.js"
></script>
<script src=
"https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"
></script>
@Html.Kendo().DeferredScripts()
Regards,
Dimo
Progress Telerik
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
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css"
>
</
head
>
<
body
>
<
input
id
=
"datetimepicker"
name
=
"datetimepicker"
type
=
"datetime"
/>
<
script
src
=
"https://code.jquery.com/jquery-1.12.3.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"
></
script
>
<
script
>
$("#datetimepicker").kendoDateTimePicker();
</
script
>
</
body
>
</
html
>
Regards,
Marin Bratanov
Progress Telerik
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
Our thoughts here at Progress are with those affected by the outbreak.
You're welcome, Jesse.
Regards,
Marin Bratanov
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.