jQuery Grid Plugin - jqGrid

Thank you OlegK for your response 🙂

I'll respon to yours suggestions :

1/ I use afterSubmit for error message. But if succeed, the process continue and no action seems to be possible :s

2/ I use the dataEvents change for user interraction. It's good for this part, but the initialisation....... (edit or add) no :s. For the second part, Tony wrote "initialid" but don't explain where the value is initialised. In fact, the field where my list is linked is not the id but an other field. Is it possible ?

3/ The third point is in case of the second point is not resolved, thank for the link 😉

Hello OlegK

1/ No, it's really display an additional message in case of successful add/edit operation. My code :

/**
     * Fonction permettant de contrôler la valeur de retour du formulaire
     */
    function commonSubmit(data, params) {
        var success = true;
        var retour = data.responseText;
        if(retour != ""){
            success = false;
        }
        return [success,retour];
    }

And JqGrid param for edit :

{height:290, width:500,reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, closeAfterAdd: true, afterSubmit: commonSubmit, bottominfo:fieldsRequired}, // edit options

If there are an error returned by the server, the message is shown on the form, good. But, if there are no error. return a message with success to true show nothing. And i want to show a message. If it's not possible, i'll do it myself (manipulate the jqgrid form).

2/  My new code (custome edit button) :

var mygrid = jQuery("#jqgrid1").jqGrid({
        url:'index.php?ajax=1&action=a-ajax_list&req=listePersonnes',
        datatype: "xml",
        width: 700,
        height: 400,
        loadtext:loading,    
        colNames:['Id', planning, competence, is_reel, matricule, nom, ilot, equipe, date_debut_dispo, date_fin_dispo, etat, actions],
        colModel:[     {name:'id',index:'id', sortable:true, width:20, search:false, hidden:false},
                       {name:'libelle_pl',index:'libelle_pl', width:35, sortable:true, search: true, stype:"select", searchoptions:{dataUrl:'index.php?ajax=1&action=a-ajax_list&req=listePlanning&mode=consult', width:"50", height:"50", defaultValue:''}, editable: true, edittype:'select', editoptions:{dataUrl:'index.php?ajax=1&action=a-ajax_list&req=listePlanning&mode=edit', width:"50", height:"50", dataEvents: [
                        {      type: 'change',
                               fn: function(e) {
                                var thisval = $('#libelle_pl').val();
                                if(thisval != undefined){
                                    $.post('index.php?ajax=1&action=a-ajax_list&req=listeCompetence&mode=&id_planning='+thisval, function(data)
                                    {     
                                        var res = $(data).html();
                                        $("#libelle_c").html(res);
                                    });
                                }
                               }
                        }
                    ]}},
                       {name:'libelle_c',index:'libelle_c', width:100, sortable:true, search: true, stype:"text", searchoptions:{ width:"50", height:"50"}, editable: true, edittype:'select', editoptions:{ dataUrl:'index.php?ajax=1&action=a-ajax_list&req=listeCompetence&mode=edit', width:"50", height:"50"}},
                       {name:'is_reel',index:'is_reel', width:40, sortable:true, stype:'select', searchoptions:{value:":"+all+";1:"+oui+";0:"+non},editable:true,edittype:'custom', editoptions:{ custom_element:inputReel, custom_value:inputReelValue, defaultValue:1 } , editrules:{required:true}, formoptions:{elmprefix:"(*) "}},
                      {name:'matricule',index:'matricule', sortable:true, width:35, editable:true, editoptions:{readonly:true, disabled:true}},
                       {name:'nom',index:'nom', width:80, sortable:true, editable:true,edittype:'custom', editoptions:{ custom_element:inputName, custom_value:inputNameValue } , editrules:{required:true}, formoptions:{elmprefix:"(*) "}},
                       {name:'ilot',index:'ilot', sortable:true, width:50, editable:true},
                       {name:'equipe',index:'equipe', width:30,edittype:"select", stype:'select',searchoptions:{value:":"+all+";eq1:eq1;eq2:eq2;nuit:nuit;jour:jour;we1:we1;we2:we2"}, editoptions:{size:6,value:"eq1:eq1 ;eq2:eq2;nuit:nuit;jour:jour;we1:we1;we2:we2", defaultValue:''}, sortable:true, editable:true, formoptions:{elmprefix:"(*) "}},
                       {name:'date_debut_dispo',index:'date_debut_dispo', width:50, sortable:true, editable:true,edittype:'text', editoptions:{ size: 10, maxlengh: 10,dataInit: function(element) {$(element).datepicker({
                        showAnim: "",
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true})}}, formatter:'date', formatoptions:{srcformat:"Y-m-d", newformat: " d/m/Y"}, editrules:{required:false}},
                       {name:'date_fin_dispo',index:'date_fin_dispo', width:50, sortable:true, editable:true,edittype:'text', editoptions:{size: 10, maxlengh: 10,dataInit: function(element) {$(element).datepicker({
                        showAnim: "",
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true})}}, formatter:'date', formatoptions:{srcformat:"Y-m-d", newformat: " d/m/Y"}, editrules:{required:false}},
                       {name:'etat',index:'etat', sortable:true, width:30, align:"right", stype:'select', searchoptions:{value:":"+all+";1:"+actif+";0:"+inactif}, editable:true, edittype:"select",editoptions:{value:"1:"+actif+";0:"+inactif}},
                       {name:'act',index:'act', width:30, align:"right", sortable:false, search:false, editable:false}
                       ],
        rowNum:10,
        mtype: "POST",
        rowNum:20,
        rowList:[20,40,100],
        pager: '#pager2',
        sortname: 'libelle_pl',
        viewrecords: true,    
          autowidth: true,
          altRows:true,
        sortorder: "desc",
        gridview : false,
        gridComplete: function(){
            if(canDelete){
                var ids = jQuery("#jqgrid1").jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++){
                    var cl = ids[i];
                    var de = '';
                    var ed = '';
                    var start = '<table border="0px"><tr>';
                    if(canDelete){
                        de = "<td class='ui-pg-button ui-corner-all'><div class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-trash' onclick="DeleteRow('"+cl+"');" title='Supprimer' ></span></div></td>";
                    }
                    if(canEdit){
                        ed = "<td class='ui-pg-button ui-corner-all'><div class='ui-pg-div'><span style='cursor: pointer;' class='ui-icon ui-icon-pencil' onclick="EditRow('"+cl+"');" title='Editer'></span></div></td>";
                    }
                    var end = '</tr></table>';
                    jQuery("#jqgrid1").jqGrid('setRowData',cl,{act: start + ed + de + end});
                }
            }
        },
        editurl:"index.php?popup=1&action=a-admin_personnel&secondaire=update_form"
        }
    );
    jQuery("#jqgrid1").jqGrid('navGrid','#pager2', {edit:false,add:canAdd,del:false,search:false,refresh:true }, //options
            {height:290, width:600,reloadAfterSubmit:true, jqModal:false, closeOnEscape:true, closeAfterAdd: true, afterSubmit: commonSubmit, bottominfo:fieldsRequired}, // edit options
            {height:290, width:600,reloadAfterSubmit:true,jqModal:false, closeOnEscape:true,closeAfterAdd: true, afterSubmit: commonSubmit, bottominfo:fieldsRequired}, // add options
            {reloadAfterSubmit:true,jqModal:false, closeOnEscape:true, afterSubmit: commonSubmit}, // del options
            {closeOnEscape:true}, // search options
            {multipleSearch:true} // view options
            );
    //jQuery("#jqgrid1").jqGrid('navButtonAdd',"#pager2",{caption:"Rezet",title:"Réinitialiser",buttonicon :'ui-icon-refresh', onClickButton:function(){ jQuery("#jqgrid1")[0].clearToolbar() } });
    jQuery("#jqgrid1").jqGrid('filterToolbar');
    jQuery("#jqgrid1").jqGrid('navButtonAdd','#pager2',{
        caption: columns,
        title: columnsReorder,
        onClickButton : function (){
            jQuery("#jqgrid1").jqGrid('columnChooser',
                {"msel_opts": $.ui.multiselect.defaults}
            );
        }
    });

/**
 * Gère l'édition d'une ligne du tableau
 */
function EditRow(rowID){
    var lbl_planning = $('tr[role="row"][id="'+rowID+'"] td[aria-describedby="jqgrid1_libelle_pl"] ').html();
    
    jQuery("#jqgrid1")    .jqGrid('setSelection', rowID, false)
                        .jqGrid('setColProp', 'libelle_c',{editoptions:{dataUrl:'index.php?ajax=1&action=a-ajax_list&req=listeCompetence&mode=edit&id_planning='+lbl_planning}})
                        .jqGrid('editGridRow', rowID, {height:290, width:600,reloadAfterSubmit:true, jqModal:false, closeOnEscape:true, closeAfterAdd: true, afterSubmit: commonSubmit, bottominfo:fieldsRequired});
}

It's work for the user interraction, it's not really my problem (there are a lot of example for this action). My real problem is the initialisation. I can get all tr of role "row" with the id searched right, in this case i implement a custom edit button  with "gridComplete method" who call a function who set my value, great, but i have an javaScript error : "C[G] is undefined" :s

The solution is in progress but i need to resolve this Jqgrid JavaScript error.

Thank for your help 🙂