Dynamically change a column's editable propert

Question

I am using form editing. I would like to disable certain fields in my add and edit forms based on the selection from a drop down box. What event is best to use to trigger this? I have attempted using dataEvents:

{    name:'type_cd', 
     edittype:'select', 
     editoptions:{
        dataUrl:'functions.php',
            dataEvents:[{
                type:'change',
                fn: function(e){
                    $(this).setColProp('cntrct_id',{
                         editoptions:{editable:false}
                    });
            } 
       }]                        
    } 
},

This has no visible effect on my form fields, but I know that it's being reached because I can get an alert message from it if I put one in.

EDIT

If I submit the form, the next time I open it, the column that was set to editable:false will not appear. This is a step in the right direction, BUT I want it to immediately be uneditable. Really, I would like it to be visible, but disabled (i.e. disabled:true)

Answer 1

@Oleg: This is working(could get the alert messages) but its not disabling the field. Should the form field require any special values?

Answer 2

First of all dataEvents allows you to register callbacks on elements of edit elements. Inside of callbacks this will be initialized to the DOM element which will be bound. So $(this) inside of change handler it will be wrapper on <select> element and not on the grid. The usage of $(this).setColProp will be incorrect.

To disable some input field in Add/Edit form you can use the fact that all input elements get the same id like the value of name property on the corresponding column in colModel. So if you need to disable input of cntrct_id you can set disabled property to true on the element with id="cntrct_id"

{
     name: 'type_cd', 
     edittype: 'select', 
     editoptions: {
        dataUrl: 'functions.php',
        dataEvents: [{
            type: 'change',
            fn: function (e) {
                // disable input/select field for column 'cntrct_id'
                // in the edit form
                $("#cntrct_id").prop("disabled", true);
            } 
       }]                        
    } 
}

It's important to understand that editoptions will be used for any existing editing modes (form editing, inline editing and cell editing). If you want to write the code of dataEvents which supports all editing modes you have to detect editing mode and use a little other ids of editing fields. The code (not tested) can be about as below

{
     name: 'type_cd', 
     edittype: 'select', 
     editoptions: {
        dataUrl: 'functions.php',
        dataEvents: [{
            type: 'change',
            fn: function (e) {
                var $this = $(e.target), $td, rowid;
                // disable input/select field for column 'cntrct_id'
                if ($this.hasClass("FormElement")) {
                    // form editing
                    $("#cntrct_id").prop("disabled", true);
                } else {
                    $td = $this.closest("td");
                    if ($td.hasClass("edit-cell") {
                        // cell editing
                        // we don't need to disable $("#cntrct_id")
                        // because ONLY ONE CELL are edited in cell editing mode
                    } else {
                        // inline editing
                        rowid = $td.closest("tr.jqgrow").attr("id");
                        if (rowid) {
                            $("#" + $.jgrid.jqID(rowid) + "_cntrct_id")
                                .prop("disabled", true);
                        }
                    }
                }
            } 
       }]                        
    } 
}

The last remark. If you still use old version of jQuery (before jQuery 1.6) which don't support prop method you have to use attr instead.