jqGrid idprefix bug

Also shows usage of idPrefix which is needed for multiple grids on the page to keep ids unique

by tirams

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.multiselect.css">
<div class="List">
    <table id="dogsList" class="List"></table> 
    <button id='dogAddAtEnd'>Add at End</button>
    <button id='dogDel'>Delete Selected</button>   
    <button id='dogsReload'>Reload</button>
</div>

<div  class="List">
<table id="catsList"></table>
    <button id='catAddAtEnd'>Add at End</button>
    <button id='catDel'>Delete Selected</button>        
    <button id='catsReload'>Reload</button>
</div>

CSS

.List
{
  margin-bottom : 20px;
}

JavaScript

/*
Steps to reproduce jqGrid issue with idPrefix local data

in either dog or cat table 
1) click on "Add at End" button 
2) click on "Add at End" button again to add 2 items
3) click on the first newly added row to select it
4) click on the "Delete Selected" button to remove the row
5) click on the "Reload" button 
6) click on the 2nd of the added rows from step 2 above to select it
7) click on "Delete selected" button to remove it
8) click on "Reload" button and the row you deleted comes back to display.


Now edit the code below thia comment to turn off use of idPrefix change true to false so it reads.
  usePrefix = false

press the JsFiddle Run button to rerun

the do the do the exact same steps 1- 8 above with an idPrefix

Now the deleted row does not reappear.
*/

/*********
// set usePrefix  to true to use prefixes in the tablerows false to not
 *********/
var usePrefix = true;    


/****************** DATA STUFF *********************************/
// Create the models & collections
var dogDefaults = {
        name: "Spot",
        available: true,   
        breed: "Mutt"
    };

var dogs = [
        {
        id: _.uniqueId(),
        name: "Jane",
        available: true,        
        breed: "Great Dane"},
        {
        id: _.uniqueId(),
        name: "Rocky",
        available: true,         
        breed: "Golden Retriver"},
        {
        id: _.uniqueId(),
        name: "Buddy",
        available: true,         
        breed: "Lab"}
    ];

var catDefaults = {
        name: "Tabby",
        available: true,                       
        breed: "Kitty"
    };

var cats = [
        {
        id: _.uniqueId(),
        name: "Tiger",
        available: true,
        breed: "Persian"},
        {
        id: _.uniqueId(),
        name: "Max",
        available: true,    
        breed: "Abyssinian"},
        {
        id: _.uniqueId(),
        name: "Felix",
        available: true,     
        breed: "Coon"},
        {
        id:...