This is a migrated thread and some comments may be shown as answers.

Object doesn't support property or method 'kendoGrid'

12 Answers 1007 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rajaraman
Top achievements
Rank 1
Rajaraman asked on 30 Jul 2013, 05:11 AM
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. 

12 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 30 Jul 2013, 12:32 PM
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
0
Rajaraman
Top achievements
Rank 1
answered on 31 Jul 2013, 04:06 AM
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);
      })
0
Rajaraman
Top achievements
Rank 1
answered on 31 Jul 2013, 04:50 AM
Or is it because I am using Visual Studio 2012 and compiling it in .NET 4.5
0
Jayesh Goyani
Top achievements
Rank 2
answered on 31 Jul 2013, 07:59 AM
Hello,

if possible then Can you please provide your project?

Thanks,
Jayesh Goyani
0
Rajaraman
Top achievements
Rank 1
answered on 01 Aug 2013, 03:10 AM
Attached the Solution. 
0
Rajaraman
Top achievements
Rank 1
answered on 02 Aug 2013, 03:01 AM
Hi Jayesh, 

Were you able to figure out what was the problem ?

Regards
Raj
0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Aug 2013, 06:19 AM
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
0
Rajaraman
Top achievements
Rank 1
answered on 04 Aug 2013, 08:30 PM
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()
    %>

0
Jayesh Goyani
Top achievements
Rank 2
answered on 05 Aug 2013, 06:29 AM
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
0
Accepted
Dimiter Madjarov
Telerik team
answered on 05 Aug 2013, 08:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rajaraman
Top achievements
Rank 1
answered on 06 Aug 2013, 03:27 AM
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

0
Prashant
Top achievements
Rank 1
answered on 08 May 2014, 06:42 AM
Thank you so much for your post. I also solved my issue.
Tags
Grid
Asked by
Rajaraman
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Rajaraman
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Prashant
Top achievements
Rank 1
Share this question
or