The easiest solution, of course, is to use the new formatter options, but if that doesn't work for you (or it isn't just images of checkboxes you need to display) then try this approach.

If you are not using in-line editing, this is quite manageable, by including extra, hidden, columns in your grid. Then, show the column containing the image in the grid and edit the column containing the real data in the form. What we might end up with is a grid looking something like this:

while in the Edit form, we still deal with boolean settings, like this:

(These boolean fields could be shown on the Edit form as checkboxes, if you prefer. We are treating them as dropdowns rather than checkboxes for other reasons: when we use them in the Search form, we want to include a third option -- no preference or All -- so there we have to use a dropdown, and there is no way to show different controls for the same field in the Search and Edit forms.)

The colModel for this grid includes duplicate fields for Active and Default (colNames, of course, also has to include names for these extra columns):

colNames: ['Division','Branch','Head','Active','Active','Default','Default'],  
colModel [...
{name:'active', align:'center', hidden:true, editable:true, edittype:'select', editoptions:{value:'Yes:Yes;No:No'}, defval:'Yes', editrules:{edithidden:true, searchhidden:true}, width:80 },
{name:'activeimage', align:'center', sortable:false, search:false, editable:false, width:80 },
{name:'default', align:'center', hidden:true, editable:true, edittype:'select', editoptions:{value:'Yes:Yes;No:No'}, editrules:{edithidden:true, searchhidden:true},  width:80 }, 
{name:'defaultimage', align:'center', sortable:false, search:false, editable:false, width:80 }],

The "real" Active and Default coulmns are hidden in the grid but are editable and searchable, while the "image" columns are neither editable nor searchable so they do not show anywhere other than in the grid. The colNames are identical so that the same caption appears in the grid, the Search form and the Edit form.

To then apply the correct image to the grid, we need to set reloadAfterSubmit to True in the form definition so that we refresh the grid with the new data.

var addprm = {
    width: 450,
    height: 200,
    top: 125,
    left: 50,
    reloadAfterSubmit:true,
    closeAfterAdd:true
  };

And, just to be sure we are clear on how this is used, addprm is referenced in our definition of the pager:

$("#tblcontents").navGrid('#tblcontentsPager',{
        add:true,addtext:'Add',edit:true, edittext:'Edit',del:true, deltext:'Delete',search:false,refresh:false 
        },
        editprm, // edit
        addprm, // add
        delprm // delete
     );