Object doesn't support property or method 'kendoGrid'

[Rajaraman]

Tried to implement the same in ASP.NET MVC 4 Application . 
Followed all steps but it keeps throwing an error "Object doesn't support property or method 'kendoGrid'". Infact even a DatePicker doesnt work. 

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

This is what I have included in the site.Master. The 

        <link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
        <link href="/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />
        <script src="/Scripts/KendoUI/jquery.min.js"></script>
        <script src="/Scripts/KendoUI/kendo.web.min.js"></script>
        <script src="/Scripts/KendoUI/kendo.aspnetmvc.min.js"></script>

and included the following n index.aspx
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
     <%: Html.Kendo().Grid<KendoUISamples.DataProviders.Product>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("ProductsRead", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(product => product.ProductID);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.ProductName);
          // Create a column bound to the UnitsInStock property
          columns.Bound(product => product.UnitsInStock);
      })
%>
</asp:Content>

Contents of BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

I have wasted close to a week. Please let me know what are the basic js / css files we need to include. 

[Jayesh Goyani]

Hello,

public class BundleConfig

    {

        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

        public static void RegisterBundles(BundleCollection bundles)

        {

            

                                       bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                                                                                     "~/Scripts/jquery-{version}.js"));

 

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

                        "~/Scripts/jquery-ui-{version}.js"));

 

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

 

            // Use the development version of Modernizr to develop with and learn from. Then, when you're

            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

 

            // The Kendo JavaScript bundle

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

                    "~/Scripts/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz

                    "~/Scripts/kendo.aspnetmvc.min.js"));

 

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

 

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

                        "~/Content/themes/base/jquery.ui.core.css",

                        "~/Content/themes/base/jquery.ui.resizable.css",

                        "~/Content/themes/base/jquery.ui.selectable.css",

                        "~/Content/themes/base/jquery.ui.accordion.css",

                        "~/Content/themes/base/jquery.ui.autocomplete.css",

                        "~/Content/themes/base/jquery.ui.button.css",

                        "~/Content/themes/base/jquery.ui.dialog.css",

                        "~/Content/themes/base/jquery.ui.slider.css",

                        "~/Content/themes/base/jquery.ui.tabs.css",

                        "~/Content/themes/base/jquery.ui.datepicker.css",

                        "~/Content/themes/base/jquery.ui.progressbar.css",

                        "~/Content/themes/base/jquery.ui.theme.css"));

 

            // The Kendo CSS bundle

            bundles.Add(new StyleBundle("~/Content/kendo").Include(

                    "~/Content/kendo.common.*",

                    "~/Content/kendo.metro.*"));

 

            // Clear all items from the default ignore list to allow minified CSS and JavaScript files to be included in debug mode

            bundles.IgnoreList.Clear();

 

 

            // Add back the default ignore list rules sans the ones which affect minified files and debug mode

            bundles.IgnoreList.Ignore("*.intellisense.js");

            bundles.IgnoreList.Ignore("*-vsdoc.js");

            bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

        }

    }


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")

    @Styles.Render("~/Content/kendo")

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/kendo")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

    @RenderBody()

    @RenderSection("scripts", required: false)

</body>

</html>

_Layout.cshtml

Download Demo
Please also check document : http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction#using-kendo-ui-in-asp.net-mvc-4-application

Thanks,
Jayesh Goyani

[Rajaraman]

Thanks Joyesh. 

I did as instructed but when i debug I get the same error , but one difference is in non debug mode I see the Grid being rendered with columns but without data.

I added a Debug Point it doesnt come there. 
 HomeController : Controller => 
 public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public ActionResult ProductsRead([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                DataSourceResult result = products.ToDataSourceResult(request);
                return Json(result);
            }
        }

Index.aspx
 <%: Html.Kendo().Grid<KendoUISamples.DataProviders.Product>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("ProductsRead", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(product => product.ProductID);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.ProductName);
          // Create a column bound to the UnitsInStock property
          columns.Bound(product => product.UnitsInStock);
      })

[Rajaraman]

Or is it because I am using Visual Studio 2012 and compiling it in .NET 4.5

[Jayesh Goyani]

Hello,

