Menu
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.
442
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:
<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.
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!
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>
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.
118
After reading a blog entry on the Telerik site it appeared as though the fix was to add a reference to kendo.aspnetmvc.js after the reference to kendo.all.js. I tried this on my site using version 2017.2.504 and it fixed the problem.
11
I added the following script to my _layout.cshtml:
<script type="text/javascript" asp-append-version="true" src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
Solved the problem by adding the references in the _Layout.cshtml view.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
