jQuery Grid Plugin - jqGrid

Hi  Tony/All

I have an app in production using jqgrid.

the problemis this --

i have a grid with pagination enabled .....

if i select a row and edit it on the same page it just works fine ...but when i move to next page and select another row , the edit dialogue still loads the previous selection.

Also when i move to the last page initally itself and then try to edit the row the edit dialogue doesnt work properly...even i move back to the first page.

Can u please help...the app is already in production and users are getting severly effected

here is my grid code

$("#msgKeysTable").jqGrid({
datatype: 'json',
 url: "keyOperations.htm?connId="+connId+"&appId="+appId+"&paramName=messagesKeyOps",
colNames:['Message Name','Message Text','Type','Description','Category','Severity','Created By','languageCode'],
colModel :[
            {name:'messageName',index:'messageName', width:150,align:'left',sortable:true,editable:false},
            {name:'messageText',index:'messageText', width:150, align:'left',sortable:true,editable:false},
            {name:'type',index:'type', width:125, align:'left',sortable:true,editable:false,edittype:"select",editoptions:{value:"50_PCT_EXPANSION_PROMPT:50_PCT_EXPANSION_PROMPT;OTHER:OTHER;MENU:MENU;TITLE:TITLE;100_PCT_EXPANSION_PROMPT:100_PCT_EXPANSION_PROMPT;WARN:WARN;QUESTION:QUESTION;TOKEN:TOKEN;CRITICAL:CRITICAL;REJECT:REJECT;WARNING:WARNING;ERROR:ERROR;NOTE:NOTE;ACTION:ACTION;30_PCT_EXPANSION_PROMPT:30_PCT_EXPANSION_PROMPT;SUMMARY:SUMMARY;HINT:HINT;PROMPT:PROMPT"}},
            {name:'description',index:'description', width:150, align:'left',sortable:true,editable:false},
            {name:"category",index:'category',width:70,editable:false,edittype:"select",editoptions:{value:"PRODUCT:PRODUCT;SECURITY:SECURITY;SYSTEM:SYSTEM;USER:USER"}},
            {name:"severity",index:'severity',width:90,align:"right",editable:false,edittype:"select",editoptions:{value:"CRITICAL:CRITICAL;WARNING:WARNING;ERROR:ERROR"}},
            {name:"createdBy",index:'createdBy',width:77,align:"center",editable:false},
            {name:'languageCode',index:'languageCode', hidden:true,editable:false}

            ],
       
        pager: $('#pagerMsgKeysTable'),
        rowNum:5,
        rowList:[5,10],
        sortname: "id",
        sortorder: "desc",
        viewrecords: true,
        multiselect: false,
        imgpath: 'images'
        }).navGrid("#pagerMsgKeysTable",{refresh: false,edit: false, add: false, del: false, search: false});

and here is my edit button's code

$("#editRowMessages").click(function(){
        makeMsgRowEditable("msgKeysTable");
            $("#msgKeysTable").setColProp('messageName',{editable:false}) ;
       
       
            var gr = $("#msgKeysTable").getGridParam('selrow');
            console.log("---------------------------------------------------------------"+gr);
            var rowData=$("#msgKeysTable").getRowData(gr);
            if( gr != null )
            {
            console.log(rowData);
           
            $("#msgKeysTable").editGridRow(gr,{closeAfterEdit:true,reloadAfterSubmit:false,modal: true,drag: true,editCaption: "Edit Message",bSubmit:"Save Changes",bCancel:"Cancel Changes",url:"keyOperations.htm?paramName=messagesKeyOps&opName=editMessage&messageName="+rowData.messageName});
            }
            else
            {
            alert("Please Select Row");
            makeMsgRowNonEditable("msgKeysTable");
            }
    });