Hi,
I am trying to create the grid dynamically. My objective is to create a sort of dynamic front end to show some of the database tables. So I need to add / remove columns dynamically. I need to change the datatypes of the columns dynamically.
I used the script provided as answer in a similar question.
I get my grid constructed it shows my columns. But no data gets loaded in the grid. Firebug shows the request getting fired. Proper json data returned. In fact grid also fires gridComplete event. But no data is shown :-(
Has anyone faced this issue? I spent entire day tweaking the jsonReader and colModel to no avail
My sample html file:
<!doctype html>
<html>
<link href="../styles/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-1.4.2.js"></script>
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-ui.js"></script>
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.form.js"></script>
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.subscribe.js"></script>
<link rel="stylesheet" href="../themes/showcase/jquery-ui.css"
type="text/css" />
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.jqGrid.js"></script>
<script type="text/javascript"
src="/struts2-jquery-grid-showcase/struts/js/struts2/jquery.struts2.js"></script>
<script type="text/javascript" src="../js/refData.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath = "/struts2-jquery-grid-showcase/struts/";
jQuery.struts2_jquery.minSuffix = "";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
$.ajax(
{
type: "POST",
url: "/struts2-jquery-grid-showcase/refData-table.action",
data: "",
dataType: "json",
success: function(result)
{
colD = result.gridModel;
colN = result.colNames;
colM = result.colModel;
jQuery("#refData").jqGrid({
jsonReader : {
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true,
loadComplete: function(data){alert('loaded');},
loadError: function(xhr,status,error){alert('error');}
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);
});
</script>
<h2>Maintain Reference Data</h2>
<table id="refData">
<tr>
<td />
</tr>
</table>
<div id="pager"></div>
</html>
My json data:
{"JSON":"success","colModel":[{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}],"colNames":["UserInfo ID","User ID"],"gridModel":[{"userID":"SMI","userInfoId":5},{"userID":"ABC","userInfoId":7},{"userID":"PQR","userInfoId":8},{"userID":"FUR","userInfoId":10},{"userID":"COO","userInfoId":13}],"page":1,"records":56,"rows":15,"sidx":null,"sord":"asc","total":0}