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

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>