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

Can't get grid working in MVC3

8 Answers 136 Views

Grid

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

Jay asked on 20 Apr 2012, 05:16 PM

I'm trying to get the Kendo UI grid connected in my MVC3 app, but I'm not getting any data displaying. I think it should be simple, but I'm not seeing it. Here is my code:

View:

@model List<pests.web.com.Models.Workitem>

@{
ViewBag.Title = "Worklist";
ViewBag.CurrentPage = "Worklist";
}

<div id="grid"></div>

<script type="text/javascript">
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "Home/GetWorklist",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {}
}
},
columns: [
{
field: "PartNumber",
width: 90,
title: "Part Number"
},
{
field: "ProcurementCode",
width: 90,
title: "Procurement Code"
},
{
width: 100,
field: "Priority"
},
{
field: "Status"
}
]
}
});
</script>


<script type="text/javascript" src="../../Scripts/people.js"></script>
<script type="text/javascript" src="../../Scripts/kendo.web.min.js"></script>
<script type="text/javascript" src="../../Scripts/console.js"></script>
<link href="../../Styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../Styles/kendo.default.min.css" rel="stylesheet" />

Layout page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>

@RenderBody()

</body>
</html>

Controller code I'm trying to call from the view:

public class HomeController : Controller
{
[HttpPost]
public ActionResult GetWorklist()
{
List<Workitem> worklist = PestsLogic.GetWorklist();
return View("Home", worklist);
}
}

GetWorklist() is returning a few items. They are simple object with a few properties. Here's it is:

public class Workitem
{
public string PartNumber { get; set; }
public string ProcurementCode { get; set; }
public int Priority { get; set; }
public string Status { get; set; }
}

Is there anything obvious that I've got hooked up wrong? There are no error messages, just a blank page (with a title, though).

hanks!

8 Answers, 1 is accepted

answered on 20 Apr 2012, 08:59 PM

Hi Jay,

I see a few errors here (apologies if I'm wrong):

The first one is, you don't return JSON data from the action method. The idea would be to have 2 action methods. I for sevind the grid's datasource read property and another one to return the view. Try using the method from MVC : Json() you can use it in the Controller
You set the data property of datasource to data:{}, I think this line can be removed. I don't think it affects the datasource, but to be sure, remove it.
It is not indicated to use the POST verb in the communication towards the sever, because you are not saving any data. On the second hand you have the method name GetWorklist(), which is a little contrary.

I hope that I could help.

Regards,
Gergő

answered on 20 Apr 2012, 09:07 PM

Gergő,

Thanks so much for your help.

Okay, I removed "data {}" from the transport definition in the grid definition. I guess there's no point in having that if I'm not passing params back to the controller.

Second, I changed the method "GetWorklist" to this:

[HttpPost]
public JsonResult GetWorklist()
{
List<Workitem> worklist = PestsLogic.GetWorklist();
return Json(worklist, JsonRequestBehavior.AllowGet);
}

This makes a lot of sense. I'm not returning a view, just some JSON to the grid. Hadn't thought of it like that before.

I wasn't sure about the third point you made. Are you saying my naming convention isn't right?

After making those first two changes, I'm still getting a blank page. Any other suggestions? Also, please clarify your third point.

Thanks,
Jay

answered on 20 Apr 2012, 09:24 PM

Hi again,

Clarification of 3rd point:

Here is a part of your initial code:

transport: {

read: {

url: "Home/GetWorklist",

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

data: {}

}

As you can see the type is set to "POST". Usually the HTTP Post verb is used when data is sent to the server and it is saved(this is an unwritten rule :) - some people agree some people disagree ). The idea was, you have type: "POST" specified, but your method is named GETWorklist. GET also is a HTTP word, so this is why it sounds a little contrary.

I missed a point at my last post. I saw that you have added the creation of the grid in javascript but that is not executed.
Try to use the document.ready event to initialize your grid:

$(document).ready(function() {

//place the grid initialization code here

});

I think this way it should work.

Regards,
Gergő

answered on 20 Apr 2012, 09:54 PM

ScreenShot.jpg

So, I changed the POST to a GET and I put my JavaScript block inside document/ready function. Now I am getting a grey line across the top of the page. At least I'm getting something, but not my row of data. I attached a screenshot.

Any other ideas?

answered on 30 Apr 2012, 02:53 PM

View code:

@model List<pests.web.com.Models.Workitem>

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: {

url: "Home/GetWorklist",

dataType: "json",

type: "GET",

contentType: "application/json; charset=utf-8"

}

}
});

</script>

Code references in my layout page (these may not all be necessary for the Kendo grid):

Workitem:

namespace pests.web.com.Models

{

public class Workitem

{

private string _partNumber;

public string PartNumber

{

get { return string.Format("<a href='/subpage/{0}'>{0}</a>", _partNumber); }

set { _partNumber = value; }

}

public string Noun { get; set; }

public string ProcurementCode { get; set; }

public string Fscm { get; set; }

public string Responsible { get; set; }

public string SonicQueue { get; set; }

public string SonicStatus { get; set; }

public int Priority { get; set; }

public string Dis { get; set; }

public string Qus { get; set; }

public string Status { get; set; }

public string Action { get; set; }

public string Estimator { get; set; }

public string RelatedParts { get; set; }

}

Controller method:

[HttpGet]

public JsonResult GetWorklist()

{

List<Workitem> worklist = PestsLogic.GetWorklist();

return Json(worklist, JsonRequestBehavior.AllowGet);

}