jQuery Grid Plugin - jqGrid

I already link the css:

<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/jquery.searchFilter.css" />

The error I'm getting in Firebug is:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script src="jq-grid3.6.5/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jq-grid3.6.5/jquery.jqGrid.min.js" type="text/javascript"></script>

Jim

Oleg,

The code is way to big to post everything.

here's the css links which are in the heading section:

<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" href="/pti/css/global.css" media="all" />
<link rel="stylesheet" href="/pti/css/inside.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/ddsmoothmenu.css" />

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!--- html calling the grids --->

<div id="search"></div>
       <div id="g1">
     <!--- top nav bar --->
      <div id="pager2" class="export"><a href="ExportTo.cfm?typ=p&amp;met=DumpSO&amp;myTbl=<cfoutput>#session.sessionid#</cfoutput>&amp;listtyp=so&amp;myDSN=Installer&amp;OrdTyp=<cfoutput>#session.myGridSO_ShowType#</cfoutput>&amp;OpenShpd=O&amp;sidx="><img src="images/pdf.png" class="textmiddle" alt="Export to PDF"/> To PDF</a>&nbsp;
      <a href="ExportTo.cfm?typ=e&amp;met=DumpSO&amp;myTbl=<cfoutput>#session.sessionid#</cfoutput>&amp;listtyp=so&amp;myDSN=Installer&amp;OrdTyp=<cfoutput>#session.myGridSO_ShowType#</cfoutput>&amp;OpenShpd=O"><img src="images/icon-xls.png"  class="textmiddle" alt="Excel Logo" /> To Excel</a>      </div>
     <table id="solist_intl" class="scroll" cellpadding="0" cellspacing="0"></table>
     <div id="sopager" class="scroll" style="text-align:center;"></div>
        </div>
       <div>&nbsp;</div>
       
      <div id="g2">
      <div id="pager2" class="export"><a href="ExportTo.cfm?typ=p&amp;met=DumpIntlSHP&amp;myTbl=<cfoutput>#session.sessionid#</cfoutput>&amp;listtyp=ishp&amp;myDSN=Installer&amp;DaysAgo=<cfoutput>#session.myGridSHP_ShipSince#</cfoutput>&amp;sidx="><img src="images/pdf.png" class="textmiddle" alt="Export to PDF"/> To PDF</a>&nbsp;
      <a href="ExportTo.cfm?typ=e&amp;met=DumpIntlSHP&amp;myTbl=<cfoutput>#session.sessionid#</cfoutput>&amp;listtyp=ishp&amp;myDSN=Installer&amp;DaysAgo=<cfoutput>#session.myGridSHP_ShipSince#</cfoutput>&amp;sidx="><img src="images/icon-xls.png"  class="textmiddle" alt="Excel Logo" /> To Excel</a>
      </div>
     <table id="shplist" class="scroll" cellpadding="0" cellspacing="0"></table>
     <div id="shppager" class="scroll" style="text-align:center;"></div>
        </div>

<!---   Then at the bottom of the code all of the js except above jquery file. --->

