I've successfully bind data to JqGrid using ASP.NET MVC 2. I followed an example code to achieve it. Below is my code and i've got some questions regarding the code.
I can not see the parameter passing to "string sidx, string sord, int page, int rows" in my jquery code?
Do i need to have the exactly same names in my model? i mean total,page,records,rows can these properties be changed or JQgrid require the same property names?
Model:
public class JQGrid
{
public int total { get; set; }
public int page { get; set; }
public int records { get; set; }
public Array rows { get; set; }
}
Repository:
public JQGrid DynamicGridData(string sidx, string sord, int page, int rows)
{
dc = new StockDataClassesDataContext(ConString.DBConnection);
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = dc.tblClients.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var GridData = new JQGrid
{
total = totalPages,
page =page,
records = totalRecords,
rows = (
from client in dc.tblClients
select new
{
i = client.ClientID,
cell = new string[] { client.ClientID.ToString(), client.Address.ToString(), client.Company.ToString(), client.Name.ToString() }
}).ToArray()
};
return GridData;
}
Controller:
public ActionResult DynamicGridData(string sidx, string sord, int page, int rows)
{
JqGridClientRepository rep = new JqGridClientRepository();
var jsonData = rep.DynamicGridData(sidx, sord, page, rows);
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
View:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<title>jqGrid for ASP.NET MVC - Demo</title>
<!-- The jQuery UI theme that will be used by the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
<!-- The Css UI theme extension of jqGrid -->
<link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />
<!-- jQuery library is a prerequisite for jqGrid -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<!-- language pack - MUST be included before the jqGrid javascript -->
<script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
<!-- the jqGrid javascript runtime -->
<script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: '/JqGridClients/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['ClientID', 'Address', 'Company','Name'],
colModel: [
{ name: 'ClientID', index: 'ClientID',width: 60, align: 'left' },
{ name: 'Address', index: 'Address', align: 'left' },
{ name: 'Company', index: 'Company', align: 'left' },
{ name: 'Name', index: 'Name', align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'ClientID',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Clients'
});
});
</script>
<h2>Index</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</asp:Content>