jqGrid bug in dialog box

Question

Following to my previous post I have applied Oleg's suggestions and that works, but not fine.

Here is the image of this box :

Each row receive a select box (called 'Type absence') and 2 inputs (called 'Début' and 'Fin') with datepicker.

Alls rows are fine, except the first where the last field ('Fin') does not receive the datepicker.

Here is the code :

        var myCong = $("#dlgcong");
        myCong.jqGrid({
            url:'xpabs.php?id='+id+'&y='+y,
            datatype: "json",
            height:"auto",
            cmTemplate: {sortable:false},
            gridview: true,
            colNames:['Type absence','Début','Fin','id'],
            colModel:[ 
                {name:'abs',index:'abs',width:155,editable:true,edittype:'select',
                    editoptions:{ 
                        dataUrl:"selabs.php", 
                    dataEvents: [
                            {
                                type: 'change',
                                fn: function(e) {
                                    $(this).parent().css('background-color','#'+$(this).find('option:selected').attr('colr'));
                                    if($(this).find('option:selected').attr('colr')=='ffffff'){
                                        $(this).parent().parent().find('input').datepicker('disable');
                                    }else{
                                        $(this).parent().parent().find('input').datepicker('enable');
                                        $(this).parent().parent().attr('changed',true);
                                    }
                                }
                            }
                        ]
                    },
                    cellattr: function (rowId, val, rawObject, cm, rdata) {
                        return ' style="background-color:#'+rawObject[4]+';color:white;"';
                    }
                },
                {name:'debut',index:'debut',align:'center',width:70,editable:true},
                {name:'fin',index:'fin',align:'center',width:70,editable:true},
                {name:'id',index:'id',hidden:true}
            ],
            jsonReader: {
                id:3,
                cell: "", 
                root: function (obj) { 
                    return obj; 
                } 
            },                  
            loadComplete: function (data) {
                var $self = $(this),
                        idPrefix = $self.jqGrid("getGridParam", "idPrefix"),
                        l = data.length,
                        i,
                        item,
                        cm;
                for (i = 0; i < l; i++) {
                    item = data[i];
                    cm = $self.jqGrid("getColProp", "debut");
                    cm.editoptions = {
                        dataInit: function(element) {
                            $(element).datepicker({
                                setDate:item[1],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    };
                    $self.jqGrid("editRow", idPrefix + item[3]);
                    //
                    cm = $self.jqGrid("getColProp", "fin");
                    cm.editoptions = {
                        dataInit: function(element) {
                            $(element).datepicker({
                                setDate:item[2],
                                minDate:'01/01/'+y,
                                maxDate:'31/12/'+y,
                                onSelect: function( selectedDate,inst ) {
                                    $(element).val(selectedDate );
                                    $(element).parent().parent().attr('changed',true);
                                }
                            })
                        }
                    };
                    $self.jqGrid("editRow", idPrefix + item[3]);
                }
                myCong.find('select').each(function(){
                    $(this).css({
                        backgroundColor:'transparent',
                        color:'white',
                        border:0,
                        width:155
                    });
                });
                $('#EditDialog').dialog('option', 'title', 'Absences '+caption.toUpperCase());
            },
            idPrefix: "cong",
            rowNum: 10000   
        });

and the JSON response from server :

[["Cong\u00e9 pay\u00e9","06\/09\/2013","29\/09\/2013","3","0080FF"],["Cong\u00e9 pay\u00e9","19\/07\/2013","19\/07\/2013","2","0080FF"],["Cong\u00e9 exceptionnel","03\/06\/2013","03\/06\/2013","5","FF8000"],["R.T.T.","31\/05\/2013","31\/05\/2013","4","FF0000"],["R.T.T.","10\/05\/2013","10\/05\/2013","6","FF0000"]]

I don't understand why only the last field of the first row is broken such all rows are concerned by the loadComplete routine.

If someone has an idea on this trouble and how to resolve it, many thanks in advance for your kind help and spent time. Have a nice day. JiheL

Answer 1

The error seems me easy: you should remove the first call of

$self.jqGrid("editRow", idPrefix + item[3]);

inside of "for" loop. If you call editRow second time on the row which are already in editing mode because of the previous call then the second call will be just ignored.