"SyncReady Is Not A Function" Error Message In Kendo Grid

Description

The "syncReady is not a function" is an error that displays on console windows in “Mozilla & Chrome Browser” and displays an alert message in “Internet Explorer” while running the application.

JQuery 

Solution

If you want to resolve the issue, make sure you have aligned proper style and script format on the “Bundle.config” file in the application. Find the code format, which is attached on the bottom of this page.

And, if you have not referred to the Kendo script and style files on the Bundle.config and layout.cshtml page, the grid will not show on the page.

Layout.cshtml file Code

The format should look like  this in Layout.cshtml page.

  1. @Styles.Render("~/Content/css")  
  2. @Styles.Render("~/Content/kendocss")  
  3. @Scripts.Render("~/bundles/jquery")  
  4. @Scripts.Render("~/bundles/modernizr")  
  5. @Scripts.Render("~/bundles/bootstrap")  
  6. @Scripts.Render("~/bundles/kendo")  
  7. @RenderSection("scripts", required: false)  

 

Make sure that the above files are in the directory.

Bundle.config file Code:

This is the format Bundle.config should follow. If you want to add any more script or style files you can add them.

  1. public static void RegisterBundles(BundleCollection bundles)  
  2. {  
  3.     bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));  
  4.     bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));  
  5.     bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));  
  6.     bundles.Add(new ScriptBundle("~/bundles/Kendo").Include("~/Scripts/Kendo/kendo.all.min.js""~/Scripts/Kendo/kendo.aspnetmvc.min.js""~/Scripts/Kendo/jszip.min.js"));  
  7.     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js""~/Scripts/respond.js"));  
  8.     bundles.Add(new StyleBundle("~/Content/kendocss").Include("~/Content/Kendo/2018.1.117/kendo.common.min.css""~/Content/Kendo/2018.1.117/kendo.default.min.css""~/Content/Kendo/2018.1.117/kendo.dataviz.min.css""~/Content/Kendo/2018.1.117/kendo.dataviz.default.min.css"));  
  9.     bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css"));  
  10.     bundles.IgnoreList.Clear();  
  11. }  

 

Output

JQuery 

Reference

Please refer to https://demos.telerik.com/kendo-ui/grid/index for more details.

I hope this helps. Let me know if you need anything.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now