Kendo.syncReady is not a function
I am really new to Kendo UI and I ran into some problems along the way. After I used BundleConfiguration
that solved the link issue, the error appeared:
kendo.syncReady is not a function
Here is my view:
<head>
@Styles.Render("~/Content/kendo.common.min.css")
@Styles.Render("~/Content/kendo.default.min.css")
@Scripts.Render("~/Scripts/jquery.min.js")
@Scripts.Render("~/Scripts/kendo.web.min.js")
@Scripts.Render("~/Scripts/kendo.aspnetmvc.min.js")
@Scripts.Render("~/Scripts/kendo.all.min.js")
@Scripts.Render("~/Scripts/modernizr-2.6.2.js")
</head>
<body>
@(Html.Kendo().DatePicker().Name("datepicker"))
</body>
This happens in Chrome. In IE, this tells me the datepicker is undefined. Maybe I am missing a link or something else? Or can someone tell me how to check jQuery scripts versions? I got everything from Telerik free trial.
source to share
The feature kendo.syncReady
was added in a recent release of KendoUI (circa v2017.1 223). Telerik dev wrote this in a post:
The method is
syncReady
added to the kendo.aspnetmvc.js file because the reason for including it was a major issue with jQuery 3.1 and the way templates are generated in MVC. With this in mind, ensuring that the kendo.aspnetmvc.js file is updated with the latest version should resolve the missing function error.
There are two main conditions that cause this error:
- You are using ASP.NET MVC wrappers to create your Kendo widgets.
- You include Kendo script tags after MVC wrappers issue Kendo JS code (for example, before
<body>
closing).
ASP.NET MVC wrappers generate Jens Kendo code for you, and they now wrap that code inside a function kendo.syncReady
, but if you add Kendo script tags after Kendo JS is inserted into the MVC wrapper page, the function kendo.syncReady
does not exist yet and you will see an error.
Fix # 1
The first way to fix this is to move the Kendo tags <script>
up where the MVC wrappers output the Kendo JS code.
<head>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
@(Html.Kendo().DatePicker().Name("datepicker"))
</body>
This is not ideal for two main reasons: these scripts will be blocked by rendering, and the file kendo.all.min.js
is over 1MB!
Fix # 2
You can also defer script output from MVC wrappers like this:
@(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
This prevents the JS code from outputting where you are using the MVC wrapper and basically stores the provided JS, so you can place it wherever you want on the page:
<body>
@(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
@Html.Kendo().DeferredScripts(true)
</body>
Further discussion
If you continue to see the error kendo.syncReady is not a function
, look at the source of the generated HTML and make sure the Kendo script tags are indeed output before the code generated by the MVC wrappers. Also make sure that you are using the correct Kendo version and that the Kendo versions are the same between your JS files and your DLL file.
source to share