I am new to this but I can't seem to find the answer.
In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views. All works fine. The Index view returns hundreds of records.
2 problems: 1) When I try to use the Kendo Grid, 0 records are returned.
2) The GetCarriers method never seems to fire because I never hit the breakpoint.
Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController
public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
{
var carriers = carrierRepository.All; // <<<=== Never breaks here if I set the break point
DataSourceResult result = carriers.ToDataSourceResult(request);
return Json(result);
}
Replaced the code in my Index.cshtml
@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CarrierID);
columns.Bound(p => p.CarrierName);
})
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetCarriers", "Carriers")
))
)
Here is the Page Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Carriers">Carriers</a></li>
</ul>
</nav>
</header>
<section id="main">
<h2>Carriers</h2>
<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:
... omitted for brevity
{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
Any ideas?
Thanks
P
In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views. All works fine. The Index view returns hundreds of records.
2 problems: 1) When I try to use the Kendo Grid, 0 records are returned.
2) The GetCarriers method never seems to fire because I never hit the breakpoint.
Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController
public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
{
var carriers = carrierRepository.All; // <<<=== Never breaks here if I set the break point
DataSourceResult result = carriers.ToDataSourceResult(request);
return Json(result);
}
Replaced the code in my Index.cshtml
@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CarrierID);
columns.Bound(p => p.CarrierName);
})
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetCarriers", "Carriers")
))
)
Here is the Page Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Carriers">Carriers</a></li>
</ul>
</nav>
</header>
<section id="main">
<h2>Carriers</h2>
<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:
... omitted for brevity
{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>
Thanks
P
1 Answer, 1 is accepted
0
Paul
Top achievements
Rank 1
Rank 1
answered on 26 Jul 2012, 10:09 PM
Solved. The js scripts 1) need to be in the right order and 2) I needed the aspnetmvc.js script.
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.aspnetmvc.min.js" type="text/javascript"></script>
works both MVC3 and MVC4 (when in the bundle).
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/kendo.aspnetmvc.min.js" type="text/javascript"></script>
works both MVC3 and MVC4 (when in the bundle).