if possible then Can you please provide your project?

Thanks,
Jayesh Goyani

[Rajaraman]

Attached the Solution. 

[Rajaraman]

Hi Jayesh, 

Were you able to figure out what was the problem ?

Regards
Raj

[Jayesh Goyani]

Hello,

Yes, i am.

Your master page code should be as below.

Site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
    <link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <%: Styles.Render("~/Content/css") %>
    <%: Styles.Render("~/Content/kendo")%>
    <%: Scripts.Render("~/bundles/jquery") %>
    <%: Scripts.Render("~/bundles/kendo")%>
    <%: Scripts.Render("~/bundles/modernizr")%>
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title"><%: Html.ActionLink("your logo here", "Index", "Home") %></p>
            </div>
            <div class="float-right">
                <section id="login">
                    <%: Html.Partial("_LoginPartial") %>
                </section>
                <nav>
                    <ul id="menu">
                        <li><%: Html.ActionLink("Home", "Index", "Home") %></li>
                        <li><%: Html.ActionLink("About", "About", "Home") %></li>
                        <li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        <asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
        <section class="content-wrapper main-content clear-fix">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>© <%: DateTime.Now.Year %> - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    <asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</body>
</html>

Issue is you have added jquery reference more than once in your master page.

Thanks,
Jayesh Goyani

[Rajaraman]

Thanks for the help one last thing.  

It worked but annoyingly the grid renders without errors. but data doesn't get displayed. Its really so frustrating :(

Attached is the sourcecode

--JSON Records are being returned in debug mode.
 public ActionResult ProductsRead([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                DataSourceResult result = products.ToDataSourceResult(request);
                //var data = Json(result);
                return Json(result);
            }
        }

--index.aspx
<%: Html.Kendo().Grid<KendoUIWorkBench.DataProviders.Product>()
        .Name("productGrid")
        .Columns(columns =>
        {
            // Create a column bound to the ProductID property
            columns.Bound(product => product.ProductID);
            // Create a column bound to the ProductName property
            columns.Bound(product => product.ProductName);
            // Create a column bound to the UnitsInStock property
            columns.Bound(product => product.UnitsInStock);
        })
        .DataSource(dataSource => dataSource // Configure the grid data source
            .Ajax() // Specify that ajax binding is used
            .Read(read => read.Action("ProductsRead", "Home")) // Set the action method which will return the data in JSON format
            //.PageSize(20)
        )
        //.Pageable()
        .Sortable()
        .Scrollable()
    %>

[Jayesh Goyani]

Hello,

I am not able to reproduce this issue.

I tried with the below code snippet and also attached screenshot.

public ActionResult ProductsRead([DataSourceRequest]DataSourceRequest request)
        {
            List<Product> products = new List<Product>();

            for (int i = 0; i < 5; i++)
            {
                Product p = new Product();
                p.ProductID = i;
                p.ProductName = "product" + i;
                p.UnitsInStock = 10;
                products.Add(p);
            }

            DataSourceResult result = products.ToDataSourceResult(request);
            return Json(result);
        }

Thanks,
Jayesh Goyani

[Dimiter Madjarov]

Hello Rajaraman,


The code in the sample project, that you provided is correct. As Jayesh stated, if you try to list some local data it works as expected, which brings me to the thought that the issue is related to the connection to the database. Please check the Network tab of your browsers developer tools for any request errors and fix them if they are present.

Please let me know if this the reason for the issue. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Rajaraman]

Hi Jayesh & Dimiter 

I am able to bind the Northwind products in the Grid. 

Used the developer tools on Google Chrome to find the issues , there were two issues 
1) ObjectContext instance had been disposed using EF 4.0 . 
2) JSON Circular Reference Serialization Error after the first issue was resolved.

 var northwindContext = new NorthwindEntities(); --discarded the using statement to resolve first issue
            northwindContext.Configuration.ProxyCreationEnabled = false; --Resolved the second issue
            IQueryable<Product> products = northwindContext.Products;
            DataSourceResult result = products.ToDataSourceResult(request);
            return Json(result);

Thanks once again for the help. 

Regards
Raj

[Prashant]

Thank you so much for your post. I also solved my issue.