Disable JQGrid row based on cell value using JQuery

Question

I am trying to disable a row in my JQGrid. And By using HtmlHelper class the JQGrid is done for dynamic load. An example is given below as shown that

  public static MvcHtmlString CreateSubGrid<T>(this HtmlHelper helper,      
                                                    GridViewModel<T> model)
 {

     htmlBuilder.AppendFormat(@"<table id=""{0}"" class=""scroll""    
       cellpadding=""0"" cellspacing=""0""></table>", model.Id);
     htmlBuilder.AppendFormat(@"<div id=""{0}Pager"" class=""scroll"" 
                         style=""text-align:center;""></div>", model.Id);

     htmlBuilder.AppendFormat(@"<script type=""text/javascript"">");
    .....
    .....

And My view model contains seven columns, In which the 7th column name is "IsClosed". If this column contains Yes, or any value, then the entire row should be non-editable. And I don not know how doing it. So anybody help me please.

My View Model is following,

public class OBRAccountViewModel 
{
    [JQGridColumn(IsHidden = true)]
    public virtual long OBRBankSeq { get; set; }

    [JQGridColumn(IsHidden = true)]
    public virtual long OBRSeq { get; set; }

    [JQGridColumn(Name = "Overseas Account No", Index = "{0}", Width = 145, IsSearch = true)]
    public virtual string OverSeasAccountNo { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.BeneficiaryBank, Index = "{0}", Width = 130, IsSearch = true)]
    public virtual string BeneficiaryBank { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.CurrencyCode, Index = "{0}", Width = 130, IsSearch = true)]
    public virtual string CurrencyCode { get; set; }     

    [JQGridColumn(Name = Constants.DisplayName.AccountClosureDate, Index = "{0}", Width = 130, IsSearch = true,IsEditable=true)]
    public virtual DateTime? ClosureDate { get; set; }

    [JQGridColumn(Name = Constants.DisplayName.AccountClosureRemarks, Index = "{0}", Width = 250, IsSearch = true, IsEditable = true)]
    public virtual string ClosureRemarks { get; set; }

    [JQGridColumn(Name = "IsClosed", Index = "{0}", Width = 250, IsSearch = true, IsEditable = true,IsHidden=false)]
    public virtual string IsClosed { get; set; }    

}

Answer 1

I'd recommend you to use rowattr to add classes "ui-state-disabled ui-jqgrid-disablePointerEvents" if IsClosed contains "Yes". See the old answer where I described the approach. Don't forget to use gridview: true option to have additional performance advantage. Look at the

gridview: true,
rowattr: function (rd) {
    if (rd.IsClosed === "Yes") { // verify that the testing is correct in your case
        return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
    }
}

If you use the latest version of free jqGrid then ui.jqgrid.css contains the CSS rule

.ui-jqgrid-disablePointerEvents {
    pointer-events: none;
}

If you uses other fork on an older version of jqGrid then you should add the above role manually.

By the way you can remove from your code the part with class=""scroll"" cellpadding=""0"" cellspacing=""0"" and class=""scroll"" style=""text-align:center;"". The setting are deprecated since many years. jqGrid don't use the class scroll internally and just remove it if it is exist.