jQuery Grid Plugin - jqGrid

HI,

i have a grid that is populated by JSON data with the last column of the grid (ProjectID) using a select for editing. The select correctly displays the display value in the edit form, however on the grid the id value is displayed.

I have tried setting formatter:'select' on the column but this causes blank values to be displayed rather than the ids. Is there something else I need to do to display the text value in the grid? I am using buildSelect on the column, is this casuing an issue? I have provided my jqgrid data below and have confirmed that valid json data is returned for both the grid and the select.

Any help would be much appreciated. Thanks

$("#list").jqGrid({

url:'HR_GridTemplate_Datahandler.asp?status=GetSkills',

datatype: "json",

colNames:['Id','Skill Name', 'Skill Description','Status','Completion Plus Years','Reminder','Project'],

colModel:[

{name:'Id', index:'Id', key:true, sorttype:'int', hidden: true, editable:false},

{name:'SkillName', index:'SkillName', width:350, editable:true,editoptions:{size:"100",maxlength:"150"}},

{name:'SkillDescription', index:'SkillDescription', width:350, align:'left', editable:true,editoptions:{size:"100",maxlength:"300"}},

{name:'active', index:'active', align:'left', editable:true,edittype:"select", editoptions:{value:"Active:Active;Archive:Archive"}},

{name:'CompletionPlusYears', index:'CompletionPlusYears', editable:true,edittype:"select", editoptions:{value:":;0:0;1:1;1.5:1.5;2:2;2.5:2.5;3:3;3.5:3.5;4:4;4.5:4.5;5:5;6:6;7:7;8:8;9:9;10:10"}},

{name:'Reminder', index:'Reminder', align:'right', editable:true,edittype:"select", editoptions:{value:"Yes:Yes;No:No"}},

{name:'ProjectID', edittype:'select', formatter:'select',

editoptions: { dataUrl:"HR_GridTemplate_Datahandler.asp?status=GetProjects",

buildSelect: function(data)

{

var response = jQuery.parseJSON(data);

var s = '<select>';

jQuery.each(response, function(i, item) {

s += '<option value="'+response[i].id+'">'+response[i].name+'</option>';

});

return s + "</select>";

}

}

}

],

height:'auto',

width: 'auto',

pager: '#skillpager',

rowNum:25,

rowList:[10,25,50,100,200,500],

sortname: 'SkillName',

sortorder: "desc",

// Checkbox to multi select

multiselect: true,

loadonce: true,

jsonReader: {

repeatitems: false,

root: function (obj) { return obj; },

page: function (obj) { return $("#list").jqGrid('getGridParam', 'page'); },

total: function (obj) { return Math.ceil(obj.length / $("#list").jqGrid('getGridParam', 'rowNum')); },

records: function (obj) { return obj.length; }

},

viewrecords: true,

caption: "Skills Grid",

ignoreCase:true,

ondblClickRow: function(rowid) {

jQuery(this).jqGrid('editGridRow', rowid,

{recreateForm:true,closeAfterEdit:true,

closeOnEscape:true,reloadAfterSubmit:false,width:700,top:200,left:200});

}

});