blog.syslogic.io

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']);