Recently I came across a nice jQuery plug-in for data-grid abstraction: jqGrid
The problem was, that one column contained HTML data which shall be editable…
So I extended the formatter a little in order to trigger internal functions of $.jgrid:
$.extend($.fn.fmatter,{ htmlContent:function(cellval,options,rowdata){ return $.jgrid.htmlEncode(cellval); } }); $.extend($.fn.fmatter.htmlContent,{ unformat:function(cellval,options){ return $.jgrid.htmlDecode(cellval); } });
Like this the cell’s data will be decoded on ‘editRow’ and encoded again on ‘restoreRow’;
So it prevents the browser from rendering the code, while keeping it read-able in edit mode.
This is an excerpt of the column model (how-to apply it):
colModel:[{ name:'editable HTML content', index:'html_content', formatter:'htmlContent', editable:true, edittype:'textarea', editoptions:{ rows:'6', cols:'50' }, width:420 }],
In order to preserve the HTML tags when posting the data to the server,
It’s required to URL-encode the data before posting it:
serializeRowData: function(postdata){ postdata['html_content'] = encodeURIComponent(postdata['html_content']); return postdata; },
As an alternative to this rather pragmatic solution, there’s a grid option called ‘autoencode’ as well:
colModel:[{ name:'editable HTML content', index:'html_content', autoencode:true, editable:true, edittype:'textarea', editoptions:{ rows:'6', cols:'50' }, width:420 }],
In both cases the data needs to be decoded server-side to plain text again before saving it:
$html_content = urldecode($_POST['html_content']);