cell - jqGrid change dynamically edittype for specific row -

following post found way want get, meet trouble it. here code :

var mydlg = $("#dlgpers"),lastsel; mydlg.jqgrid({     url:'pers.php?id='+datarow.id,     mtype:'get',     datatype: "json",     ajaxgridoptions: { cache: false },     height:250,     cmtemplate: {sortable:false},     gridview: true,     celledit:true,     scroll:false,     colnames:['id','label','information','type','data'],     colmodel:[          {name:'id',index:'id',hidden:true,key:true},         {name:'label',index:'label',align:'right',width:100,editable:false,             cellattr: function (rowid, val, rawobject, cm, rdata) {                 return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"' ;             }         },         {name:'info',index:'info',width:200,editable:true,edittype:'text'},         {name:'type',index:'type',width:30,hidden:true},         {name:'data',index:'data',width:30,hidden:true}     ],     loadcomplete: function () {         var rowids = mydlg.jqgrid('getdataids');         $.each(rowids, function (i, row) {             var rowdata = mydlg.jqgrid('getrowdata',row);             if (rowdata.type == 'select') {                 mydlg.jqgrid('restorerow', row);                 var cm = mydlg.jqgrid('getcolprop', 'info');                 cm.edittype = 'select';                 cm.editoptions = { value: rowdata.data };                 mydlg.jqgrid('editrow', row);                 cm.edittype = 'text';                 cm.editoptions = null;                 cm.editable = true;             }else{                 mydlg.jqgrid('restorerow', row);                 var cm = mydlg.jqgrid('getcolprop', 'info');                 cm.edittype = 'text';                 cm.editoptions = null;                 cm.editable = true;                 mydlg.jqgrid('editrow', row);                 cm.edittype = 'text';                 cm.editoptions = null;                 cm.editable = true;             }         });     } }); 

and result image :

and json response :

{"page":1,"total":1,"records":1,"rows":[ {"cell":[0,"nom ","lebrun","text",""]}, {"cell":[1,"pr\u00e9nom ","jacques","text",""]}, {"cell":[2,"initiales ","lj","text",""]}, {"cell":[3,"fonction ","","text",""]}, {"cell"[4,"service,"administratif","select","0:administratif;1:commercial;2:magasin;3:m\u00e9canique;4:rejointage;5:soudure;6:tests"]}, {"cell":[5,"t\u00e9l\u00e9phone ","","text",""]}, {"cell":[6,"email ","","text",""]}, {"cell":[7,"statut ","cdi","select","0:cdi;1:cdd;2:app;3:stg;4:int"]}, {"cell":[8,"entr\u00e9 le ","2008-10-06","text",""]}, {"cell":[9,"sorti le ","0000-00-00","text",""]}]} 

two questions submit knowledge:

1. as can see, second line (prénom) don't seem editable, is.
2. i don't understand why these inputs visible, want appear if edit cell.

many kind resolve (and explain) wrong way. jihel

updated 2013-03-29

i have applied answer code , run fine ! many thanks. have created form in such way subject, , cause me troubles.

here code of new form :

        var showabs=function(){         $('#editdialog').empty();         var $table=$('<table></table>')         .attr('id','dlgcong')         .appendto($('#editdialog'));         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: {                 cell: "",                  root: function (obj) {                      return obj;                  }              },                               loadcomplete: function (data) {                 var $self = $(this),                         cm = $self.jqgrid("getcolprop", "debut"),                         idprefix = $self.jqgrid("getgridparam", "idprefix"),                         l = data.length,                         i,                         item;                 (i = 0; < l; i++) {                     item = data[i];                     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);                                 }                             })                         }                     }                 }                 var cm = $self.jqgrid("getcolprop", "fin");                 (i = 0; < l; i++) {                     item = data[i];                     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                     });                 });             },             idprefix: "cong",             rownum: 10000            });         //********************         //  button ' valider '         //********************         $('<input />')         .attr({             type:'button',                   })         .css({             float:'right',             margintop:'5px'         })         .click(function(){             var tobesaved='';             mycong.find('tr[changed=true]').each(function(idx){                 if(tobesaved.length>0){                     tobesaved+='|';                 }                 tobesaved+=$(this).find('td:eq(3)').text()+';';                 tobesaved+=$(this).find('select option:selected').val()+';';                 tobesaved+=$(this).find('input:eq(0)').val()+';';                 tobesaved+=$(this).find('input:eq(1)').val();             });             if(tobesaved.length>0){                 $.ajax({                     url:'majpabs.php?id='+id+'&data='+tobesaved,                     async:false,                     datatype:'json',                     success:function(data){                         mygrid.trigger('reloadgrid');                         $('#newabs').val(' nouveau ').attr('disabled',false);                     }                 });             }         })         .val(' valider les absences ')         .appendto($('#editdialog'));         //*******************         //  button ' retour '         //*******************         $('<input />')         .attr({             type:'button',             id:'newabs'         })         .css({             float:'left',             margintop:'5px'         })         .click(function(){             showpers();         })         .val(' retour ')         .appendto($('#editdialog'));         //********************         //  button ' nouveau '         //********************         $('<input />')         .attr({             type:'button',             disabled:false         })         .css({             float:'left',             margintop:'5px',             marginleft:'7px'         })         .click(function(){             if($(this).val()==' nouveau '){                 var myrow = {abs:"0", debut:'00/00/'+y, fin:'00/00/'+y, id:'0'};                 mycong.jqgrid('addrowdata','',myrow, 'last');                 $(this).val(' sauver ').attr('disabled',true);             }else{             }         })         .val(' nouveau ')         .appendto($('#editdialog'));     } 

