kendo.syncReady is not a function
I am really new to Kendo UI, and I've encountered some problems along the way. After I used BundleConfiguration, which solved the references problem, an error was displayed:
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 on Chrome. On IE, it tells me that datepicker is undefined. Perhaps I am missing a reference or something? Or can someone tell me how to check the versions of my jQuery scripts? I got all of them from Telerik Free Trial.
Answer
The kendo.syncReady function was added in a recent version of KendoUI (around v2017.1 223). A Telerik dev wrote this in a forum post:
The
syncReadymethod is added in the kendo.aspnetmvc.js file, because the reason for including it was a major problem with jQuery 3.1 and how the templates are generated in MVC. With that in mind, ensuring that the kendo.aspnetmvc.js file is updated with the latest version should resolve the error with the missing function.
There are two primary conditions that cause this error:
- You use the ASP.NET MVC wrappers to generate your Kendo widgets.
- You include your Kendo script tags after where the MVC wrappers output Kendo's JS code (like before
<body>close).
The ASP.NET MVC wrappers generate Kendo JS code for you, and they now wrap that code inside the kendo.syncReady function, but if you include Kendo's script tags after the Kendo JS is inserted on the page by the MVC wrappers, the kendo.syncReady function will not exist yet, and you will see the error.
Fix #1
The first way to fix this is to move your Kendo <script> tags above 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>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
@(Html.Kendo().DatePicker().Name("datepicker"))
</body>
This is not ideal for two primary reasons: those scripts will be render blocking, and the kendo.all.min.js file is over 1MB!
Fix #2
You can also defer script output from the MVC wrappers like this:
@(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
This prevents output of the JS code where you use the MVC wrapper and basically stores the rendered 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>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
@Html.Kendo().DeferredScripts(true)
</body>
Further Discussion
If you continue to see the kendo.syncReady is not a function error, view the source of your generated HTML and ensure the Kendo script tags are truly being output before the code generated by the MVC wrappers. Also make sure you are using the right version of Kendo, and that the versions of Kendo are the same between your JS files and your DLL file.