I just want to expand on queen3's suggestion, applying the following does the trick:
editoptions: {
dataInit: function(element) {
$(element).attr("readonly", "readonly");
}
}
Scenario #1:
Solution:
colModel:[
{ name:'providerUserId',
index:'providerUserId',
width:100,editable:true,
editrules:{required:true},
editoptions:{
dataInit: function(element) {
jq(element).attr("readonly", "readonly");
}
}
},
],
The providerUserId is visible in the grid and visible when editing the form. But you cannot edit the contents.
Scenario #2:
Solution:
colModel:[
{name:'providerUserId',
index:'providerUserId',
width:100,editable:true,
editrules:{
required:true,
edithidden:true
},
hidden:true,
editoptions:{
dataInit: function(element) {
jq(element).attr("readonly", "readonly");
}
}
},
]
Notice in both instances I'm using jq to reference jquery, instead of the usual $. In my HTML I have the following script to modify the variable used by jQuery:
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>