Home/ Questions/Q 3228820
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:44:17+00:00

I am trying to create the grid dynamically. My objective is to create a

  • 0

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}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems to me that you forget to include {} as a contain of gridModel. Currently the data looks like 

    {
    "JSON": "success",
    "colModel": [
       ...
    ],
"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
}

    instead of 

    {
    "JSON": "success",
    "colModel": [
       ...
    ],
"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,
    "total": 0
  }
}

    The usage of "jsonmap" seems me also not really needed.

    • 0