Showing json data in dynamic jqgrid - dynamic

Question

$(document).ready(function () {
$.ajax({
url: "/GridTest/getTestData",
datatype: "json",
type: "POST",
async: false,
success: function (result) {
$("#dataGrid").jqGrid({
datatype: 'jsonstring',
data: result,
gridview: true,
colModel: result,
height: "auto",
loadComplete: function (data) {
alert('loaded');
},
loadError: function (xhr, status, error) {
alert('error');
}
});
},
error: function (x, e) {
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
});
string result = "['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', 'Address', 'Marital Status']";
Hello,
I have problem with showing json data in dynamic jqgrid.I am using this json string at serverside and set column names and data to this string at ajax function.Grid is loading but does not show anything at page. I tried many alternatives but could not show json data in jqgrid. What is wrong with my way here?
Thanks in advance

Answer 1

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.celledit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.subgrid.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.treegrid.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.grouping.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/grid.jqueryui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/jqDnR.js"></script>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>-->
$.ajax({
type: "POST",
//url: "../DynamicColumnBinding.txt",
url: "/GridTest/getTestData",
dataType: "json",
async: false,
success: function (result) {
var colD = result.couponStripList,
colM = result.colModelList;
alert(typeof(result));
$("#dataGrid").jqGrid({
datatype: 'local',
data: colD.rootVar,
gridview: true,
colModel: colM,
height: "auto",
loadComplete: function (data) {
alert('loaded');
},
loadError: function (xhr, status, error) {
alert('error');
}
});
},
error: function (x, e) {
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
});
string dataFile = System.IO.File.ReadAllText(Server.MapPath("~/DynamicColumnBinding.txt"));
jss.Serialize(text);
return Json(dataFile, JsonRequestBehavior.AllowGet);