Inline Editing

Is it possible to have diff fields for form edit and inline edit in a same grid?

There is an escaping bug with special characters. Try insert <script>alert('hello')</script> into a field. It should be displayed as common text, but its executed. This is a common problem with inline editing.

Take a look at http://www.jstree.com/documentation/crrm (rename section)

Hi. I can't get editRow to eval the JSON in responseText. May there be an encoding issue? I've got something like

jQuery(”#tableId”).editRow(

  rowId,
  true,
  null,
  function(xhr) {
var data = eval(xhr.responseText);   // nothing happens
if(data.result == "success") {
    jQuery("#"+tableId).jqGrid('delRowData',rowId);
}
  },
  ajaxurl,
  postData

);

Thanks

jQuery(”#tableId”).editRow( rowId, true, null, function(xhr) { var data = eval('(' + xhr.responseText + ')'); if(data.result == “success”) { jQuery(”#”+tableId).jqGrid('delRowData',rowId); } }, ajaxurl, postData );

Regards. Santiago

How is it possible to edit inline the grid without sending the data to the server, like shown on the example “Edit Row” (on the demo web site of trirand.com). The reason is that I have no PHP server and I want to save the grid locally.

And my second question: I wanted to serialize the grid data in a XML string: is it included in this plugin ?

Thanks, Pascal

After reading more carefully this page (sorry was too lazy …), I 've found the solution to save inside the grid only:

⇒> jQuery(”#grid_id”).saveRow(“rowid”, false, 'clientArray');

Data will not be posted to server. I am happy !!!

I'm using the jqgrid 4 development, so i want to colaborate with that project.

I found a problem with inline editing. jqgrid 4 sets focus by static value. So i'm using onCellSelect and just added an extra param to editRow method. So i did edit grid.inlinedir.js, adding focus on the parameters and removing the variable declaration 'focus=null'.

I did send the iCol param of onCellSelect by the focus param to the editRow method.

That is my code:

var lastsel; $(function(){ jQuery(”#rowed6”).jqGrid({ url:“listJSON”, editurl:“updateJSON”, datatype: “json”, height: 250, colNames:['Id','Data Inicial','Data final','Versão', 'Finalidade do Arquivo','codFin'], colModel:[ {name:'id',index:'id', width:90, sorttype:“int”}, {name:'dtIni',index:'dtIni',classes:'dtPicker',width:90,editable:true,sorttype:'date', editoptions:{ dataInit:function (elem) { $(elem).datepicker(); } }}, {name:'dtFin',index:'dtFin',classes:'dtPicker',width:90,editable:true,sorttype:'date', editoptions:{ dataInit:function (elem) { $(elem).datepicker(); } }}, {name:'codVer',index:'codVer',width:150,editable:true,editoptions:{size:“20”,maxlength:“30”}}, {name:'descCodVer',index:'descCodVer',width:150,editable:true,editoptions:{size:“20”,maxlength:“30”}}, {name:'codFin',index:'codFin',hidden: true} ], caption: “Date Picker Integration”, onCellSelect:function(rowid,iCol,cellcontent,e){ if(rowid && rowid!==lastsel){ jQuery('#rowed6').restoreRow(lastsel); lastsel=rowid; } jQuery('#rowed6').editRow(rowid, true,iCol); }, autowidth:true, rowNum:10, rowList:[10,20,30], pager: '#prowed3', sortname: 'id', viewrecords: true, sortorder: “asc” }); jQuery(”#rowed6”).jqGrid('navGrid',”#prowed3”,{edit:false,add:false,del:false}); });

grid.inlinedir.js line 13 - editRow : function(rowid,keys,focus,oneditfunc,succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc)

line 35 - var $t = this, nm, tmp, editable, cnt=0, svr={}, ind,cm;

It could be great if the data being edited do not change, then the data won't be saved to the server (that is the expected behaviour, I think ;) ).

Currently there is any way to do this?

There is a primitive solution to sort this problem at: http://stackoverflow.com/questions/6360512/jqgrid-inline-edit-detect-dirty-changed-cells/7141667

I'm a long-time fan of jqGrid and I hate to make my first official contact on the website a technical issue but this one has me really stumped (and I have rummaged through the documentation and searched all over the internets) …

I am using a jqGrid (latest version) in inline-edit mode to manage data completely on the client side (dataType is 'local'; I upload it to the server once the user is ready to move to the next phase). I use a OnSelectRow event to save the row being edited when you click on a different row. Both the editRow and saveRow methods in the event handler make a reference to 'clientArray'. editRow also uses keys = true (so I expect it to act accordingly on the Esc and Enter keys).

I am seeing this buggy behavior where pressing Enter only makes it “appear” that the data has been saved. The data in the underlying array (getGridParam('data')) is still unchanged. The only way data gets truly saved is when I click to a different row (and the OnSelectRow handler takes care of saving the row explicitly). Pressing Enter with keys = true (according to the source code) calls saveRow with rowId and “o” which appears to be the settings array starting with “keys”. Well, that would yield very different results given the saveRow method signature starts with “successfunc”. I have a feeling that this is causing the Enter-based saveRow to behave quite differently from the explicit saveRow in OnSelectRow because the parameter 'clientArray' is misaligned and the saveRow method treats it as some other sort of storage location (server-, url-based?). Any thoughts?

Thank you, all, in advance.

Tengo un problema con el dataInit reulta que deseo mostrar el formulario de editar y tengo dos campos fecha y quiero a ambos asignar el “datepicker”; lo asigna corectamente a ambos pero cuando deseo cambiar la fecha del segundo campo se pasa el foco al primer campo: Les dejo mi codigo…

jQuery(”#listado_es”).jqGrid({

	height: 200,
	url:'reges_detalle.php?q=1',
	datatype: "xml",
	colNames:['Fecha inicio','Fecha fin', 'Tipo', 'estado'],
	colModel:[
		{name:'horaent',index:'horaent',width:130,editable:true,searchtype:"date",
			sorttype:"datetime",
			formatter:'datetime', 
			editrules:{custom:true, custom_func:valfechahora},
			searchoptions:{dataInit:function(elb){$(elb).datepicker({dateFormat:'yy-mm-dd'});} },
			editoptions:{
				size:25,
			/*	dataInit:function(horaent){
					$(horaent).datepicker();
				}*/
			}

		},
		{name:'horasal',index:'horasal',width:130,editable:true,searchtype:"date",
			sorttype:"datetime", 
			formatter:'datetime', 
			editrules:{custom:true, custom_func:valfechahora},
			searchoptions:{
				dataInit:function(elex){
					
					$(elex).datepicker({dateFormat:'yy-mm-dd'});
				} 
			},
			editoptions:{
				size:25,
				/* 
				dataInit:function(horasal){
					$(horasal).datepicker();
				}*/
			}

		},
		
		{name:'nom_dep',index:'nom_dep', width:200,editable:true,edittype:"select", editoptions:{
			dataUrl:'includes/cargar_selec_normal.php'+parametros,
		}},
		{name:'pta_ent',index:'pta_ent', width:200},
	],
	
	rowNum:10,
	rowList:[5,10,20],
	pager: '#pager_es',
	sortname: 'horaent',
	viewrecords: true,
	sortorder: "asc",
	editurl:'opera.php',
	caption:"--------------"
})
jQuery("#listado_es").jqGrid('navGrid','#pager_es',{add:false,edit:false,del:false}, {}, {}, {}, {multipleSearch:true});

Espero me puedan ayudar a solucionar este problema

Is there an easy way to check if the row is open for editing before acting on the key events. Currently I'm looping through RowIDs and comparing them and if it's the same then I save it.

Hi, i've found a small bug into the createEl function of grid.common.js (i use the 3.8.2 version but i see that is present in the 4.3.1 too). If i set a dataUrl for create a select element within inline editing, if the value (or text) of options contains html entity, in my case blank space (&nbsp;), when i click on row and go in edit mode the selected element not correspond with the option with the same text.

This occurs because this code checks for the text() or val() of an option into the value (ovm) (or values if multiselect) : setTimeout(function(){ $(“option”,elem).each(function(i){ if(i===0) { this.selected = ””; } $(this).attr(“role”,”option”); if($.inArray($.trim($(this).text()),ovm) > -1 || $.inArray($.trim($(this).val()),ovm) > -1 ) { this.selected= “selected”; if(!msl) { return false; } } }); },0); I solved adding the checks for the html() …so:

 ''if($.inArray($.trim($(this).html()),ovm) > -1 || $.inArray($.trim($(this).text()),ovm) > -1 || $.inArray($.trim($(this).val()),ovm) > -1 )''

Hope this help, Bye Gabriele

I am having an issue with getting the keys (Esc and Enter) to work on a new record. Below is the code for my button:

$(”#t_clients”).append('<button type=“button” onclick=“$(\'#clients\').jqGrid(\'addRow\', {addRowParams: {extraparam: {keys: true}} });”>Add Client</button>');

According to the documentation, it seems like this should be working. Unfortunately, it doesn't. Any help would be greatly appreciated.

when using actions formatter (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter) restore rows like this

if(id && id!==lastsel2){ jQuery.fn.fmatter.rowactions(lastsel2,'rowed5','cancel',0); jQuery('#rowed5').editRow(id,true); lastsel2=id; }

instead of

if(id && id!==lastsel2){ jQuery('#rowed5').restoreRow(lastsel2); jQuery('#rowed5').editRow(id,true); lastsel2=id; }

It is more complete, not only restore row but restore edit buttons also. you can call the function using the onEdit event on colmodel.

;)

put formatter:'select' in select columns to get the value instead of text of the line