mvc3 jqgrid readonly fields on edit/addform - asp.net-mvc-3

Question

I have a jqGrid using Form Editing. I would like Some of the fields to be Readonly in 'Edit' mode but not in 'Add' mode. I have tried some of the suggestions I have found elsewhere to solve this(see example below), but still cannot get it to work!
If anyone can help I shall be most grateful!
In The below grid I am attempting to set 'LogonName' to ReadOnly in 'edit' mode, and NOT in 'Add' mode.
$('#jpgCustomers').jqGrid({
url: '#Url.Action("Customers")',
datatype: 'json',
mtype: 'POST',
colNames: ['Name', 'FullName', 'Description'],
colModel: [
{ name: 'LogonName', index: 'LogonName', align: 'left', width:80, editable:true, search:true, stype:'text',editrules:{required:true}},
{ name: 'FullName', index: 'FullName', align: 'left',width: 200, editable:true, search:true, stype:'text',editrules:{required:true}},
{ name: 'Description', index: 'Description', align: 'left', width: 300, editable:true, search:true, stype:'text'}
]
//..
$("#jpgCustomers").jqGrid('navGrid', '#jpgpCustomers',
{ add: true, del: true, edit: true, search: false},
//edit form
{ width: '500',
editCaption: 'Edit Customer',
url: '#Url.Action("EditCustomer")',
reloadAfterSubmit: true,
closeAfterEdit: true,
//always start from a new form
recreateForm: true,
beforeShowForm: function(form) {
//center the edit dialog on screen
var dlgDiv = $("#editmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
$("#jpgCustomers").jqGrid('setColProp','LogonName',{editoptions: {readonly:'readonly'}});
}
},
//Add form
{ width: '500',
addCaption: 'Add Customer',
url: '#Url.Action("CreateCustomer")',
reloadAfterSubmit: true,
closeAfterEdit: true,
beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
$("#jpgCustomers").jqGrid('setColProp','LogonName',{editoptions: {readonly:false}});
}
},
//Delete form
{ width: '250',
url: '#Url.Action("DeleteCustomer")',
beforeShowForm: function(form) {
//center the delete dialog on screen
var dlgDiv = $("#delmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
//change the Delete confirmation message
var sel_id = $("#jpgCustomers").jqGrid('getGridParam','selrow')
$("td.delmsg", form).html("Delete User <b>" + $("#jpgCustomers").jqGrid('getCell', sel_id,'LogonName') + "</b>?");
}
}
);

Answer 1

OK, so after Hours of testing and retesting, and trying various things, I have stumbled on the solution!
I have made a couple of changes to the above code, and not Entirely sure which has been the overriding answer to the problem but here is what I did:
1) Moved The call to 'SetColProp' from the beforeShowForm into the beforeInitData function
2) put beforeInitData before beforeShowForm - I don;t think This actually makes any difference, but it works, so I'm leaving it there!
3) Included a recreateForm:true in The Add form section (I already had one in the edit section)
I think point 1 and 3 made the difference, but I couldn;'t tell you why!
Heres the working navGrid section altered from The Question:
$("#jpgCustomers").jqGrid('navGrid', '#jpgpCustomers',
{ add: true, del: true, edit: true, search: false},
//edit form
{ width: '500',
editCaption: 'Edit Customer',
url: '#Url.Action("EditCustomer")',
reloadAfterSubmit: true,
closeAfterEdit: true,
//always start from a new form
recreateForm: true,
beforeInitData: function(form) {
$("#jpgCustomers").jqGrid('setColProp','LogonName',{editoptions: {readonly:'readonly'}});
},
beforeShowForm: function(form) {
//center the edit dialog on screen
var dlgDiv = $("#editmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
}
},
//Add form
{ width: '500',
addCaption: 'Add Customer',
url: '#Url.Action("CreateCustomer")',
reloadAfterSubmit: true,
closeAfterEdit: true,
recreateForm: true,
beforeInitData: function(form) {
$("#jpgCustomers").jqGrid('setColProp','LogonName',{editoptions: {readonly:false}});
},
beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
}
},
//Delete form
{ width: '250',
url: '#Url.Action("DeleteCustomer")',
beforeShowForm: function(form) {
//center the delete dialog on screen
var dlgDiv = $("#delmod" + jpgCustomers.id);
CenterDialog(dlgDiv);
//change the Delete confirmation message
var sel_id = $("#jpgCustomers").jqGrid('getGridParam','selrow')
$("td.delmsg", form).html("Delete User <b>" + $("#jpgCustomers").jqGrid('getCell', sel_id,'LogonName') + "</b>?");
}
}
);