jqgrid inline editing: dynamically set column editable properly of another column

Question

When I change the value of a particular column during inline edit, I want to change the editable property value of another column of the same row dynamically. Below is a part of my code:

{ name: "admin", width:250, editable:<?php echo $owner; ?>, edittype:"custom", editoptions: {
            custom_element: myelem,
            custom_value:myvalue,
            dataEvents: [{
                    type: 'change',
                    fn: function (e) {
                        var $this = $(e.target), $td, rowid;
                        var radSel = $(e.target).val(); //alert(radSel);
                        if(radSel == "No"){
                            if ($this.hasClass("FormElement")) {
                                $("#request").prop("editable", true);
                            } else {
                                //alert("you are here!!");
                                var row = $this.closest('tr.jqgrow');
                                var rowId = row.attr('id'); //alert(rowId);
                                $("#" + rowId + '_request').prop("editable", true);
                            }
                        }
                     }
            }]

    }},
{ name: "request", width: 100},
......

function myelem (value, options) {
var radio1 = document.createElement('input');
radio1.id = 'radY';
radio1.type = 'radio';
radio1.name = 'appr';
radio1.value = 'Yes';
if(value.match(/^Yes.*/)){ radio1.checked = true; }

var radio2 = document.createElement('input');
radio2.id = 'radN';
radio2.type = 'radio';
radio2.name = 'appr';
radio2.value = 'No';
if(value.match(/^No.*/)){ radio2.checked = true; }

var label1 = document.createElement('label');
label1.setAttribute('for', radio1.id);
label1.innerHTML = 'Yes';

var label2 = document.createElement('label');
label2.setAttribute('for', radio2.id);
label2.innerHTML = 'No';

var container = document.createElement('div');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);

return container;
}

function myvalue(elem, operation, value) {
    if(document.getElementById('radY').checked) {return "Yes";}
    else if(document.getElementById('radN').checked) {return "No";}
    else {return ""; }
} 

When i change the radio button to "No", it does enter into the if loop (under dataEvents) but the editable property on the 'request' column is not set to true dynamically. Any help much appreciated. thanks.

Answer 1

The editable property will be used by jqGrid before starting editing. If you want to prevent editing dynamically you have to set disable or readonly property/attribute on the corresponding existing editing field instead of setting editable property.

Moreover you seems to assign fix id attributes ( 'radN' , 'radY' ) for custom editing field. It's dangerous because you can have id duplicates. Inline editing allows you to editing more as one row at the same time. In the case two custom editing elements with the same ids will be created and you will have problems. I recommend you additionally to set <input> inside of <label> . In the case you will don't need any id or for attributes. Try

<label><input type="radio" name="appr" checked="checked" value="Yes"/>Yes</label>
&nbsp;
<label><input type="radio" name="appr" value="No"/>No</label>

One can check the radio button by clicking on the label.