jqGrid necesita un campo editable en el cuadro de diálogo Agregar pero no en el cuadro de diálogo Editar

Estoy intentando usar jqGrid en mi aplicación ASP.Net MVC y tengo el requisito de que algunas columnas se puedan editar en el cuadro de diálogo Agregar, pero no en el cuadro de diálogo Editar. Aparentemente, la forma de hacerlo es usar el evento javascript beforeShowForm y establecer las propiedades en el campo de entrada particular.

Hasta ahora no puedo lograr que el evento beforeShowForm se dispare. A continuación se muestra un ejemplo que encontré en otra pregunta de SO, pero hasta ahora no he logrado hacerlo funcionar. ¿Hay algún truco que me falta? Estoy usando la última versión 3.8 de jqGrid.

Controlador:

[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"; } 

Modelo:

 public class MyGridModel { public JQGrid MyGrid { get; set; } public MyGridModel() { MyGrid = new JQGrid { Columns = new List() { new JQGridColumn { DataField = "id", PrimaryKey = true, Visible = false, Editable = false }, new JQGridColumn { DataField = "username", Editable = true, EditFieldAttributes = new List() { new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"}, new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"} }, Width = 100}, new JQGridColumn { DataField = "domain", Editable = true, EditFieldAttributes = new List() { new JQGridEditFieldAttribute(){ Name = "readonly", Value = "true"}, new JQGridEditFieldAttribute(){ Name = "disabled", Value = "true"} }, Width = 100} } } } } 

Ver:

 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 ); } 

Me parece que la respuesta a su pregunta la encontrará aquí y aquí (mire el ejemplo también).

ACTUALIZADO : No conozco la versión commertial de jqGrid. Si no resuelve su problema, debe publicar su pregunta mejor en el foro http://www.trirand.net/forum/default.aspx .

Si entiendo tu código correcto, puedes intentar eliminar la definición de los atributos readonly y disabled ( JQGridEditFieldAttribute ) de EditFieldAttributes . En lugar de eso, puedes intentar hacer lo siguiente

Si desea mostrar los campos de solo lectura ‘nombre de usuario’ y ‘dominio’ en el cuadro de diálogo de edición, puede hacer lo siguiente

 jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager', { }, //options { recreateForm: true, // edit options beforeShowForm: function(form) { $('#username',form).attr('readonly','readonly'); $('#domain',form).attr('readonly','readonly'); } }); 

o sin el uso de la opción recreateForm: true :

 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'); } }); 

Si no desea mostrar los campos ‘nombre de usuario’ y ‘dominio’ en el cuadro de diálogo de edición, puede hacer

 jQuery("#myGrid").jqGrid('navGrid','#myGrid-pager', { }, //options { recreateForm: true, // edit options beforeShowForm: function(form) { $('#username',form).hide(); $('#domain',form).hide(); } }); 

Debería funcionar en la versión gratuita de jqGrd, pero debido a que usa SetUpGrid que configura algunos ajustes de la barra de navegación jqGrid (como grid.ToolBarSettings.ShowEditButton = true ). Usas también

 grid.ClientSideEvents.GridInitialized = "initGrid" 

No estoy seguro de qué puedes hacer dentro de la función de initGrid . Probablemente debería definir algunas devoluciones de llamada adicionales en lugar de llamar a jQuery("#myGrid").jqGrid('navGrid', ...); . Mire http://www.trirand.net/documentation/aspnet/_2s20v9uux.htm y http://www.trirand.com/blog/phpjqgrid/docs/jqGrid/jqGridRender.html#methodsetNavOptions

Terminé comprando la versión paga de jqGrid: el tiempo que ahorro al poder usar un modelo de objeto .NET limpio en comparación con javascript se amortizará en muy poco tiempo.

La respuesta a esta pregunta directa del soporte de Trirand es.

Puede usar los eventos del lado del cliente AfterEditDialogShown y AfterAddDialogShown para deshabilitar / habilitar los campos de edición para ambos cuadros de diálogo. El campo para editar / agregar tendrá la misma identificación es el campo de datos (sensible a mayúsculas y minúsculas). Ejemplo:

Modelo:

 JQGrid1.ClientSideEvents.AfterEditDialogShown="disableFields"; JQGrid1.ClientSideEvents.AfterEditDialogShown="enableFields"; 

Ver:

  

Solución actual: jqGrid 4.5.4 – jQuery Grid

Después de estas líneas en editGridRow (línea 7447)

 if (rowid === "new") { rowid = "_empty"; frmoper = "add"; p.caption=rp_ge[$tpid].addCaption; } else { p.caption=rp_ge[$tpid].editCaption; frmoper = "edit"; } 

Puse esta modificación

$tpcustom_frmoper = frmoper;

Entonces puedo decidir qué hacer con los elementos en Popup EDIT y 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($tpcolModel, function (i, current) { if (current.not_editable) { if ($tpcustom_frmoper == 'edit') { $("#" + current.name).attr('readonly', 'readonly'); $("#" + current.name).attr('disabled', 'disabled'); } else { $("#" + current.name).removeAttr('readonly'); $("#" + current.name).removeAttr('disabled'); } } }); 

También agregué un atributo personalizado no_editable al modelo de columna para decidir que una columna específica se puede editar al AGREGAR y solo leer al MODIFICAR

 { name: 'ID', index: 'ID', not_editable: true } 

Espero que ayude. Creé esta modificación porque los elementos SELECT no funcionan con las soluciones actuales en este hilo.