jqgrid implementation using JSOn and asp.net
Last time, I asked similar question. Now I tried to put the jqgrid together to work. However, I tried to bring the grid but the data is not loading.
here are the two files GetData.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Script.Serialization"%>
<%@ Import Namespace="System.Collections.ObjectModel"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(GetData());
Response.End();
//Response.Write ("Data is being loaded");
}
protected string GetData()
{
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new People {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
return GridData(1, 1, list.Count, list);
}
public string GridData(int noOfPages, int startPage, int noOfRecords, Collection<People> list)
{
var gridData = new
{
total = noOfPages,
page = startPage,
records = noOfRecords,
rows = list,
};
var jsonSerializer = new JavaScriptSerializer();
return jsonSerializer.Serialize(gridData);
}
public class People
{
public People()
{
Name = string.Empty;
Id = 0;
Gender = 0;
IsClosed = false;
}
public string Name { get; set; }
public int Id { get; set; }
public int Gender { get; set; }
public bool IsClosed { get; set; }
}
public enum Oper
{
edit=1,
del=2,
add=3
}
</script>
</html>
JQExample.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<title>JqGrid</title>
<link href="themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<%-- <form id="form1">--%>
<table id="jsonmap">
</table>
<div id="pjmap">
</div>
<script type="text/javascript">
jQuery("#jsonmap").jqGrid({
url: 'GetData.aspx',
datatype: 'json',
colNames: ['ID', 'Name','Active','Gender'],
colModel: [{
name: 'id',
index: 'id',
width: 35,
editable: false,
editoptions: {
readonly: true,
size: 10
}},
{
name: 'name',
index: 'name',
width: 150,
align: "left",
editable: true,
size: 100
},
{
name: 'isClosed',
index: 'isClosed',
width: 100,
align: 'left',
editable: true,
edittype: "checkbox",
editoptions: {
value: "true:false",
formatter: "checkbox"
}},
{
name: 'gender',
index: 'gender',
width: 100,
formatter:'select',
editable: true,
edittype: "select",
editoptions: {value: "0:select;1:male;2:female"}
}],
rowNum: 10,
rowList: [2, 5, 10, 15],
pager: '#pjmap',
sortname: 'id',
sortorder: "desc",
viewrecords: true,
jsonReader: {
repeatitems: false
},
width: 600,
caption: 'First jqGrid',
height: '100%',
editurl: 'GetData.aspx'
});
jQuery("#jsonmap").navGrid("#pjmap", {
edit: true,
add: true,
del: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: false
},
{
closeAfterAdd: true,
reloadAfterSubmit: false
},
{
reloadAfterSubmit: false
});
</script>
<table id="Jqgrid" width="100%">
</table>
<div id="pager"></div>
</form>
</body>
</html>
Now I would like to change data to be displayed dynamically using ADO.net.
Thank you sir. It worked now.
I want to change to get data dynamically which is change the data source in GetData.aspx and format the colNames and ColModel in JQExample.aspx file:
$(document).ready(function () {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
//url: "GetData.aspx",
datatype: 'json',
success: function (result) {
// colD = result.colData;
// colN = result.colNames;
var colM = result.colModel;
//alert(result.colModel);
jQuery("#jsonmap").jqGrid
(
{
jsonReader: { repeatitems: false, cell: "",id: "0" },
//url: "GetData.aspx",
datatype: 'json',
mtype: 'POST',
colModel: colM,
data: colD.rootVar,
ColNames: colN,
ColModel: ColM,
height: "auto",
gridview: true,
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function (data) {
alert('loaded completely');
},
loadError: function () {
alert('error');
}
});
},
error: function (x, e) {
alert(x.readyState + ' ' + x.status + e.msg);
}
});
The following code should be replaced by ADO.Net connection in GetData.aspx
var list = new Collection<People>
{
new People {Id = 1, Name = "John", Gender = 1, IsClosed = false},
new People {Id = 2, Name = "Abel", Gender = 1, IsClosed = false},
new Peopl开发者_StackOverflow社区e {Id = 3, Name = "Aaron", Gender = 1, IsClosed = true},
new People {Id = 4, Name = "Tsion", Gender = 2, IsClosed = true},
new People {Id = 5, Name = "Mussie", Gender = 2, IsClosed = true}
};
Would you please tell me what to do in the next step? I do have server end data source (SQL server). so should I write a select statement to get the total number of records, pages and order by (sorting) fearures to display in the grid? If so would you please give sample code which has top, limit and order by?
Is there anything missing in the above codes to get the data dynamically?
There are several things wrong with your implementation especially if you want it to be editable but just to load the data you need to fix your column mappings. They do not match. Also, I believe it's case sensitive so you need to change the colNames to below and update colModel to match those names/case:
colNames: ['Id', 'Name','IsClosed','Gender']
加载中,请稍侯......
精彩评论