and result image :

1. as can see, first row not receive select , datepicker other rows. strange !
2. when add new row, not receive select , datepicker first row. think i'm wrong in understanding method.

i'm worry bother these questions, had in wiki without success find way make these points correct. find more detailed tutorial show cases examples.

thank very much if can spend again time give me way more efficient jqgrid.jihel

updated 2013-04-01

i have applied oleg's suggestions , works now. trouble remains. here image :

for first row, select box ok. first input field receive datepicker, second (the column called 'fin') not ! others rows receive datepickers, not last field of first row. here code :

                loadcomplete: function (data) {                 var $self = $(this),                         idprefix = $self.jqgrid("getgridparam", "idprefix"),                         l = data.length,                         i,                         item,                         cm;                 (i = 0; < l; i++) {                     item = data[i];                     cm = $self.jqgrid("getcolprop", "debut");                     cm.editoptions = {                         datainit: function(element) {                             //alert('deb'+i);                             $(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) {                             //alert('fin'+i);                             $(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                     });                 });             }, 

another time, hope can me resolve trouble , close request. many time spend newbies. jihel

i think many problems in code common. tried answer on question more detailed.

first of posted wrong json data. line

{"cell"[4,"service,"administratif","select","0:administratif;1:commercial;2:magasin;3:m\u00e9canique;4:rejointage;5:soudure;6:tests"]}, 

contains 2 errors:

1. no ':' after "cell"
2. no " after "service

after changes line so

{"cell":[4,"service","administratif","select","0:administratif;1:commercial;2:magasin;3:m\u00e9canique;4:rejointage;5:soudure;6:tests"]}, 

and json data read. next problem usage of numbers string in 1 array. because bug in the line of jqgrid code

idr = ccur !== undefined ? ccur[idn] || idr : idr; 

ids not integer value 0. posted the bug report error. to fix problem using existing code of jqgrid should use strings instead of numbers. example line

{"cell":[0,"nom ","lebrun","text",""]}, 

should changed to

{"cell":["0","nom ","lebrun","text",""]}, 

without changes have id duplicates. both first lines ({"cell":[0,"nom ","lebrun","text",""]} , {"cell":[1,"pr\u00e9nom ","jacques","text",""]},) same id equal 1 instead of 0 , 1. it main reason of problem described.

additionally recommend following:

• remove celledit:true option. use editrow later in code. means use inline editing instead of cell editing means celledit:true. can't combine both editing modes in 1 grid.
• replace height:250 option height:"auto"
• remove index properties colmodel. remove properties of colmodel default values (edittype:'text', editable:false)
• remove options of jqgrid default values (mtype:'get', scroll:false)
• all parameters of functions in javascript optional. if don't use example parameters of cellattr callback can replace cellattr: function (rowid, val, rawobject, cm, rdata) {...} cellattr: function () {...}
• the callback loadcomplete has 1 parameter data can provide data returned server. don't need use getdataids , getrowdata. array data.rows can directly used.
• if use data parameter of loadcomplete callback can remove unneeded 'type' , 'data' columns grid.
• if place information id after 'label','information' can use id property of jsonreader , remove hidden id column grid too. example if move id last in cell array can use jsonreader: {id: 4} , remove hidden id column grid. if add additionally cell: "" property in jsonreader can remove "cell": input data. if use root property of jsonreader defined function (see the documentation) can remove unneeded data server response.

for example server can produce simplified data

[ ["nom ","lebrun","text","","0"], ["pr\u00e9nom ","jacques","text","","1"], ["initiales ","lj","text","","2"], ["fonction ","","text","","3"], ["service","administratif","select","0:administratif;1:commercial;2:magasin;3:m\u00e9canique;4:rejointage;5:soudure;6:tests","4"], ["t\u00e9l\u00e9phone ","","text","","5"], ["email ","","text","","6"], ["statut ","cdi","select","0:cdi;1:cdd;2:app;3:stg;4:int","7"], ["entr\u00e9 le ","2008-10-06","text","","8"], ["sorti le ","0000-00-00","text","","9"] ] 

the corresponding jqgrid be

$("#dlgpers").jqgrid({     url: "pers.php?id=" + datarow.id,     datatype: "json",     height: "auto",     cmtemplate: {sortable: false},     gridview: true,     colnames: ["label", "information"],     colmodel: [         {name: "label", align: "right", width: 100,             cellattr: function () {                 return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"';             }},         {name: "info", width: 200, editable: true}     ],     jsonreader: {id: 4, cell: "", root: function (obj) { return obj; } },     loadcomplete: function (data) {         var $self = $(this),             cm = $self.jqgrid("getcolprop", "info"),             idprefix = $self.jqgrid("getgridparam", "idprefix"),             l = data.length,             i,             item;          (i = 0; < l; i++) {             item = data[i];             cm.edittype = item[2] === "select" ? "select" : "text";             cm.editoptions = { value: item[3] };             $self.jqgrid("editrow", idprefix + item[4]);         }     },     idprefix: "dlg",     rownum: 10000 // have no paging }); 

see the demo: