Here is the screen cap

I have a grid which works great until I add key: true property to my ID row, then the grid breaks.  Any idea what is happening?

jQuery 1.4.2

jQuery ui 1.8.5

Here is the screen cap

Script:

<script language="javascript">

$(document).ready(function(){

var lastsel2;

var grid = $("#grid");

var lastPage = 1;

start = 1;

grid.jqGrid({

url:'ajaxRequest.cfm?type=firmJSON&page=' + start,

page: 1,

datatype: 'json',

mtype: 'POST',

postData:{start: start},

colNames:['ID','Name','Address','City','State','Zip Code','Contact','Phone','Email','Web Site','HQ','Parent','Status'],

colModel :[

{name:"ID", jsonmap:"FIRMID", width: 20, editable: false, key: true },

{name:"Name", jsonmap:"FIRM_NAME", width: 100, editable: true },

{name:"Address", jsonmap:"FIRM_ADDRESS_1", width: 100, editable: true },

{name:"City", jsonmap:"FIRM_CITY", width: 100, editable: true },

{name:"State", jsonmap:"STATE_ABBR", width: 50, editable: true, edittype:'select', editoptions: {value:"#states#"}},

{name:"Zip", jsonmap:"FIRM_POSTALCODE", width: 60, editable: true },

{name:"ContactName", jsonmap:"CONTACT_NAME", width: 100, editable: true },

{name:"Phone", jsonmap:"CONTACT_PHONE", width: 100, editable: true },

{name:"Email", jsonmap:"CONTACT_EMAIL", width: 100, editable: true },

{name:"WebSite", jsonmap:"FIRM_WEBSITE", width: 100, editable: true },

{name:"HQ", jsonmap:"HQNAME", width: 30, editable: true, edittype:'select', editoptions: {value:"No:No;Yes:Yes"}},

{name:"Parent", jsonmap:"PARENTNAME", width: 100, editable: true , edittype:'select', editoptions: {value:"#firms#"}},

{name:"Status", jsonmap:"STATUSNAME", width: 130, editable: true, edittype:'select', editoptions: {value:"#status#"}}

],

onSelectRow: function(id){

if(id && id!==lastsel2){

$('#grid').restoreRow(lastsel2);

$('#grid').editRow(id,true);

lastsel2=id;

}

},

onPaging: function(pEvent){

if (pEvent == 'next' ){

start = start + 1;

}

if (pEvent == 'prev' ){

start = start – 1;

}

if (pEvent == 'first' ){

start = 1;

}

if (pEvent == 'last' ){

start = lastPage;

}

$("#grid").setGridParam({url:'ajaxRequest.cfm?type=firmJSON&page=' + start});

},

editurl: "ajaxRequest.cfm?type=firmEdit",

caption: 'Firms',

jsonReader : {

root: "firms",

repeatitems: false,

records: "records",

total: "total"

},

viewrecords: true,

rowNum: 20,

pager: '#pager',

height: '450px',

pagerpos: 'left',

recordpos: 'center'

});

});

</script>

<table id="grid"></table>

<div id="pager"></div>