How to prevent selecting a dropdown based on cell value condition in Jqgrid

Question

i am trying to highlight the cells in Red whichever values not matching with my predefined values and 1. i want to get the count of red cells in each row in the column Error_cells_Count,now in the demo page i have manually entered the count 2. and i want to prevent user from selecting the dropdown in status column if the row has any red cells. i have managed to highlight the cells. please help to get the red cells count in Error_cells_Count column and prevent user from selecting dropdown. this is my demo page http://jsfiddle.net/h8Lzgh7d/27/ Jqgrid version version is 4.14.0 and also kindly suggest if any possibilities to have predefined dictionary and correct the red cells automatically by replacing the red cell values with dictionary value

Answer 1

First of all I'd recommend you to use cellattr to set any CSS properties on the cell. Seconds you can use editable defined as function to allow editing the cell depend on some your custom criteria (see the wiki article for more details).

The fixed demo could be the following https://jsfiddle.net/OlegKi/h8Lzgh7d/30/. It uses the following code:

var hilightcolorcell=["PURPLE","PINK","GREEN"];
var hilightcahractercell=["Character 1","Character 2","Character 3"];

jQuery("#rowed5").jqGrid({
    datatype: "local",
    shrinkToFit: false,
    data: mydata,
    height: 320,
    autowidth:true,
    colNames:['RowID','Error_Cells_Count','status','note','color_name','character_name','Variant ID'],
    colModel: [ 
        {name:'id', width:55, sorttype:"int",align:"center",frozen:true},
        {name:'Error_Cells_Count', width:100, sorttype:"int",
            align:"center",frozen:true,
            cellattr: function (rowid, cellValue) {
                if (cellValue != null) {
                    var value = parseInt(cellValue, 10);
                    return " class='" +
                        (value > 0 ? "redcells" : "greencells") +
                        "'";
                }
            }},
        {name:'status', width:100,
            editable: function (options) {
                var item = $(this).jqGrid("getLocalRow", options.rowid);
                return (item.Error_Cells_Count == null || item.Error_Cells_Count <= 0) &&
                    $.inArray(item.color_name, hilightcolorcell) >= 0 &&
                    $.inArray(item.character_name, hilightcahractercell) >= 0;
            },
            edittype:"select",editoptions:{value:"Approve:Approve"}},
        {name:'note',width:100, sortable:false,editable: true,
            edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
        {name:'color_name',
            cellattr: function (rowid, cellValue) {
                if ($.inArray(cellValue, hilightcolorcell) < 0) {
                    return " class='redcells'";
                }
            }},
        {name:'character_name',
            cellattr: function (rowid, cellValue) {
                if ($.inArray(cellValue, hilightcahractercell) < 0) {
                    return " class='redcells'";
                }
            }},
        {name:'v_id'}
    ],
    cmTemplate: { width:110 }, // define default properties for colModel
    editurl: "functions.php",
    cellEdit: true,
    cellsubmit: 'remote',
    cellurl: 'functions.php',
    searching: {
        stringResult: true,
        searchOnEnter: false,
        defaultSearch : "cn"
    }
}).jqGrid("setFrozenColumns")
    .jqGrid("filterToolbar");