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

Orthodontia

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

Filch

sir could you please advice how to get the count of red cells for each row in a column – Orthodontia

@davidb: If you use datatype: "local" then you can calculate the number of red cells in a simple for loop before creating jqGrid. You can use footerrow: true, userDataOnFooter: true and userData parameter to create the footer in jqGrid and to place required information in the footer. See jsfiddle.net/OlegKi/h8Lzgh7d/31 – Filch

thank you very much sir for helping with the detailed information which are very precious – Orthodontia