java - Color of default selected row not changing when selecting another row in jqGrid -

i've jggrid in i'm making first row default selected on page load.(the selected row highlighted yellow). when select other row in same jqgrid, selected row , default selected row both highlighted yellow color. ideally when user selects row, selected row should not highlighted yellow.

below snapshot explain better:

default selected row highlighted yellow(in page load):

currently selected , default selected row both highlighted yellow:

below jqgrid code:

$("#discactionhistgrid").jqgrid({     url:contextroot+'discacthist',     datatype: 'json',     jsonreader: {repeatitems: false},     mtype: 'post',     colnames: ['record id','close date','final action','summary','title','council','retraction'],     colmodel: [                { name: 'referralid', index: 'referralid', width: 25 },                { name: 'closuredate', index: 'closuredate', width: 30, formatter: function(cellvalue){return $.datepicker.formatdate('mm-dd-yy', new date(cellvalue));}},                                   { name: 'finalaction', index: 'finalaction', width: 30 },                { name: 'summary', index: 'summary', width: 50, cellattr: function (rowid, tv, rawobject, cm, rdata) { return 'style="white-space: normal;line-height: 1.3em;"'; } },                { name: 'title', index: 'title', width: 30 },                { name: 'councilnm', index: 'councilnm', width: 30 },                { name: 'retract', index: 'retract', width: 30, formatter: function (cellvalue, options, rowobject) {return '<a href="'+ contextroot +'dart/approved">retract</a>';} }     ],loaderror: function(xhr,st,err) {         alert(err);     },gridcomplete: function() {         $(this).setselection(1, true);     },onselectrow : function(rowid, status, e) {         var selrow = $(this).getgridparam("selrow");         var selreferralid = $(this).getcell(selrow, 'referralid');          $("#referraldetailstab").load(contextroot+"refdetailstab?refid=" + selreferralid );     },     pager: '#discactionhistpager',     sortorder: 'desc',     sortname: 'closuredate',     gridview: true,     viewrecords: true,     loadonce: true,     hoverrows : true,     autowidth: true,     height: 'auto',     rownum: 3,     shrinktofit: true,     altrows:true });  $("#discactionhistgrid").jqgrid('navgrid','#discactionhistpager',    {     edit:false,     add:false,     del:false,     search:false,     refresh:false }); 

can please me out this?

edited code after oleg's advice:

$("#discactionhistgrid").jqgrid({     url:contextroot+'discacthist',     datatype: 'json',     jsonreader: {repeatitems: false, id: "referralid"},     mtype: 'post',     colnames: ['record id','close date','final action','summary','title','council','retraction'],     colmodel: [                { name: 'referralid', index: 'referralid', key: true, width: 25 },                { name: 'closuredate', index: 'closuredate', width: 30, formatter: function(cellvalue){return $.datepicker.formatdate('mm-dd-yy', new date(cellvalue));}},                                   { name: 'finalaction', index: 'finalaction', width: 30 },                { name: 'summary', index: 'summary', width: 50, cellattr: function (rowid, tv, rawobject, cm, rdata) { return 'style="white-space: normal;line-height: 1.3em;"'; } },                { name: 'title', index: 'title', width: 30 },                { name: 'councilnm', index: 'councilnm', width: 30 },                { name: 'retract', index: 'retract', width: 30, formatter: function (cellvalue, options, rowobject) {return '<a href="'+ contextroot +'dart/approved">retract</a>';} }     ],loadcomplete: function() {         if (this.rows.length > 1) {             // select first row of grid             $(this).jqgrid("setselection", this.rows[1].id, true);         }         referralscnt = $(this).getgridparam("records");         rowcount = $(this).getgridparam("reccount");                     if(referralscnt > rowcount) {             $("#viewallreferrals").show();         }         $(this).triggerhandler("reloadgrid");        },loaderror: function(xhr,st,err) {         alert(err);     },onselectrow : function(rowid) {         $("#referraldetailstab").load(contextroot + "refdetailstab?refid=" + rowid);     },     pager: '#discactionhistpager',     sortorder: 'desc',     sortname: 'closuredate',     gridview: true,     viewrecords: true,     loadonce: true,     hoverrows : true,     autowidth: true,     height: 'auto',     rownum: 3,     shrinktofit: true,     altrows:true }); 

sample json data:

{"rows":[{"referralid":"2345","closuredate":1366395788927,"finalaction":"","summary":"","title":"titlename","councilnm":"councilname"},{"referralid":"23455660","closuredate":1366395788927,"finalaction":"reprimand","summary":"reprimand , letter of reecommendiation recinded","title":"titlename","councilnm":"councilname"},{"referralid":"23455661","closuredate":1366395788927,"finalaction":"reprimand","summary":"reprimand , letter of reecommendiation recinded","title":"titlename","councilnm":"councilname"},{"referralid":"23455662","closuredate":1366395788927,"finalaction":"reprimand","summary":"reprimand , letter of reecommendiation recinded","title":"titlename","councilnm":"councilname"},{"referralid":"23455663","closuredate":1366395788927,"finalaction":"reprimand","summary":"reprimand , letter of reecommendiation recinded","title":"titlename","councilnm":"councilname"},{"referralid":"23455664","closuredate":1366395788927,"finalaction":"reprimand","summary":"reprimand , letter of reecommendiation recinded","title":"titlename","councilnm":"councilname"}],"page":0,"total":0,"records":0} 

i think there big misunderstanding on rowid , jqgrid always need have unique id every row.

jqgrid designed show items backend (from database) in grid. have case. specially case the callbacks of jqgrid has rowid parameter. if fill grid correctly rowid should have same value id database table holds data.

only if jqgrid has wrong input data holds no id information jqgrid has use locally generated unique id. because of compatibility issues old versions of jqgrid still uses numbers 1, 2, 3 rowid.

what rowid? grid constructed based on html <table>. body of table has rows <tr> in html. implementation of jqgrid must assign unique values id attribute of <tr> elements (id of rows). 1 names id values in documentation rowids.

what should in case include id: "referralid" inside of jsonreader use or (better both) include key: true property in definition of referralid column:

{ name: 'referralid', key: true, width: 25, sorttype: 'integer' } 

after changes can simplify code of onselectrow callback to

onselectrow: function (rowid) {     $("#referraldetailstab").load(contextroot + "refdetailstab?refid=" + rowid); } 

or to

onselectrow: function (rowid) {     $("#referraldetailstab").load(contextroot + "refdetailstab?refid=" +         encodeuricomponent(rowid)); } 

to make code cleaner , independent of value has rowid.

there no "default selected row" in jqgrid. if want select first row on grid after grid loaded can replace code of gridcomplete following

loadcomplete: function () {     if (this.rows.length > 1) {         // select first row of grid         $(this).jqgrid("setselection", this.rows[1].id, true);     } } 

(see my answer describe why recommend use loadcomplete instead of gridcomplete)

i hope after changes problem described disappear.