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

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

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?

edited May 23 '17 at 11:43

Community

1
1

answered Nov 09 '12 at 11:05

Oleg

220,925
34
403
798

My problem is the other way around, I want the normal grid column to b readonly and then the edit panel I am able to edit it. – Nov 09 '12 at 12:04
@RoryStandley: I don't understand what you mean. The "normal grid column" is **not in editing mode**. So you there are no field which you can make readonly. If you implemented some special scenario like custom formatter or something like that you need describe it. If you want to use *both* editing mode: inline editing and form editing you should describe exactly in which way you activate editing. Currently jqGrid provide *many ways* and the implementation can heavy depend on the way chosen. – Oleg Nov 09 '12 at 12:26
When the grid loads, the column product_image I can make read only. This is what I need to happen, the user can read the data but not edit. When the user selects a row of data and clicks the "edit" button this loads the edit dialog, I want product_image to be editable within this dialog, no where else. – Nov 09 '12 at 12:30
@RoryStandley: After loading of grid **all columns of grid contains just texts** (if you not use some special formatters like `formatter: "checkbox", formatoptions: {disabled: false}`) and so **all columns are readonly**. So I really not understand what you do. It's probably better if you append your question with the JavaScript code which create jqGrid. – Oleg Nov 09 '12 at 12:44
I have added the code I am using. Maybe I am not explainig it correctly for you! – Nov 09 '12 at 13:01

JQGrid readonly and edit option

1 Answers1