Hi ,
I am currently trying to implement JQGrid in an MVC 3 application using Entity Framework. And below is the code in my controller class.
public class HomeController : Controller
{
CustomEntities _ce;
List<Record> recData = new List<Record>();
public HomeController()
{
_ce = new CustomEntities();
}
public ActionResult Index()
{
var gridModel = new RecordsJqGridModel();
var recordsGrid = gridModel.RecordsGrid;
recordsGrid.ID = "Records";
var context = new CustomEntities();
IQueryable<Record> data = context.Records;
gridModel.RecordsGrid.DataSource = data;
gridModel.RecordsGrid.DataBind();
return View(gridModel);
}
}
However the prob with the code is that, the grid is not populated with the data even though I can see the data while debugging the view.
Below is the code in the view,
@model TestApp.Models.RecordsJqGridModel
@using Trirand.Web.Mvc;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="Stylesheet" type="text/css" media="screen" href="../../Content/themes/ui.jqgrid.css"/>
<link rel="Stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.23.custom.css"/>
<script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>
<script language="javascript" type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
</head>
<body>
<div>
@Html.Trirand().JQGrid(Model.RecordsGrid,"Records")
</div>
</body>
</html>
On the output page, i can only see a horizontal bar and nothing else.
Code for RecordsJqGridModel:
namespace TestApp.Models
{
public class RecordsJqGridModel
{
public JQGrid RecordsGrid { get; set; }
public RecordsJqGridModel()
{
RecordsGrid=new JQGrid
{
Columns=new List<JQGridColumn>()
{
new JQGridColumn{
DataField="Date",
PrimaryKey=false,
Editable=false,
Width=50
},
new JQGridColumn{
DataField="BE",
PrimaryKey=false,
Editable=false,
Width=50
},
new JQGridColumn{
DataField="CE",
PrimaryKey=false,
Editable=false,
Width=50
},
new JQGridColumn{
DataField="SE",
PrimaryKey=false,
Editable=false,
Width=50
},
new JQGridColumn{
DataField="OE",
PrimaryKey=false,
Editable=false,
Width=50
}
},
Width=Unit.Pixel(640),
Height=Unit.Pixel(400)
};
RecordsGrid.ToolBarSettings.ShowRefreshButton = true;
}
}
}
Can anyone suggest what might have gone wrong with the code.
Thanks in advance.