multiple tables with tabletogrid and navgrid issues

Question

I am using jQuery 1.5.1, jQuery UI 1.8.13 and jqGrid 4.2.0.

Here is what I am trying to do:

I am trying to apply jqGrid to several tables (all have same structure) using tabletoGrid. Each table has the same class, but also has unique autogenerated id. I also have a div with a unique id after each table.

Corresponding to each table, there is a link, which when clicked would bring up the edit row popup for that table.

The tables all get jqGrid applied fine. No problem there. But the navigation pager does not show up in the pager div and neither do the form edit input controls inside the popup edit box. The edit form popup comes up, but it only has the previous, next, submit and cancel buttons, but no input boxes for the fields.

Am I missing some include files? I do not see any javascript errors. Any help is greatly appreciated. Thanks.

-- jqr

<link rel="stylesheet" href="/js/jquery1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />

<link rel="stylesheet" href="/js/jqgrid4.2.0/css/ui.jqgrid.css" />
<link rel="stylesheet" href="/js/jqgrid4.2.0/plugins/ui.multiselect.css" />



<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-ui-1.8.13.custom.min.js"></script>

<script type="text/javascript" src="/js/jqGrid4.2.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.tbltogrid.js" ></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.formedit.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var editOpt = {
                    editData:{
                        myparam:function(){
                            return "myval";
                        }
                    },
                    height:240,
                    reloadAfterSubmit: true,
                    editCaption:'Edit Recordxxx',
                    bSubmit:'Save',
                    url:'someurl.php',
                    closeAfterEdit:true,
                    viewPagerButtons:false
                };

var oGridOptions = 
{
  "colNames":[
    "Field1",
    "ReField1",
    "Head",
    "Line Item",
    "Modified By",
    "Date"
  ],
  "colModel":[
    {
      "name":"Field1",
      "index":"Field1",
      "width":65,
      "title":true,
      "hidden":false,
      "widthOrg":65,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"ReField1",
      "index":"ReField1",
      "width":71,
      "title":true,
      "hidden":false,
      "widthOrg":75,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Head",
      "index":"Head",
      "width":48,
      "title":true,
      "hidden":false,
      "widthOrg":50,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Line_Item",
      "index":"Line_Item",
      "width":600,
      "title":true,
      "hidden":false,
      "widthOrg":631,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }, 
      "classes": "LineItemText"
    },
    {
      "name":"Modified_By",
      "index":"Modified_By",
      "width":190,
      "title":true,
      "hidden":false,
      "widthOrg":200,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Date",
      "index":"Date",
      "width":96,
      "title":true,
      "hidden":false,
      "widthOrg":100,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    }
  ]
};

$.jgrid.edit.editCaption = "My Edit Caption";
$.jgrid.defaults.rownumbers = true;
$.jgrid.defaults.pgtext = "Page {0} of {1}";


tableToGrid("table.DataTablex", oGridOptions); 
jQuery("table.DataTablex").each(function(i) {
    var idx = i + 1;
    var sid = "#table" + idx.toString();
    var snavId = "#pagernav" + idx.toString();
    jQuery(sid).jqGrid('setGridParam',{"pager":snavId});
    jQuery(sid).jqGrid('navGrid',snavId,{edit: true, add: true, del: true}, editOpt);



$(".bedata").click(function(){ 
    var iwhich = this.id;
    var sTableId = "#table" + iwhich.toString();
    var gr = jQuery(sTableId).jqGrid('getGridParam','selrow'); 
    if( gr != null )  {
        jQuery(sTableId).jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
    }
    else 
        alert("Please Select Row"); 
      }); 

});
</script>

Answer 1

I suppose that your main problem is the usage of "editable":"true" instead of "editable":true or just editable:true. You should additionally remove widthOrg attribute from colModel which will be used for internal purpose.

One more problem. If you include jquery.jqGrid.min.js you should not include grid.tbltogrid.js and grid.formedit.js. If you opens jquery.jqGrid.min.js you will see in the comment at the beginning of the file after the text * Modules: the list of all jqGrid modules included. Including of the same modules one more time can follow to serious problems.

By the way if you define objects you don't need to place all property names in quotes. So all names on the left from ':' in the object initialization ("colNames", "colModel", "name", "index", ...) can be written without "" characters. Many attributes which you use (for example, "title":true, "hidden":false, "resizable":true, "sortable":true, "edittype":"text", ...) have default values. You can remove there to make the code shorter and better readable. In the documentation you will find default values for all colModel properties and all jqGrid options.