I'm trying to pull some simple data into a kendo grid. I can see the json data in firebug fine but the grid on the page is empty. I don't see any errors in firebug or elsewhere. Please let me know what I'm doing wrong and how to better debug.
Controller:
[HttpPost]
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
return Json(viewModel.Milestones.Select(p => new {ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType}).ToArray(), JsonRequestBehavior.AllowGet);
}
View:
@{
ViewBag.Title = "Column_Reordering";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Column_Reordering</h2>
@(Html.Kendo().Grid<QRC.Models.Milestone>()
.Name("Grid")
.Pageable()
.Scrollable()
.Columns(columns =>
{
columns.Bound(o => o.ID);
columns.Bound(o => o.Name);
columns.Bound(o => o.Sequence);
columns.Bound(o => o.TemplateType);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetMilestonesJson", "Kendo")))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../QRC/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
Welcome <strong>@User.Identity.Name</strong>!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
json from firebug:
Controller:
[HttpPost]
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
return Json(viewModel.Milestones.Select(p => new {ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType}).ToArray(), JsonRequestBehavior.AllowGet);
}
View:
@{
ViewBag.Title = "Column_Reordering";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
Column_Reordering</h2>
@(Html.Kendo().Grid<QRC.Models.Milestone>()
.Name("Grid")
.Pageable()
.Scrollable()
.Columns(columns =>
{
columns.Bound(o => o.ID);
columns.Bound(o => o.Name);
columns.Bound(o => o.Sequence);
columns.Bound(o => o.TemplateType);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetMilestonesJson", "Kendo")))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../QRC/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
Welcome <strong>@User.Identity.Name</strong>!
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
json from firebug:
[{"ID":1,"Name":"SW Pre-alpha","Sequence":100,"TemplateType":"SW Platform"},{"ID":2,"Name":"SW Alpha1","Sequence":200,"TemplateType":"SW Platform"},{"ID":3,"Name":"SW Alpha2","Sequence":300,"TemplateType":"SW Platform"},{"ID":4,"Name":"SW Alpha3","Sequence":400,"TemplateType":"SW Platform"},{"ID":5,"Name":"SW Beta1","Sequence":500,"TemplateType":"SW Platform"},{"ID":6,"Name":"SW Beta2","Sequence":600,"TemplateType":"SW Platform"},{"ID":7,"Name":"SW Beta3","Sequence":700,"TemplateType":"SW Platform"},{"ID":8,"Name":"SW PC","Sequence":800,"TemplateType":"SW Platform"},{"ID":9,"Name":"SW PV","Sequence":900,"TemplateType":"SW Platform"},{"ID":10,"Name":"SW Pre-alpha","Sequence":100,"TemplateType":"SW Ingredient"},{"ID":11,"Name":"SW Alpha1","Sequence":200,"TemplateType":"SW Ingredient"},{"ID":12,"Name":"SW Alpha2","Sequence":300,"TemplateType":"SW Ingredient"},{"ID":13,"Name":"SW Alpha3","Sequence":400,"TemplateType":"SW Ingredient"},{"ID":14,"Name":"SW Beta1","Sequence":500,"TemplateType":"SW Ingredient"},{"ID":15,"Name":"SW Beta2","Sequence":600,"TemplateType":"SW Ingredient"},{"ID":16,"Name":"SW Beta3","Sequence":700,"TemplateType":"SW Ingredient"},{"ID":17,"Name":"SW PC","Sequence":800,"TemplateType":"SW Ingredient"},{"ID":18,"Name":"SW PV","Sequence":900,"TemplateType":"SW Ingredient"},{"ID":19,"Name":"SW Pre-alpha","Sequence":100,"TemplateType":"SW Platform Configuration"},{"ID":20,"Name":"SW Alpha1","Sequence":200,"TemplateType":"SW Platform Configuration"},{"ID":21,"Name":"SW Alpha2","Sequence":300,"TemplateType":"SW PlatformConfiguration"},{"ID":22,"Name":"SW Alpha3","Sequence":400,"TemplateType":"SW Platform Configuration"},{"ID":23,"Name":"SW Beta1","Sequence":500,"TemplateType":"SW Platform Configuration"},{"ID":24,"Name":"SW Beta2","Sequence":600,"TemplateType":"SW Platform Configuration"},{"ID":25,"Name":"SW Beta3","Sequence":700,"TemplateType":"SW Platform Configuration"},{"ID":26,"Name":"SW PC","Sequence":800,"TemplateType":"SW Platform Configuration"},{"ID":27,"Name":"SW PV","Sequence":900,"TemplateType":"SW Platform Configuration"},{"ID":28,"Name":"SW Alpha","Sequence":150,"TemplateType":"Any"},{"ID":29,"Name":"SW Beta","Sequence":450,"TemplateType":"Any"},{"ID":30,"Name":"POPL3","Sequence":50,"TemplateType":"Any"},{"ID":33,"Name":"POPL3-3","Sequence":453,"TemplateType":"SW Ingredient"},{"ID":34,"Name":"KerryMilestone2","Sequence":107,"TemplateType":"Any"},{"ID":35,"Name":"validation tester","Sequence":96,"TemplateType":"SW Platform"},{"ID":36,"Name":"TestMilestone","Sequence":888,"TemplateType":"Any"}]
5 Answers, 1 is accepted
0
Kerry
Top achievements
Rank 1
Rank 1
answered on 12 Jun 2012, 11:29 PM
I think I see where the problem is. The json in the Example has
{"Data":[ at the beginning and ,"Total":77,"AggregateResults":null,"Errors":null}
at the end.
I'm not sure how to change my data/view model to get this in there.
0
Kerry
Top achievements
Rank 1
Rank 1
answered on 13 Jun 2012, 04:33 PM
This is how I fixed this problem. I changed the controller to:
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
JsonResult result = new JsonResult();
result.Data = Json(viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }));
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
JsonResult result = new JsonResult();
result.Data = Json(viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }));
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return result;
}
0
Kerry
Top achievements
Rank 1
Rank 1
answered on 13 Jun 2012, 07:58 PM
Changed controller to enable paging:
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
var kendoResult = new DataSourceResult()
{
Data = viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }),
Total = viewModel.Milestones.Count()
};
return Json(kendoResult);
}
public ActionResult GetMilestonesJson()
{
Milestone viewModel = new Milestone();
viewModel.Milestones = new QuerySvc.QuerySvcClient().GetMilestones(this.xLMContext.Worker, null);
var kendoResult = new DataSourceResult()
{
Data = viewModel.Milestones.Select(p => new { ID = p.ID, Name = p.Name, Sequence = p.Sequence, TemplateType = p.TemplateType }),
Total = viewModel.Milestones.Count()
};
return Json(kendoResult);
}
0
Kushal
Top achievements
Rank 1
Rank 1
answered on 06 Sep 2012, 05:12 AM
I am having same issue... data is not being displayed in grid...
My controller returns data correctly... but not showing up in grid...following is my controller
[HttpPost]
public ActionResult Read()
{
using (var act = new action_dbEntities())
{
var mov = act.Movie1
// Use a view model to avoid serializing internal Entity Framework properties as JSON
.Select(p => new KendoModel
{
ID = p.Id,
Title = p.Title,
Director = p.Director
})
.ToList();
return Json(mov);
}
}
this is my kendo grid call
$("#grid").kendoGrid({
columns: [{ title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName" },
{ title: "Email", field: "email"}],
dataSource: {
transport: {
type: "json",
read: {
url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
}
},
schema: {
data: "data"
},
pageSize: 2
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
}); //End of kendo grid
========
Please suggest...
My controller returns data correctly... but not showing up in grid...following is my controller
[HttpPost]
public ActionResult Read()
{
using (var act = new action_dbEntities())
{
var mov = act.Movie1
// Use a view model to avoid serializing internal Entity Framework properties as JSON
.Select(p => new KendoModel
{
ID = p.Id,
Title = p.Title,
Director = p.Director
})
.ToList();
return Json(mov);
}
}
this is my kendo grid call
$("#grid").kendoGrid({
columns: [{ title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName" },
{ title: "Email", field: "email"}],
dataSource: {
transport: {
type: "json",
read: {
url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
}
},
schema: {
data: "data"
},
pageSize: 2
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
}); //End of kendo grid
========
Please suggest...
0
Kushal
Top achievements
Rank 1
Rank 1
answered on 06 Sep 2012, 09:24 AM
It seems every time i post a question here i find answer my self... :P
the problem was in schema and also i mentioned wrong title and field names in columns...
below is what worked for me...
$("#grid").kendoGrid({
columns: [{ title: "Sr No", field: "Id" },
{ title: "Title", field: "Title" },
{ title: "Director", field: "Director"}],
dataSource: {
transport: {
type: "json",
read: {
url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
}
},
schema: {
model: {
fields: {
Id: { type: "number" },
Title: { type: "string" },
Director: { type: "string" }
}
}
},
pageSize: 2
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
}); //End of kendo grid
cheers!!
the problem was in schema and also i mentioned wrong title and field names in columns...
below is what worked for me...
$("#grid").kendoGrid({
columns: [{ title: "Sr No", field: "Id" },
{ title: "Title", field: "Title" },
{ title: "Director", field: "Director"}],
dataSource: {
transport: {
type: "json",
read: {
url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
}
},
schema: {
model: {
fields: {
Id: { type: "number" },
Title: { type: "string" },
Director: { type: "string" }
}
}
},
pageSize: 2
},
height: 400,
scrollable: true,
pageable: true,
sortable: true,
groupable: true
}); //End of kendo grid
cheers!!