jqGrid always highlighting first row when using addRowData

Been trying to get the rowID to no avail and I've just suddenly realised there's a fault in my code that's affecting how jqGrid is operating.

M开发者_Go百科y code is as follows:

function showSearchResults(k1,k2,k3,k4,k5){

jQuery("#list2").jqGrid(    {   datatype: function(pdata) {
        getData(pdata,k1,k2,k3,k4,k5);
    },
                            colNames:['title','section','Year','Month', 'Page', 'rank', k1,k2,k3,k4,k5],
                            colModel:[
                                        {name:'title',index:'title', width:300},
                                        {name:'section',index:'section', width:100},                                    
                                        {name:'yearEdition',index:'yearEdition', width:60, align:"center"},
                                        {name:'monthEdition',index:'monthEdition', width:60, align:"center"},
                                        {name:'pageNumber',index:'pageNumber', width:60, align:"center"},
                                        {name:'rank',index:'rank', width:100, align:"center"},
                                        {name:'keyword1',index:'keyword1', width:100, align:"center"},
                                        {name:'keyword2',index:'keyword2', width:100, align:"center"},
                                        {name:'keyword3',index:'keyword3', width:100,align:"center"},
                                        {name:'keyword4',index:'keyword4', width:100,align:"center"},
                                        {name:'keyword5',index:'keyword5', width:100,align:"center"}
                                    ],
                            rowNum:10,
                            rowList:[10,20,30],
                            pager: '#pager2',
                            sortname: 'id',
                            viewrecords: true,
                            sortorder: "desc",
                            loadonce:true,
                            caption:"Results" });

jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

The GetData function is merely this:

function getData(pdata,keyword1,keyword2,keyword3,keyword4,keyword5) {

$.getJSON('addresshere?callback=?',
    {
        k1:keyword1,
        k2:keyword2,
        k3:keyword3,
        k4:keyword4,
        k5:keyword5,
        async:false
    },

    function (data) {
    var a = JSON.parse(data);

    if (a.length != 0)  {
        $.each(a, function (index, item)
                        {
                        var thegrid = jQuery("#list2"); 
                        thegrid.addRowData(0,item);
                        });
                        }
                    });
    }

Returning the rows from the WebService, populating the grid all work fine, but no matter where I click on the grid, the first row is always highlighted.

Is there anything obvious or any known issues (like fields names conflicting with the jsGrid code, etc).

Yes, when you say:

thegrid.addRowData(0,item);

You are assigning each row in the grid the same ID of 0.

From the documentation for addRowData:

Parameters

• rowid
• data
• position
• srcrowid

Description

Inserts a new row with id = rowid containing the data in data (an object) at the position specified (first in the table, last in the table or before or after the row specified in srcrowid) ...

This method can insert multiple rows at once. In this case the data parameter should be array defined as [{name1:value1,name2: value2…}, {name1:value1,name2: value2…} ] and the first option rowid should contain the name from data object which should act as id of the row. It is not necessary that the name of the rowid in this case should be a part from colModel.

Since you are inserting one row at a time (instead of multiple rows as noted above), you need to assign each row a unique ID when calling addRowData. I recommend you retrieve a unique ID as part of your web request, and refactor your code as necessary to assign the ID:

 thegrid.addRowData(item.id, item);

Obviously that is a problem if you do not have a unique ID on the back-end - although it may indicate a larger design problem. In any case if you cannot retrieve an ID variable, I suggest you use a temporary JavaScript variable to assign each row an ever increasing ID:

var counter = 0;
...
    thegrid.addRowData(counter, item);
    counter++;
...

As Oleg points out, you can also pass undefined as the ID to allow jqGrid to automatically generate a unique ID. You can see this from the relevant portion of the source code in grid.base.js:

if(typeof(rowid) != 'undefined') { rowid = rowid+"";}
else {
    rowid = $.jgrid.randId();
    ...

I do not see this feature mentioned in the documentation so use it at your own risk. But that said, this seems like a nice feature that presumably the jqGrid team would have no reason to remove.