jqGrid need a field editable on Add dialog but not Edit dialog - jqgrid

Question

I'm attempting to use jqGrid in my ASP.Net MVC application and have a requirement that some columns arre editable in the Add dialog but not the Edit dialog. Apparently the way to do this is to use the beforeShowForm javascript event and set the properties on the particular input field.
So far I can't manage to get the beforeShowForm event to fire. Below is an example I found on another SO question but so far I haven't managed to get it working. Is there some trick I'm missing? I'm using the latest 3.8 version of jqGrid.
Controller:
[Authorize]
public ActionResult Index()
{
var gridModel = new MyGridModel();
SetUpGrid(gridModel.MyGrid);
return View(gridModel);
}
private void SetUpGrid(JQGrid grid)
{
grid.DataUrl = Url.Action("GridDataRequested");
grid.EditUrl = Url.Action("EditRows");
grid.ToolBarSettings.ShowSearchToolBar = false;
grid.ToolBarSettings.ShowEditButton = true;
grid.ToolBarSettings.ShowAddButton = true;
grid.ToolBarSettings.ShowDeleteButton = true;
grid.ToolBarSettings.ShowRefreshButton = true;
grid.EditDialogSettings.CloseAfterEditing = true;
grid.AddDialogSettings.CloseAfterAdding = true;
grid.EditDialogSettings.Modal = false;
grid.EditDialogSettings.Width = 500;
grid.EditDialogSettings.Height = 300;
grid.ClientSideEvents.GridInitialized = "initGrid";
}
Model:
public class MyGridModel
{
public JQGrid MyGrid { get; set; }
public MyGridModel()
{
MyGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn { DataField = "id",
PrimaryKey = true,
Visible = false,
Editable = false },
new JQGridColumn { DataField = "username",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100},
new JQGridColumn { DataField = "domain",
Editable = true,
EditFieldAttributes = new List<JQGridEditFieldAttribute>()
{
new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"},
new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"}
},
Width = 100}
}
}
}
}
View:
function initGrid() {
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(frm) {
alert("beforeShowForm edit");
}
},
{ // add options
beforeShowForm: function(frm) {
alert("beforeShowForm add");
}
},
{ }, // del options
{ } // search options
);
}
<div>
<%= Html.Trirand().JQGrid(Model.MyGrid, "myGrid") %>
</div>

Answer 1

It seems to me that the answer to your question you will find here and here (look at the example also).
UPDATED: I don't know commertial version of jqGrid. If you don't solve your prblem you should post your question better in the forum http://www.trirand.net/forum/default.aspx.
If I understand your code correct you can try to remove definition of the attributes readonly and disabled (JQGridEditFieldAttribute) from the EditFieldAttributes. Instead of that you can try to do following
If you want to show readonly fields 'username' and 'domain' in the edit dialog you can do following
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
});
or without the usage of recreateForm: true option:
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ // edit options
beforeShowForm: function(form) {
$('#username',form).attr('readonly','readonly');
$('#domain',form).attr('readonly','readonly');
}
},
{ // add options
beforeShowForm: function(frm) {
$('#username',form).removeAttr('readonly');
$('#domain',form).removeAttr('readonly');
}
});
If you want not to show the fields 'username' and 'domain' in the edit dialog you can do
jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager',
{ }, //options
{ recreateForm: true, // edit options
beforeShowForm: function(form) {
$('#username',form).hide();
$('#domain',form).hide();
}
});
It should work in the free version of the jqGrd, but because you use SetUpGrid which setup ome settings of jqGrid navigation bar (like grid.ToolBarSettings.ShowEditButton = true). You use also
grid.ClientSideEvents.GridInitialized = "initGrid"
I am not sure what you can do inside of initGrid function. Probably you should define some additional callbackes instead of calling of jQuery("#myGrid").jqGrid('navGrid', ...);. Look at http://www.trirand.net/documentation/aspnet/_2s20v9uux.htm and http://www.trirand.com/blog/phpjqgrid/docs/jqGrid/jqGridRender.html#methodsetNavOptions

Answer 2

I ended up buying the paid for version of jqGrid - the time I save by being able to use a clean .Net object model compared to javascript will pay for itself in no time.
The answer to this question direct from Trirand support is.
You can use the client-side events AfterEditDialogShown and AfterAddDialogShown to disable/enable edit fields for both dialogs. The field for editing/adding will have the same ID is the DataField (case-sensitive). Example:
Model:
JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields";
JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields";
View:
<script type="text/javascript">
function disableFields() {
//jQuery("#fieldname").attr("disabled", "disabled");
$("#Source").attr("disabled", "true");
$("#ProgramName").attr("disabled", "true");
$("#Division").attr("disabled", "true");
$("#Medium").attr("disabled", "true");
$("#content").attr("disabled", "true");
}
function enableFields() {
$("#Source").attr("disabled", "false");
$("#ProgramName").attr("disabled", "false");
$("#Division").attr("disabled", "false");
$("#Medium").attr("disabled", "false");
$("#content").attr("disabled", "false");
}
</script>

Answer 3

Current Solution: jqGrid 4.5.4 - jQuery Grid
After this lines at editGridRow (line 7447)
if (rowid === "new") {
rowid = "_empty";
frmoper = "add";
p.caption=rp_ge[$t.p.id].addCaption;
} else {
p.caption=rp_ge[$t.p.id].editCaption;
frmoper = "edit";
}
I put this modification
$t.p.custom_frmoper = frmoper;
Then I can decide what to do whith elements at Popup EDIT and Popup ADD
$.ajax($.extend({
url: $.isFunction(options.dataUrl) ? options.dataUrl.call($t, rowid, vl, String(options.name)) : options.dataUrl,
type : "GET",
dataType: "html",
data: $.isFunction(postData) ? postData.call($t, rowid, vl, String(options.name)) : postData,
context: {elem:elem, options:options, vl:vl},
success: function(data){
var ovm = [], elem = this.elem, vl = this.vl,
options = $.extend({},this.options),
msl = options.multiple===true,
a = $.isFunction(options.buildSelect) ? options.buildSelect.call($t,data) : data;
if(typeof a === 'string') {
a = $( $.trim( a ) ).html();
}
if(a) {
$(elem).append(a);
setAttributes(elem, options, postData ? ['postData'] : undefined);
// CUSTOM CODE
$.each($t.p.colModel, function (i, current) {
if (current.not_editable) {
if ($t.p.custom_frmoper == 'edit') {
$("#" + current.name).attr('readonly', 'readonly');
$("#" + current.name).attr('disabled', 'disabled');
}
else {
$("#" + current.name).removeAttr('readonly');
$("#" + current.name).removeAttr('disabled');
}
}
});
I also added a custom not_editable attribute to the column model to decide that a specific column is editable when ADDING and readonly when MODIFIYING
{ name: 'ID', index: 'ID', not_editable: true }
I hope it helps. I created this modification because SELECT elements does not work with the current solutions in this thread.