Using idPrefix in jqGrid

Considering that the jqGrid is filled with local data and created with the idPrefix: "custTable" option, all generated rows are prefixed in the html identifier, i.e. custTableRow_1 custTableRow_2 etc. Does this idPrefix'ed version of the id passed to jqGrid methods, if so which ones?

for example, to delete a row using deleteRowData, is the id prefix needed? how about setRowData or addRowData? when added after line x, it seems to require a prefix for the srcrowid parameter. How about multi-segment strings?

If I delete a line using the id prefix of the line, it disappears from the screen, but when I reload the grid, the delete item appears again in the grid as if it hadn't been deleted. This does not happen when idPrefix is ​​not used.

thanks for any help.


source to share

1 answer

An option was introduced idPrefix

to store IDs in the HTML page, even if you have IDs on the page such as strings downloaded from the server. A typical example is two grids with data downloaded from the server. You have two tables in your database where you use IDENTITY or AUTOINCREMENT in your definition PRIMARY KEY

. In case the primary key will be generated automatically in the table and will be unique within the table, but there are no unique tables. Therefore, if you use primary keys as grid IDs and place two grids on the same page, you may have duplicate IDs.

To solve the problem, you can use idPrefix: "a"

as an additional option in the first grid and use idPrefix: "b"

in the second grid. In case of local jqGrid will use ids with a prefix everywhere, but the prefix will be stripped if the ids are sent to the server .

Thus, you will see locally at all callbacks (events) and all the methods (eg setRowData

, addRowData

etc.) IDs with the prefix, but on the side of the Ides server prefix will be removed immediately before sending it to the server.

I recommend that you additionally read another answer on identifier restrictions that I posted today.

UPDATED . I went through the code you put on the jsfiddle and found some glaring bugs in your code. Current code

1) use wrong algorithm to generate newline id. For example the following code

// generic way to create an animal    
function newAnimal(collection, defaults) {
    var next = collection.length + 1;
    var newpet = {
        id : next,
        name: + next,
        breed: defaults.breed
    return newpet;


use collection.length + 1

for new id. It is wrong if you are deleting items. By adding two elements, removing one of them and adding a new element, the id is duplicated again. Instead, it is safer to use some variable that will only increase. You can use $. Jgrid.randId () for example the code is very simple.

2) you call addRowData

with the addition of manually prefix (cm.

Below). This is wrong because jqGrid prefixes the strings once more.

// add dog button actions    
$('#dogAddAtEnd').click(function() {
    var newdog = newAnimal(dogs, dogDefaults);
    dogsTable.jqGrid('addRowData',, newdog);


There are probably more problems, but at least these problems might explain the problems you described.

UPDATED 2 . I've reviewed the new demo you posted. He still has lines

grid.jqGrid('addRowData',, newanimal,
            "after", prefix+ followingId);



dogsTable.jqGrid('addRowData',, newdog);


which should be fixed to

grid.jqGrid('addRowData',, newanimal,
            "after", followingId);



dogsTable.jqGrid('addRowData',, newdog);


However, I tested the demo after the changes and found errors in the code addRowData

, delRowData

and setRowData

. The problem is the line delRowData

and the same line setRowData

var pos = $t.p._index[rowid];


can be fixed at the next

var id = $.jgrid.stripPref($t.p.idPrefix, rowid), pos = $t.p._index[id];


Inside I addRowData

suggest including the line

var id = rowid; // pure id without prefix


before the line

rowid  = t.p.idPrefix + rowid;


of addRowData

. Other towing lines addRowData

lcdata[] = rowid;
t.p._index[rowid] =;


should be changed to

lcdata[] = id;
t.p._index[id] =;


where the unprefixed id will be used.

The modified demo code, which uses the fixed version of jquery.jqGrid.src.js , you can test here .

I will post a bug to trirand later to inform the jqGrid developer. I hope that a bug fix will be included in the main jqGrid code soon.

Also, I recommend using the method $.jgrid.stripPref

to remove prefixes from strings. For example, the function

//general delete selected 
function deleteSelectedAnimal(list, grid, prefix)
    var sel = grid.jqGrid('getGridParam', 'selrow');
    if (sel.length)
        var gridrow = sel;  

        //get the unprefixed model id
        var modelid = gridrow; 
        if (prefix.length !== 0)
           modelid = modelid.split(prefix)[1];     
        // make it a numeric
        modelid = Number(modelid);

        //delete the row in the collection  
        list = RemoveAnimal(list, modelid);

        //delete the row in the grid
        grid.jqGrid('delRowData', gridrow);


from your demo can be rewritten to the following

//general delete selected
function deleteSelectedAnimal(list, grid)
    var sel = grid.jqGrid('getGridParam', 'selrow'),
        gridPrefix = grid.jqGrid('getGridParam', 'idPrefix');
    if (sel !== null)
        //delete the row in the collection
        // ??? the gogs list will be not modified in the way !!!
        list = RemoveAnimal(list, $.jgrid.stripPref(gridPrefix, sel));

        //delete the row in the grid
        grid.jqGrid('delRowData', sel);


I'm not sure if the row list = RemoveAnimal(list, $.jgrid.stripPref(gridPrefix, sel));

or function RemoveAnimal

does what you want, but this is not a jqGrid related issue.

One more small note about your code. You are already using the objects that you add to the grid, property id

. This is the same name as defined in . In case the data from the property id

will be used as an attribute id

for the grid lines ( <tr>

). The local parameter will be data

saved in id

addition to other properties that are built from the properties of the name

elements colModel

. So I see no point in defining a hidden column

{ key: true, name: 'id', align: 'left', hidden: true }


As you can see in the demo, everything else works exactly the same as before if you remove the column id

from the grids you are using.

UPDATED 3 . As promised, I've submitted a relevant bug report here .



All Articles