JQGrid readonly and edit option

Question

Can anyone tell me how I can make inline editing for one particular column false, but when you edit the particular row that colum is editable for example -

{name:'product_image', index:'ProductId', width:25, align:'right', editable:true, edittype:'file'} ,

This works perfectly, I can edit this by selecting the row and clicking the edit button< I will then be presented with the edit dialog, I can then change the value of said column. I want to make the column in the grid view readonly however, I have found the following -

{name:'product_image', index:'ProductId', width:25, align:'right', editable:false, edittype:'file',editoptions:{readonly: false}},

However this just makes the column read only and in edit mode I cannot change the value.

$("#list").jqGrid({
    url:'products.php?storeId=<?php echo $_SESSION["valid_store"]; ?>',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Product Id','Product Description','Department','Category','Price','Sale Price','Quantity','Extended Description','Web Item','Image'],
    colModel :[ 
      {name:'ProductId', index:'ProductId', width:20}, 
      {name:'product_name', index:'product_name', width:50, editable:true, edittype:'text', search:true, stype:'text'},
      {name:'DepartmentName', index:'DepartmentName', width:40,sortable: false, editable: true, edittype: "select"},
      {name:'CategoryName', index:'CategoryName', width:40,sortable:false, editable:true, edittype:'select'}, 
      {name:'price', index:'price', width:15, align:'right', editable:true, edittype:'text'}, 
      {name:'sale_price', index:'sale_price', width:15, align:'right', editable:true, edittype:'text'}, 
      {name:'product_qty', index:'product_qty', width:10, align:'right', editable:<?php if($edit_qty == 1){echo "true";}else{echo "false";} ?>, edittype:'text'}, 
      {name:'product_description', index:'product_description', width:100, sortable:false, editable:true, edittype:'text'},
      {name:'web_item', index:'web_item', width:15,sortable:false, editable:true, edittype:'select',editoptions:{value:{1:'True',0:'False'}}}, 
      {name:'product_image', index:'ProductId', width:25, align:'right', edittype:'file', editable: false},
    ],
    loadComplete:function(){
        $("#list").setColProp('DepartmentName', { editoptions: { value: departments} });
        $("#list").setColProp('CategoryName', { editoptions: { value: categories} });
    },
    pager: '#pager',
    rowNum:40,
    rowList:[10,20,30,40,50,60,70,80,90,100],
    sortname: 'ProductId',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Products',
    autowidth: true,
    height: tableHeight,
    cellEdit: true,
    loadtext: 'Loading Products...',
    cellurl: 'edit_product.php?storeId=<?php echo $_SESSION["valid_store"]; ?>',
    editurl: 'edit_product.php?storeId=<?php echo $_SESSION["valid_store"]; ?>',
  }).navGrid('#pager',
    {
        del: false,
        add: <?php if($add_products == 1){echo "true";}else{echo "false";}?>,
        edit: true,
        search: true
    },
    {jqModal:true,closeAfterEdit: false,recreateForm:true,onInitializeForm : function(formid){
        $(formid).attr('method','POST');
        $(formid).attr('action','');
        $(formid).attr('enctype','multipart/form-data');
        },
        beforeShowForm:function(form){
            $("#product_image", form).attr("disabled", "false");
        },

Thanks

Answer 1

If I understand your problem currently you can set readonly attribute on $("#product_image") field from the editing form inside of beforeShowForm callback. See the answer or this one for the corresponding code example.

UPDATED : From the code which you posted one can see that you use cell editing ( cellEdit: true ). The usage of cell editing together with other editing mode ( form editing or inline editing ) of jqGrid is not supported.

Probably the usage of cellEdit: true was by accident? In the case you should just remove the option to fix the problem.

If you do need to use cell editing you can add 'not-editable-cell' class to the 'product_image' column. You can use classes: "not-editable-cell" in the colModel or you can make it dynamically if required (see the demo from the answer ). The class will be used only by cell editing and will be ignored by form editing.

If you really require to use both cell editing and form editing you will have to call restoreCell or saveCell (see the documentation ) before starting of form editing (in beforeInitData for example). All parameters of the method you can save inside of the last called beforeEditCell callback.

The last remark to your code: it seems me very strange that you use index:'ProductId' for two columns: ProductId and product_image . Is it typing error probably?