<script src="jq-grid3.6.5/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jq-grid3.6.5/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com", "Shipments", "width=600,height=550,toolbar=0,scrollbars=1, menubar=0, top=50,left=300, resizable=1");
     };
     if (carrierdata == "FEDERAL EXPRESS") {
      window.open("http://www.fedex.com/Tracking?action=track&language=english&cntry_code=us&mps=y&tracknumbers="+cellcontent"+cellcontent, "Shipments", "width=600,height=550,toolbar=0,scrollbars=1, menubar=0, top=50,left=300, resizable=1");
     };
     if (carrierdata == "UNITED PARCEL SERVICE") {
      window.open("http://wwwapps.ups.com/tracking/tracking.cgi?tracknum="+cellcontent+"&C="+carrierdata+"&Dat="+shipdate"+cellcontent+"&C="+carrierdata+"&Dat="+shipdate, "Shipments", "width=600,height=550,toolbar=0,scrollbars=1, menubar=0, top=50,left=300, resizable=1");
     }
    // window.open("trackit.cfm?WB="+cellcontent+"&C="+carrierdata+"&Dat="+shipdate, "Shipments", "width=700,height=550,toolbar=0,scrollbars=1, menubar=0, top=50,left=500, resizable=1");
     }
     //  {window.location.href = "trackit.cfm?WB="+cellcontent+"&C="+carrierdata+"&Dat="+shipdate;}  
    },
    //Things to do when grid is finished loading
                gridComplete:function(){
          //  Adjust grid to fill the screen, var gw used below see ******
            var gw = parseInt($("#shplist").getGridParam("width"));
    // Hide the site name column per user settings
      // Show the Site Name column per user settings     
      var hidesite = <cfoutput>#session.myGridSHP_Site_Name#</cfoutput>;
      if(hidesite == 0){
      $("#shplist").hideCol("shiptoname");
      }
      // Show the Invoice No column per user settings
      var hideinvoice = <cfoutput>#session.myGridshp_ponumber#</cfoutput>;
      if(hideinvoice == 0){
      $("#shplist").hideCol("ponumber");
      }
      // Show the Account Name column per user settings
      var hideacctname = <cfoutput>#session.myGridSHP_Acct_Name#</cfoutput>;
      if(hideacctname == 0){
      $("#shplist").hideCol("acct_name");
       }
      // Show the Account Email column per user settings
      var hideacctemail = <cfoutput>#session.myGridSHP_Acct_Email#</cfoutput>;
      if(hideacctemail == 0){
       $("#shplist").hideCol("acct_email");
       }
      // **** 
      $("#shplist").setGridWidth(gw-0.01,true);   // reset the grid width              
           //We get the Userdata for the grid.
                        var recorddata = $("#shplist").getUserData();
                        //If the msg type is error, we do some CSS and change text color to red, otherwise its blue
                        if(recorddata.TYPE == "Error"){
                            $("#t_shplist").css("color","red")
                        }else{
                            $("#t_shplist").css("color","blue")
                        }
                        //Display the message in the toolbar
                        $("#t_shplist").html(recorddata.MSG)
      },
    // this has a subgrid
    subGrid: true, // make it a subgrid
          subGridRowExpanded: function(subgrid_id, row_id) {
      // we pass two parameters
       // subgrid_id is a id of the div tag created within a table
       // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) - which returns associative array in type name-value
       // here we can easy construct the following
         var subgrid_table_id;
         var rowdata = jQuery("#subshplist").getRowData(row_id);
           subgrid_table_id = subgrid_id+"_t";
          jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
          jQuery("#"+subgrid_table_id).jqGrid({
            url:"Users.cfc?method=GetSubSHP&q=2&id="+row_id+"&myDSN=Installer&sonumber="+rowdata.sonumber,
              datatype: "json",
                 colNames: ['PAR Invoice No','Invoice Date','Invoice Amt','Status','Balance'],
              colModel: [
              {name:"invoiceno",index:"invoiceno",key:true, align: "center",width: 100
     },
     {name:"invoicedate",index:"invoicedate", align:"center",width: 120
     ,formatter:'date', formatoptions:{srcformat: 'd/m/Y H:i:s',newformat: '<cfoutput>#session.myGridDateFormat#</cfoutput>'}},
              {name:"subtotal",index:"subtotal",align:"center",width: 80
     ,formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}
     },
                 {name:"var.mystatus",index:"var.mystatus",align:"center",width: 80},          
              {name:"var.mybal",index:"var.mybal",align:"center",width: 80
     ,formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}},
                       ],
       height: 'auto',
       //width: 'auto',
       forceFit: true,
       scroll: true,
       imgpath: 'themes/basic/images', //Image path for prev/next etc images
       cellEdit: false,
       afterInsertRow : function(rowid,rowdata,rowelem) {
       $("#"+rowid+" td:eq(0)").css("color", "005D8C").css("text-decoration","underline").css("cursor","pointer");  // change col 1 to note it's a link   
       },
  //         //Things to do when grid is finished loading
  //                    loadComplete:function(){
//      // Hide the site name column per user settings
//      var hidesubsite = <cfoutput>#session.myGridSC_Site_Name#</cfoutput>;
//      if(hidesubsite == 1){
//      $("#"+subgrid_table_id).hideCol("x_site_name");
//                      }   
//      },
//      //alert (rowid,iCol,cellcontent); create links from these columns
    onCellSelect: function(rowid,iCol,cellcontent){    
     if (iCol == 0)
       //{window.location.href = "sodetailprt.cfm?ThisInv="+cellcontent;} 
       window.open("sodetailprt.cfm?ThisInv="+cellcontent, "Sales Invoice", "width=980,height=550,toolbar=0,scrollbars=0, menubar=0, top=50,left=20, resizable=1");    
       },      
             rowNum: 10,
             //imgpath: 'themes/green/images', //Image path for prev/next etc images,
             sortname: 'num',
         //The JSON reader. This defines what the JSON data returned from the CFC should look like
     jsonReader: {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records:"RECORDS",
     cell: "",
     id: "0",
     subgrid: {root: "ROWS", repeatitems: true, cell: "",id:"0"}
     },
             sortorder: "asc"
           })
       },     
    //   Below is for the main grid   
    //The JSON reader. This defines what the JSON data returned from the CFC should look like
    jsonReader: {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records:"RECORDS",
     userdata: "USERDATA",
     cell: "",
     id: "0",
     subgrid: {root: "ROWS", repeatitems: true, cell: "",id:"0"}
     }
    }
   );  
   $.extend($.jgrid.search,
    {caption:"Filter",
       Find:'Search',
       width:'400',
       checkInput:false,
       top:200,
       left:400,
       sopt: ['eq','ne','lt','le','gt','ge','bw','cn']     
      });
   
   $("#shplist").navGrid("#shppager",{edit:false,add:false,del:false,searchtext:"Filter"})
  
    // END OF shplist - SALES ORDERS SHIPPED
       //   below are part of the master grid layout
   
  }  //  required
 )  // required   
 </script>