jQuery Grid Plugin - jqGrid

tony, that got rid of the error,  but from what I can tell the unformat function is receiving empty/undefined parameters cellvalue and options

the function is called and returns a value properly but it's not getting cellvalue and options parameters.

thanks!

Tony - here's the grid and the un/format function.   The unformat function is called but what is weird is that both "return cellvalue" and omitting the "return" alltogether result in the formated value appearing in that field on the Edit form.   But if you do "return 'somevalue' "  - that value appears in the field...         Here's the inlude files i'm using so you can see if they way they are ordered is the problem.  thanks for your help - jack

<script src="jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.form.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/effects.core.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>

<script src="jquery.tablednd_0_5.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="jquery.simpleImageCheck-0.1.min.js" type="text/javascript"></script>

 // Format webpage col links functions  
 function plantPicFmatter (cellvalue, options, rowObject) {
  cellvalue = '<img src="' + cellvalue + '" width="100"/>' ;
     return cellvalue;
 }
 function  unformatPic (cellvalue, options)  {

return cellvalue;
 }
 

 var mygrid = $("#list").jqGrid(   {
    url:'../com/jweblists.cfc?method=getMemberList&memberListID=' + listID, //CFC that will return all data for a particular weblist
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['ItemID','ListID', 'FDID', 'Botanical Name', 'Common Names', 'Webpage', 'Member Note', 'Image',     'adddate', 'lastupdate', 'Item Title', 'seqnum'], //Column Names
    colModel :[
     {name:'ItemID',index:'listItemID', sorttype:'int', width:30, key:true, editable:true,  editoptions:{disabled:true, size:5, maxlength:5 }},
     {name:'memberListID', index:'memberListID', width:30, hidden:true, editable:true,  editoptions:{size:5, maxlength:5, disabled:true }, editrules:{edithidden:true}},
     {name:'fdid', index:'fdid', sorttype:'int', width:30, search:true, editable:true,  editoptions:{size:5, maxlength:5}, editrules:{edithidden:true, number:true}},
     {name:'fname',index:'fname',  width:100, editable:true, sorttype:'text',editoptions:{size:45, maxlength:100 }}, 
     {name:'commonNameList', index:'commonNameList', sorttype:'text', width:175, editable:true, editoptions:{size:45, maxlength:100 }},            
     {name:'webpage',index:'webpage',  width:30, editable:'true', hidden:true, editrules:{edithidden:true, required:false}, editoptions:{size:15, maxlength:100 } },
           
     {name:'membernote',index:'membernote', sorttype:'text', editable:true, hidden:true, edittype:'textarea', editoptions:{rows:"2",cols:"45", maxlength:2000}, editrules:{edithidden:true, required:false} },
        
     {name:'picpath',index:'picpath',  width:110, search:false, sorttype:"text", editable:true, editoptions:{size:45, maxlength:100}, formatter: plantPicFmatter, unformat: unformatPic },
     
     {name:'addDate',index:'addDate',  hidden:true},
     {name:'lastupdate',index:'lastupdate', hidden:true}, 
     {name:'itemtitle',index:'itemtitle', sorttype:'text',  search:true, width:150, editable:true, editoptions:{size:45, maxlength:100}},           
     {name:'seqnum',index:'seqnum', sorttype:'int', hidden:true}            
    ],              
    pager: $('#pager'),
    toolbar : [true,  'top'],
    rowNum:10, //Number of records we want to show per page
    rowList:[5,10,20,25,50], //Row List, to allow user to select how many rows they want to see per page
    sortorder: 'asc', //Default sort order
    sortname: 'fname', //Default sort column
    viewrecords: true, //Shows the nice message on the pager
    imgpath: '../css/custom-theme/images', //Image path for prev/next etc images
    caption: 'Floridata List item Editor', //Grid Name
    hoverrows: false,
    width: 'auto',
    height:'auto', //I like auto, so there is no blank space between.
    mtype:'POST',
    recordtext:'Total', // The Total Reocrds text comes from here
    // pginput: true,
    editurl: "../com/jweblists.cfc?method=addEditItem", //The Add/Edit function call
    gridComplete: function() {
     jQuery("#list").tableDnDUpdate();
    },
    //Things to do when grid is finished loading
    loadComplete: function() {
     // initialize List Info area
     var recorddata = $("#list").getUserData();
     listInfo = recorddata.LISTREC;
     // init Web List Info View, the form is init when dialog opens
     initListInfoView();
     initCheckImgs();
     initListInfoForm();
      
       },
    //The JSON reader. This defines what the JSON data returned from the CFC should look like
    jsonReader: {
     root: "ROWS", //our data
             page: "PAGE", //current page
             total: "TOTAL", //total pages
            records:"RECORDS", //total records
       repeatitems: true,
     userdata:"USERDATA", //Userdata we will pass back for feedback
     cell: "", //Not Used
     id: "0" 

     }
    });
    
    $("#t_list").height(20).hide().filterGrid("#list",{gridModel:true,gridNames:false,gridToolbar:true});
        
    $("#list").navGrid('#pager', {view:true, search:false}, //options
    {savekey: [true,13], navkeys: [true,38,40], width:450, reloadAfterSubmit:true, jqModal:false, closeAfterEdit:true, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // edit options
    {savekey: [true,13], navkeys: [true,38,40],  width:450, reloadAfterSubmit:true,jqModal:false, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // add options
    {reloadAfterSubmit:true,jqModal:false, closeOnEscape:true, url:'../com/plantbrowser.cfc?method=delplant'}, // del options
    {closeOnEscape:true}, // search options
    {navkeys: [true,38,40], height:350, width:450, jqModal:false,closeOnEscape:true} // view options );
   ).navButtonAdd("#pager",
     {caption:"Search", title:"Toggle Search",
     buttonimg:'../css/smoothness/images/find.gif',
     onClickButton:function(){
      if($("#t_list").css("display")=="none")
       { $("#t_list").css("display",""); }
      else { $("#t_list").css("display","none"); }
      }
   });  // end navButtonAdd

I've been tracing through the code with Firebug for hours and I think I finally found my problem.  I'm formatting the data in a field,  which contains data that is a URL for an image, into an IMG element so I can display the image in the grid.  So the problem for me is on line 332 of the 'jquery.fmatter.js'  file where :

ret = unformatFunc($(cellval).text(), options);

$(cellval).text()  returns an empty string.  In order for my program to work I'd need  $(cellval).html()

So I guess I'm using formatter/unformat feature  inappropriately.  

Is the best way to display images in a grid (assuming the image url data is editable) to use an extra column to display the image and hide the column that holds the actual URL  ? 

Is there any possibility of changing the code to accommodate image formatting into IMG tags and unformatting for editting? that would be nice - thanks!