jqGrid troubles with chained select lists in form editing

Question

After looking in this forum some way to solve these problems and without success, I hope someone could spend a few time for driving me to understand what happens and how to solve it.

Here is the snapshot of the trouble :

and the JSON response from server :

{"page":"1","total":1017,"records":"20335","rows":[{"id":"10390","cell":["10390",
" MM23398A","***.REVISION NE PAS UTILISER","ECHANGEUR","Echangeurs complets
\u00e0 plaques","","","","","","0","1"]},{"id":"1","cell":["1","\"304010","Joint
arm\u00e9 NE PAS UTILISER voir Z304010","VANNE","Pi\u00e8ces d\u00e9tach\u00e9es 
de vannes","","","","54.00","","0","4"]},{"id":"13583","cell":["13583","#POMPES"
,"Article g\u00e9n\u00e9rique pompes.","POMPE","Pompes centrifuges compl\u00e8tes
PANTHER","","","","","","0","3"]},{"id":"3","cell":["3","#POMPES\/10944\/0001",
"","ECHANGEUR","Echangeurs complets \u00e0 plaques","","","","","","0","1"]},
{"id":"4","cell":["4","#POMPES\/10944\/0002","","ECHANGEUR","Echangeurs complets 
\u00e0 plaques","","","","","","0","1"]},{"id":"5","cell":["5","#POMPES\/10971
\/0003","Article g\u00e9n\u00e9rique pompes","POMPE","Pompes centrifuges compl
\u00e8tes PANTHER","","","","","","0","3"]}

(the last cell is the above selected row)

As you can see, the informations in the selected row and the edit form ('S/famille') are not similar ! That's because the second list box is not populated with the good items, depending of the first list box.

How can I initialize this list with good items ? I have tried several ways without success, according some posts on forum.

UPDATED 2013-04-05

First of all, the colModels of these list boxes :

            {name:'fam',index:'f.code', width:80,
            formoptions:{
                elmprefix:"<span style='visibility:hidden;'>&nbsp;&nbsp;(<span style='color:red;'>*</span>)&nbsp;</span>"
            },
            editable:true,
            edittype:'select',
            editoptions:{
                dataUrl:'selfam.php',
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            $.ajax({
                                url:'selsfm.php?id='+$(e.target).val(),
                                async:false,
                                mType:'GET',
                                success:function(data){
                                    $("#tr_sfm select.FormElement").html(data);
                                }
                            });

                        }
                    }
                ]
            }
        }, 
        {name:'sfm',index:'s.code', width:80,
            formoptions:{
                elmprefix:"<span style='visibility:hidden;'>&nbsp;&nbsp;(<span style='color:red;'>*</span>)&nbsp;</span>"
            },
            editable:true,
            edittype:'select',
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                return ' title="'+rawObject[13]+'"';
            }
        }, 

and the code for editing buttons, I take id from rowdata for initially loading second list box, and id from prev/next row when clicking on nav buttons :

    myGrid.jqGrid('navGrid','#tab21p',{search:false,del:false}, 
    { // edit options
        width:500,
        modal:true,
        closeOnEscape:true,
        recreateForm: true,
        editCaption:"Modifier un ARTICLE",
        onInitializeForm: function(form) {
            rowdata = myGrid.jqGrid('getRowData',selectedId);
            id_fam=rowdata['fam_id'];
            id_sfm=rowdata['sfm_id'];
            $.ajax({
                url:'selsfm.php?id='+id_fam+'&edit',
                async:false,
                mType:'GET',
                success:function(data){
                    $("#tr_sfm select.FormElement").html(data);
                    $("#tr_sfm select.FormElement").val(id_sfm);
                }
            });
        },
        onclickPgButtons : function (whichbutton, formid, rowid) {
            var row = myGrid.jqGrid('getGridParam','selrow');
            if(whichbutton=='next'){row+=1;}else{row-=1;}
            rowdata = myGrid.jqGrid('getRowData',row);
            id_fam=rowdata['fam_id'];
            id_sfm=rowdata['sfm_id'];
        } 
    },
    {    // add options
        width:500,
        modal:true,
        closeOnEscape:true,
        recreateForm: true,
        addCaption:"Créer un ARTICLE",
        onInitializeForm: function(form) {
            id_fam=1;
            id_sfm=1;
            $.ajax({
                url:'selsfm.php?id='+id_fam+'&add',
                async:false,
                mType:'GET',
                success:function(data){
                    $("#tr_sfm select.FormElement").html(data);
                    $("#tr_sfm select.FormElement").val(id_sfm);
                }
            });
    },
    {}, //del options
    {} //search options
);  

and finally, when selecting a row from the main grid, I take ids from rowdata for loading second list :

    onSelectRow:function(id,status){
        selectedId=id;
        rowdata = myGrid.jqGrid('getRowData',id);
        id_fam=rowdata['fam_id'];
        id_sfm=rowdata['sfm_id'];
        $.ajax({
            url:'selsfm.php?id='+id_fam+'&select',
            async:false,
            mType:'GET',
            success:function(data){
                $("#tr_sfm select.FormElement").html(data);
                $("#tr_sfm select.FormElement").val(id_sfm);
            }
        });
    },

Oleg, please if you have a few time to have a look, many many thanks to tell me remarks about this code, so I could be less newbie ! Thanks again for sharing your experience. Have a nice day. JiheL

UPDATED 2013-04-08

I have applied some of Oleg's comments, that let me to obtain a clearer code. Many thanks Oleg, I greatly appreciate to be driven with your experience. I'm loving more and more jqGrid because you.

1. About 'dataEvents', I don't understand why you tell me to use this, with e.target. I've seen it can be used in editoptions but I don't know what you mean.
2. The variable 'selectedId' is used when I'm editing a row and navigate with pgButtons. If I don't memorize the new row id, the second list box is not updated and disparate with first box.
3. A new point, when I valid the form, I see in Firebug all pairs which are posted to server.

As you can see, the first element is blank with a value, it seems to me that it is 'sfm', the second list box's colName. Please have you an idea why this happens and how to solve it ?

I hope not to bother you with these continous questions. I don't find any book that could give me some knowledge about coding jqGrid. I hope that nearly this could exist. Thanks in advance for spend time. Have a nice day. JiheL

Answer 1

jqGrid don't contains any built-in support of dependent selects.

If you really need implement dependent selects based I can you forward to the answer. It shows how to change manually the content of the second (dependent) select based on changes in the first one.

In generally jqGrid need sure some flexible way how to refresh some select based on new parameters (new dataUrl for example).