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

Object doesn't support property or method 'kendoGrid'

12 Answers 1183 Views

Grid

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

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

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

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);
})

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>

</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">

</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

answered on 04 Aug 2013, 08:30 PM

kendouisamples.zip

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()
%>

answered on 05 Aug 2013, 06:29 AM

untitled.png

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

Accepted

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