views:

249

answers:

1

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 ?>";
}
+2  A: 

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 http://stackoverflow.com/questions/3054811/add-multiple-input-elements-in-a-custom-edit-type-field/3055626#3055626 about custom editing I has also the settings, so I didn't see any problems.

Oleg
`key:true` did not help. I added a more complete code sample. Thanks for looking at this, Oleg.
gaoshan88
I added `getSites`.
gaoshan88
If I refresh the page the place_id can be selected again and will be correct for that first selection. After that, though, the problem remains. Only reloading the page works.
gaoshan88
That did it! Where did you find that parameter?! Did you already know about it or what? I looked over the wiki and simply never noticed that one. I was about to just force the page to reload with a brutish window.location.reload();
gaoshan88
There are at least 3 places in wiki with the parameter. The main place in on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing in the list of properties. Other place in the description of `dataInit`. About half of year I spend some days with some strange effect. I could fix the problem with the setting. After I reproduce your problem in debugger I could see that `myelem` will be called only one time. Then I remember about this parameter. At the end important, that the problem are solved. You can edit jqGrid Wiki yourself to recommend use `recreateForm: true` for custom editing.
Oleg
Where do you stick the extended code? Like, would you create a file maybe named grid.extended.js, stick the code in there and then load that file along with the other jqgrid files?
gaoshan88
Yes, that did the trick. I wrapped the extended object in a closure as well. Works perfectly! Thx!
gaoshan88