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>

Fancy

Answer 1

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>

Fancy

Answer 2

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

Fatigued

They are the examples I have been trying to get working but to no avail. In my example above do you know what 'navGrid' and '#myGrid-pager' refer to? – Fancy

@sipwiz: you should include the code (the more code the better) which defines your jqGrid in your question and describe which fields exactly you want allow be editable in Add dialog. – Fatigued

I've expaned my code sample. The username and domain fields are the ones I want to be able to use on the Add screen but not the Edit screen. – Fancy

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.

Nadaba