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

Question

I've a jgGrid in which I'm making the first row default selected on page load.(The selected row is highlighted as yellow). Now when I select some other row in the same jqGrid, the currently selected row and default selected row both are highlighted with yellow color. Ideally when the user selects another row, the previously selected row should not be highlighted yellow.

Below is the snapshot to explain better:

Default Selected row highlighted yellow(in page load): enter image description here

Currently selected and Default Selected row BOTH highlighted yellow: enter image description here

Below is my 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 anyone please help me out with 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 the first row of the 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 and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455661","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455662","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455663","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"},{"referralId":"23455664","closureDate":1366395788927,"finalAction":"Reprimand","summary":"Reprimand and letter of reecommendiation recinded","title":"TitleName","councilNm":"CouncilName"}],"page":0,"total":0,"records":0}

score 0 · Answer 1 · edited May 23 '17 at 12:04

I think that there is a big misunderstanding on what is rowid and that jqGrid always need to have unique id for every row.

jqGrid is designed to show items from the backend (from the database) in the grid. You have exactly the case. Specially for the case the most callbacks of jqGrid has rowid as parameter. If you fill the grid correctly the rowid should have the same value as the id from your database table which holds the data.

Only if jqGrid has wrong input data which holds no id information then jqGrid has to use some locally generated unique id. Because of the compatibility issues with old versions of jqGrid it still uses the numbers 1, 2, 3 as rowid.

What is a rowid? The grid is constructed based on HTML <table>. The body of the table has rows which are <tr> in HTML. The implementation of jqGrid must assign some unique values for id attribute of the <tr> elements (id of rows). One names the id values in the documentation as rowids.

What you should do in your case is include id: "referralId" inside of jsonReader which you use or (better both) include key: true property in the definition of referralId column:

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

After the changes you can simplify the 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 and independent of which value has rowid.

There is no "default selected row" in jqGrid. If you want to select first row on the grid after the grid is loaded you can replace the code of gridComplete to the following

loadComplete: function () {
    if (this.rows.length > 1) {
        // select the first row of the grid
        $(this).jqGrid("setSelection", this.rows[1].id, true);
    }
}

(see my answer where I describe why I recommend use loadComplete instead of gridComplete)

I hope that after the changes the problem which you described will disappear.

Thanks Oleg for your advice to clean up my code. You're a genius! BUT the initial problem that I had mentioned in my query, still persists. :( The first row selected on the grid load remains highlighted even after I select(and highlight) another row in the grid. — tarares, Apr 19 '13 at 14:38
Also wanted to mention that: Only when I explicitly click the selected(and highlighted) first row and then click some other row, everything works fine, i.e. only the currently selected row is highlighted yellow. — tarares, Apr 19 '13 at 14:48
@tarares: I can't reproduce the problem in my tests. Probably the reason could be in combination with specific data returned from URL `ontextRoot+'discActHist'`. Could you some test JSON data which reproduces the problem? — Oleg, Apr 19 '13 at 16:34

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

1 Answers1