Issue with image formatter in form

Question

I am a newbie to jqGrid, I am using jqGrid-4.4.0 to display values from db2 database using Spring MVC. I have used the formatter option to display an image depending on the value of one of the columns which also is working fine. The problem is that when I double click on the row to edit instead of getting the value from the column I get the image html tag. How do I show the actual value that I had got from the database?

Below is the funcation I use to format

function imageFormat( cellvalue, options, rowObject ){
    var img="";
    if(cellvalue==true){
        img= "<img src='"+CONTEXT_ROOT+"/images/icons/Light_Green_Round_16_n_g.gif'  BORDER='0'/>";
    }else{
        img= "<img src='"+CONTEXT_ROOT+"/images/icons/Light_Red_Round_16_n_g.gif'  BORDER='0'/>";
    }
    return img;
}

and in the colModel I am calling the function

colModel:[
        {name:'idCasePackOptions',hidden:true,editrules:{edithidden:true, required:false}, editable:true},  
        {name:'cypharecommended',index:'cypharecommended', width:170, sorttype:"int", sortable:true, editable:true, edittype:'checkbox', editoptions: { value:"1:0" }},
        {name:'distributorapproved',index:'distributorapproved', width:170, sorttype:"int", edittype:'text', editable:true, sortable:true},
        {name:'height',index:'height', width:100, sorttype:"float", edittype:'text', editable:true,sortable:true},
        {name:'length',index:'length', width:80, align:"right",sorttype:"float", edittype:'text', editable:true, sortable:true},
        {name:'statuscode',index:'statuscode', width:90, align:"right", edittype:'text', editable:true,sorttype:"int", sortable:true, formatter:imageFormat},       
        {name:'weight',index:'weight', width:100,align:"right", edittype:'text', editable:true,sorttype:"float", sortable:true},        
        {name:'width',index:'width', width:100, editable:true, edittype:'text', sorttype:"float",sortable:true}     
    ]

Answer 1

In addition to the Custom Formatter that you are using you can also declare an unformatter. It is defined and created very much like a custom formatter and follows the following format:

function imageUnFormat( cellvalue, options, cell){
    return $('img', cell).attr('src');
}

Where the parameters are as follows:

cellvalue - the value to be unformatted.

options - An object that contains the row id and column model

cellobject - A JQuery cell object.

You then declare it in your column model just like your formatter:

{name:'statuscode',index:'statuscode', width:90, align:"right", edittype:'text', editable:true,sorttype:"int", 
sortable:true, formatter:imageFormat, unformat:imageUnFormat},