The jqGrids

Conceptually, just everything that happens on the page we are designing is part of the grid definitions, but that makes for very complex code, so wherever possible in the grid definition itself, we refer to variables or functions so we can move the complexity to a separate area and leave the grid definition relatively clean.

Several fields in these grids end with 'fk': those are the foreign keys that we will need to include in our data, but never want to show to the operator.

First, we define the Master grid:

$("#tblMaster").jqGrid( { 
      url: 'url to retrieve Master data', 
      datatype: 'xml', 
      colNames: ['Cheque #','Issued','By','VendID','Amount','Taxes','Trans #','PK'], 
      colModel: [{name:'cheque', editable:true, editoptions:{size:15}, align:'right', sortable:false, width:80 }, 
        {name:'issued', editable:true, editoptions:{size:20}, align:'right', sortable:false, width:100 },
        {name:'cvname', index:'cv_name', width:200, editable:true, edittype:'text', editoptions:{size:70} },
        {name:'cvfk', hidden:true, width:10, editable:true },
        {name:'amount', editable:true, editoptions:{size:15}, align:'right', sortable:false, width:85, formatter:'currency', formatoptions:{decimalSeparator:'.', thousandsSeparator:',', decimalPlaces:2, prefix:''} },
        {name:'taxes', hidden:true, editable:true, edittype:'select', editoptions:{value:'  : No taxes; 55F:GST - Fully Deductible; 55P:GST - Partially Deductible'}, editrules:{ edithidden:false} },
        {name:'trans',  hidden:true, width:10 } ], 
      height: 'auto', 
      pager: $('#tblMasterPager'), 
      rowNum:10, 
      rowList:[10,25,50,100,999], 
      page: 1, 
      loadui: 'block', 
      sortname: 'none', 
      sortorder: 'asc', 
      viewrecords: true, 
      imgpath: '../scripts/jqGrid/themes/basic/images', 
      hidegrid: false, 
      caption: 'Deposits in this Batch', 
      editurl:masterediturl, 
      loadError: function(xhr,st,err) { 
        $("#tblMasterMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
        },

When we double-click on a row in the Master grid, we want to edit the record using the parameters defined in the editmasterprm var (see the next section)

ondblClickRow: function(rowid) { $("#tblMaster").editGridRow(rowid,editmasterprm);},

When this grid completes loading, if we are about to add the first record, we need to hide some buttons (see the function in the next section)

loadComplete: function() { FirstRecord(); },

Before we allow changing the data displayed in the Master grid, we need to check on the state of the current transaction (CheckMaster() is a function defined in the next section) and, if it is allowed, we then clear the Details grid.

onPaging: function(which) { 
        var ret = CheckMaster(); 
        if(ret) { 
            $("#tblDetails") 
              .clearGridData() 
              .setCaption("Select an Item, above, to view or edit details here") 
          } ; 
        }, 
      onSortCol: function(name,index,sorder) { 
        var ret = CheckMaster(); 
        if(ret) { 
            $("#tblDetails") 
              .clearGridData() 
              .setCaption("Select an Item, above, to view or edit details here")  
          } ; 
        },

We do a similar check before we allow selecting a different row in the Master grid (clicking on the currently selected row is never a problem)

beforeSelectRow: function(id) {
        var ret;
        if(id==$("#tblMaster").getGridParam('selrow')) {
           ret = true;
          } else {
           ret = CheckMaster();
          };
        return ret; 
      }, 
      onSelectRow: function(id) {
        if(ThisTrans == 0) { 
          var data = $("#tblMaster").getRowData(id) ; 
          // retrieve new data from the server, and reload the Details grid  
          $("#tblDetails") 
            .setGridParam({url:detailurl+'&amp;Trans='+id, datatype:'xml'}) 
            .setCaption("Details: " + data.cheque + ' - ' + data.cvname) 
            .trigger("reloadGrid"); 
          $("#tblDetails").setGridParam({datatype:'local'}); 
          ThisTrans = id; 
        } else { 
          return false 
        }; 
      }
    });

Here we define what to do when clicking on the pager buttons.

$("#tblMaster").navGrid('#tblMasterPager',{
        add:true,addtext:'Add',addfunc:AddMasterTrans,edit:true, edittext:'Edit',del:true, deltext:'Delete',search:false,refresh:false
         },
        editmasterprm, // edit parameters, defined below
        {}, // add
        delmasterprm // delete parameters, defined below
     );

Now, define the Details grid. This is much simpler because all we are worried about here is the one record that has been selected. The height on this grid is set to 'auto' so that it will grow to display all of the records entered for this transaction; because of this we don't need the normal pager controls at the bottom (but we do want the pager so we can show buttons to add, edit and delete).

$("#tblDetails").jqGrid( { 
      url: 'url to retrieve the Details data', 
      datatype: 'xml', 
      colNames: ['Invoice','Invoiced','O/S','Account','AcctID','Dr/Cr','','Rate','Amount','Comment','Project','Project','Title','ProjectID','Structure','Client','ClientID','PK'], 
      colModel: [{name:'invoice', editable:true, editoptions:{size:15}, align:'right', index:'invoice', width:55 }, 
        {name:'invoiced', editable:true, edittype:'text', hidden:true, editrules:{edithidden:true}, editoptions:{size:15}, align:'right', sortable:false, width:65 }, 
        {name:'outstanding', editable:true, hidden:true, editrules:{edithidden:true}, editoptions:{size:15}, align:'right', sortable:false, width:65 }, 
        {name:'acctname', editable:true, width:300, editoptions:{size:70}, editrules:{required:true}  }, 
        {name:'acctnamefk', editable:true, hidden:true, width:30 }, 
        {name:'sign', editable:true, hidden:true, width:30 }, 
        {name:'symbol', editable:true, hidden:true, width:30 }, 
        {name:'conversion', editable:true, hidden:true, width:30 }, 
        {name:'amount', editable:true, editoptions:{size:15}, align:'right', sortable:false, width:85, formatter:'currency', formatoptions:{decimalSeparator:'.', thousandsSeparator:',', decimalPlaces:2, prefix:''} },
        {name:'comment', editable:true, edittype:'textarea', editoptions:{rows:4,cols:60}, sortable:false, width:150 }, 
        {name:'project', index:'project', search:false, editable:true, editoptions:{size:'70', maxlength:'50'}, width:250 }, 
        {name:'projectnumber', hidden:true, index:'project', search:false, editable:true, editoptions:{size:'5', maxlength:'5'}, editrules:{edithidden:true}, width:250 }, 
        {name:'shorttitle', hidden:true, index:'project', search:false, editable:true, editoptions:{size:'50', maxlength:'25'}, editrules:{edithidden:true}, width:250 }, 
        {name:'projectfk', hidden:true, editable:true, width:30 }, 
        {name:'structurefk', hidden:true, editable:true, width:30 }, 
        {name:'client', hidden:true, index:'client', search:false, editable:true, editoptions:{size:'50', maxlength:'25'}, editrules:{edithidden:true}, width:200 }, 
        {name:'clientfk', hidden:true, editable:true, width:30 }, 
        {name:'pk', hidden:true, width:10} ], 
      height: 'auto', 
      pager: $('#tblDetailsPager'), 
      pgbuttons: false, 
      pginput: false, 
      pgtext: false,
      loadui: 'block', 
      sortname: 'none', 
      sortorder: 'asc', 
      viewrecords: true, 
      imgpath: '../scripts/jqGrid/themes/basic/images', 
      hidegrid: false, 
      caption: 'Enter, View or Edit Distribution Side', 
      editurl:detailediturl, 
      loadError: function(xhr,st,err) { 
        $("#tblDetailsMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
        }, 
      ondblClickRow: function(rowid) { $("#tblDetails").editGridRow(rowid,editdtprm);}
    });  
    $("#tblDetails").navGrid('#tblDetailsPager',{
        add:true,addtext:'Add',addfunc:AddDetail,edit:true, edittext:'Edit',del:true, deltext:'Delete',search:false,refresh:false
         },
        editdtprm, // edit
        {}, // add
        deldtprm // delete
     );

The really complex stuff is in the next section, the Routines called by the Grids.