jqgrid show the images in popup box

Question

I am using the jqgrid, and prettyphoto in my application.
I have a column to show the image preview. on clicking that image is the image will be displayed in the popup box.
grid code is..

.....  
{name: 'imagePath', index: 'imagePath', width: 80, align: 'center',
    formatter :anchorFmatter, edittype: 'text', hidden: false, editable: true,
    editrules: {required: false}, editoptions: {size: 30}}
....
function anchorFmatter(cellValue, options, rowObject)
{
    if(cellValue === null ){
        return "<a></a>";
    }else {
        jQuery("a[rel='image']").prettyPhoto({
            animation_speed:'normal',
            show_title:false,
            allow_resize:true,
            default_width:640,
            default_height:385,
            theme:'light_rounded',
            autoplay:false
        });

        return "<a href='" + cellValue + "' rel='image'><img src='" + cellValue +
               "' width='100' height='35'></a>";
    }
}   

all images in the grid are coming in popup, but the last image is coming in new browser page.
may get any help.
Thanks in advance

Answer 1

Inside of custom formatter the grid contain exist still as string and not yet placed on the page. So you should remove the calls jQuery("a[rel='image']").prettyPhoto from the formutter function. Instead of that you can call the jQuery("a[rel='image']").prettyPhoto inside of loadComplete event handler. Additionally you should use gridview:true option if you not already use it. It will improve the grid performance.