javascript - jqgrid - Set the custom_value of edittype: 'custom'

Question

The custom_value of place_id is set to whichever row I click first. Subsequent clicked rows will all use that same value, regardless of their actual value. Why?

example:

place_id foo_name bar_value
   10      blah       abc
   11      blah2      fgr

click the row with the place_id of 10 and click "edit" and the form that appears will have 10 for the place_id value. Make a change and save it then click the next row down. The form will still have the place_id of 10 though all other values will be correct.

My code:

The column place_id looks like this:

{name:'place_id', index:'place_id', editable: true, edittype:'custom',
 editoptions: { custom_element:myelem,custom_value:myval }}

The myval function is:

function myval(elem){
    return elem.val();
}

What I need is for the myval to be set to the correct place_id for the row being edited. I looked at the elem object in Firebug and I see that it always has the value of whichever row was first clicked but I don't understand why nor do I see where I can grab the correct value from. Any suggestions are appreciated (I tried asking on the jqgrid forums but nothing came of it so I'm turning to stackoverflow).

*Edit: If I use edittype:'text' rather than edittype:'custom' I get the correct values displayed and passed but then the column is editable and it should only be visible but not editable.

Full code:

jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({
        url:'/foo/bar/results',
        datatype: 'json',
        mtype: 'POST',
        colNames:['Place ID', 'Site ID', 'Site Name', 'API ID', 'M Type'],
        colModel :[ 
            {name:'place_id', index:'place_id', key: true, sorttype:'integer',
             width:70, editable: true, edittype:'custom',
             editoptions: {custom_element:myelem,custom_value:myval }},
            {name:'site_id', index:'site_id', sorttype:'integer', width:70,
             editable: true, edittype: 'select', editrule: {required: true},
             editoptions:{value:getSites(), size:30}},
            {name:'site_name', index:'site_name', width:150, editable: false,
             editrule: {required: true}, editoptions: {size:30}},
            {name:'api_id', index:'api_id', sorttype:'integer', width:75,
             editable: true, edittype: 'text', editrules: {required: true},
             editoptions:{size:30}},
            {name:'m_type', index:'m_type', width:150, editable: true,
             edittype: 'select', editrules: {required: true},
             editoptions:{value:{'one':'one','two':'two','three':'three',
                                 'four':'four'},size:30}} 
        ],
        editurl:'/foo/bar/editinfo',    
        height: 'auto',
        width: 'auto',
        pager: '#pager',
        viewrecords: true,
        loadonce: true,
        rowNum:20,
        rowList:[20,40,60,80,100],
        caption: 'Meter Listing'
    }); 

    // Edit functionality
    $("#editfields").click(function(){
        var gr = jQuery("#list").jqGrid('getGridParam','selrow');
        if( gr != null ) { 
            jQuery('#list').setGridParam({datatype:'json'});
            jQuery("#list").jqGrid('editGridRow',gr,
                           {editCaption: 'Edit Place Details',height:550,
                            closeAfterEdit:true,width:600,reloadAfterSubmit:true});
        } else {
            alert("Please select a row");
        }
    });
});

function myelem(value,options){
    return $('<input type="text" value="'+value+'" disabled="disabled"/>');
}

function myval(elem){
    return elem.val();
}

edit2:

getSites:

function getSites(){
    <?php
    $sites = "0:Select";
    foreach ($this->sites as $k => $v){
        $sites = $sites . ";" . $v['site_id'] . ":" . $v['site_name'];
    }
    ?>
    return "<?= $sites ?>";
}

Answer 1

Could you try to include key: true in the definition of the place_id column. You can remove id from the data which you send from the server.

If it will not help, then you should post a full code example which reproduce your problem and I will try to find a workaround.

UPDATED: Sometime there are a simple solution for complex problems. One additional parameter of editGridRow function solve your problem:

recreateForm: true

Without using of the parameter the function myelem will be called only one time at the first edit of the selected row. Then the form will be cached and not recreated. So you will be edit always the same row. After including of the parameter recreateForm: true the form will be created every time.

By the way I set some general settings which I use in all jqGrids per extending jQuery.jgrid.defaults, jQuery.jgrid.edit, jQuery.jgrid.view, jQuery.jgrid.del and jQuery.jgrid.nav. For example I use always

jQuery.extend(jQuery.jgrid.edit, {
    closeAfterAdd: true,
    closeAfterEdit: true,
    recreateForm: true,
   //...
});

Then I don't need set this parameters later. During writing of the answer Add multiple input elements in a custom edit type field about custom editing I has also the settings, so I didn't see any problems.