jQuery Grid Plugin - jqGrid

Tony,

I have two columns in my grid that use the formatter (showlink) option.  I assume that the ID value in the link is the current column value.  My second coulumn link has the same ID value as the first column.

Col1:  http://path/casedetails.cfm?ID=123456  col value is 123456

Col2: http://path/sitedetails.cfm?ID=123456   col value is TB00885

The value of the ID should be TB008855, right.

Here's my code:

 $(document).ready(function()
  {
   $("#slist").jqGrid(
   {
    url:'Users.cfc?method=GetAllCases&myacct=<cfoutput>#session.bizorg_objid#</cfoutput>', //CFC that will return the users
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['Case Number','Priority','Site ID','Site Name','Status','Problem','Created','','','',''], //Column Names
    //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
    colModel :[
        {name:'x_object_id',index:'x_object_id', align:"center", sorttype:"text", width: 70
      ,formatter:'showlink', formatoptions:{baseLinkUrl:'casedetails.cfm'}
      },    
      {name:'x_priority',index:'x_priority',  align:"center", sorttype:"text", width: 60},
     {name:'x_site_id',index:'x_site_id',  align:"center",sorttype:"text", width: 60
     , formatter:'showlink', formatoptions:{baseLinkUrl: 'sitedetails.cfm'}
     },
     {name:'x_site_name',index:'x_site_name',  align:"left",sorttype:"text"},
     {name:'x_status',index:'x_status',  align:"center", sorttype:"text", width: 60},
     {name:'x_title',index:'x_title',  align:"left", sorttype:"text"},
     {name:'x_creation_dt',index:'x_creation_dt',  align:"center", sorttype:"date"},
     {name:'objid',index:'objid', hidden:true, search:false},
     {name:'x_object_objid',index:'x_object_objid', hidden:true, search:false},
     {name:'x_parent_objid',index:'x_parent_objid', hidden:true, search:false},
     {name:'x_parent_type',index:'x_parent_type', hidden:true, search:false}
    ],
    afterInsertRow : function(rowid,rowdata,rowelem) {
    // $("#"+rowid+" td:eq(1)").css("color", "005D8C");  // change font col 1 to note it's a link
     //$("#"+rowid+" td:eq(3)").css("color", "00748C");  // change font col 3 to note it's a link
    if (rowdata.x_parent_type == "children" && rowdata.x_parent_objid == 0)
     {
        $("#"+rowid+" td:eq(0)").empty().unbind("click");
         }  
     },
    width:900,
   // onCellSelect: function(rowid,iCol,cellcontent){
   //    if (iCol == 1)
   //    {
   //    //alert (rowid,iCol,cellcontent);
   //  ColdFusion.Window.show("casedetails");
   //  //window.location.href = "casedetails.cfm?cid="+cellcontent;
   //     }
   //  if (iCol == 3)
   //    {
   //     ColdFusion.Window.show("sitedetails");
   //     //window.location.href = "sitedetails.cfm?sid="+cellcontent;
   //     }
   // },
    cellEdit: false,
    //height:200,
    //shrinktofit: true,
    pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
    rowNum: <cfoutput>#session.maxlines#</cfoutput>, //Number of records we want to show per page
    //rowList:[10,25,50,100], //Row List, to allow user to select how many rows they want to see per page
    sortorder: "", //Default sort order - desc
    sortname: "x_priority", //Default sort column
    viewrecords: true, //Shows the nice message on the pager
    imgpath: 'themes/basic/images', //Image path for prev/next etc images
    caption: 'Open Cases', //Grid Name
    height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
    mtype:'GET',
    recordtext:' Total Records', //On the demo you will notice "7 Total Records" - The Total Reocrds text comes from here
    pgtext:' page of a total of ',//You notice the 1/3, you can change the /. You can make it say 1 of 3
    postdata: "",  // my account
    editurl:"Users.cfc?method=GetAllCases",//Not used right now.
    toolbar:[true,"top"],//Shows the toolbar at the top. I will decide if I need to put anything in there later.
    //Things to do when grid is finished loading
                loadComplete:function(){
      // Hide the site name column per user settings
      var hidesite = <cfoutput>#session.SiteDD#</cfoutput>;
      if(hidesite == 1){
      $("#slist").hideCol("x_site_name");
      }
           //We get the Userdata for the grid.
                        var recorddata = $("#slist").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_slist").css("color","red")
                        }else{
                            $("#t_slist").css("color","blue")
                        }
                        //Display the message in the toolbar
                        $("#t_slist").html(recorddata.MSG)
      },
    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("#slist").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=GetSubCases&q=2&id="+row_id+"&x_object_id="+rowdata.x_object_id,
              datatype: "json",
                 colNames: ['ID','Create D/T','Category','Priority','Status','Part Number','Part Desc','Description',''],
              colModel: [
              {name:"x_object_id",index:"x_object_id",key:true, align: "center", width:70
     , formatter:'showlink', formatoptions:{baseLinkUrl: 'prdetails.cfm',showAction:''}
     },
              {name:"x_creation_dt",index:"x_creation_dt", align:"left",datefmt:"Y-m-d", sorttype:"date", width:70},
              {name:"x_category",index:"x_category",align:"left", width:70, hidden:false},
                 {name:"x_priority",index:"x_priority",align:"left", width:70},          
              {name:"x_current_state",index:"x_current_state",align:"left", width:70},
     {name:"x_part_number",index:"x_part_number",align:"left", width:70},
     {name:"x_part_description",index:"x_part_description",align:"left"},
     {name:"x_title",index:"x_title",align:"left"},
     {name:'mytyp', hidden:true}
                        ],
       height: 'auto',
       width:900,
       imgpath: 'themes/basic/images', //Image path for prev/next etc images
       cellEdit: false,
       // change which fields to show
       afterInsertRow : function(rowid,rowdata,rowelem) {
        // $("#"+rowid+" td:eq(0)").css("color", "005D8C");  // change font col 1 to note it's a link
        if (rowdata.mytyp == "PR")
     {
       $("#"+subgrid_table_id).hideCol("x_priority");
       $("#"+subgrid_table_id).setLabel("x_object_id","PR No.");
        }
     else
     {
     $("#"+subgrid_table_id).hideCol("x_part_number");
     $("#"+subgrid_table_id).hideCol("x_part_description");
     $("#"+subgrid_table_id).setLabel("x_object_id","SubCase No.");
     } 
     },
     // below for link on column data
     onCellSelect: function(rowid,iCol,cellcontent){
       if (iCol == 0)
      {
         // alert(rowdata.x_object_id);
         if (rowdata.x_object_id.indexOf( "PR") == 0)
         {
       ColdFusion.Window.show("prdetails");
      }
        else
          {
       ColdFusion.Window.show("casedetails");
         }
       } 
     },
             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"
           })
       },
  
  //  subGridUrl: 'Users.cfc?method=GetSubCases', //CFC that will return the users
  //  subGridModel: [{
  //     name: ['SubCase No','Priority','Creation Date','Problem'], //Column Names
  //     width: [100, 100, 175, 300],
  //     params: ['x_object_id']}
  //  ],

    //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:true, top:200, left:400});
    $("#slist").navGrid("#pager",{edit:false,add:false,del:false,searchtext:"Filter"}).navButtonAdd('#pager',{
          caption:"To PDF", buttonimg:"images/pdf.png", onClickButton: function(){document.location.href='ExportTo.cfm?typ=p&met=DumpCases&myacct=<cfoutput>#session.bizorg_objid#</cfoutput>';}, position:"last", title:'Export to PDF' }).navButtonAdd('#pager',{
          caption:"To Excel", buttonimg:"images/icon-xls.png", onClickButton: function(){document.location.href='ExportTo.cfm?typ=e&met=DumpCases&myacct=<cfoutput>#session.bizorg_objid#</cfoutput>';}, position:"last", title:'Export to Excel' })
    ;