kendo.syncReady is not a function

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 syncReady method 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:

  1. You use the ASP.NET MVC wrappers to generate your Kendo widgets.
  2. 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.


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.


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.

Tags:

Jquery

Kendo Ui

Kendo Asp.Net Mvc

Recent Posts