Print Page - Escape Special HTML characters in Datagrid [Solved]

Hello,

I have the following JSON code for populating the column headers in the datagrid.

Code:

{"field":"col_0","title":"Column 0","formatter":"createLink","sortable":"true","width":"25%","align":"left","halign":"center"},
{"field":"col_1","title":" Column 1","sortable":"true","width":"25%","align":"left","halign":"center"},
{"field":"col_2","title":" Column 2","sortable":"true","width":"25%","align":"left","halign":"center"},
{"field":"col_3","title":" Column 3","sortable":"true","width":"25%","align":"left","halign":"center"}

I have the following JSON code for populating the rows in the datagrid.

Code:

{"total":1,"rows":[{
	"col_0":"ROWNO0;1001",
	"col_1":"<a href='#' onclick='alert(\"Testing\");'>Col1<\/a>",
	"col_2":"<a href='#' onclick='alert(\"Testing\");'>Col2<\/a>",
	"col_3":"<a href='#' onclick='alert(\"Testing\");'>Col3<\/a>"
]}

The above code gets returned when I invoke the url property of the datagrid, as follows:

Code:

function createLink(value,row,extra)
{
	var href = "#";
	var fieldVal = value;
	var link_id = fieldVal.substring(0, value.indexOf(";"));
	var link_txt = fieldVal.substring(value.indexOf(";") + 1);

	return '<a id="' + link_id + '" name="' + link_id + 
		'" onClick="processEvent(\'KeyClick\',\'' + link_id.substring(link_id.indexOf("ROWNO") + 5) + '\')" href="#">' + link_txt + '</a>';
}

//code for loading the datagrid
$('#RESULTS_TABLE').datagrid({
	columns: col_data,
	url: ajax_url,            //call to get the json data
	singleSelect:true,
	pagination: true,
	pagePosition: 'both',
	pageSize:10,
	multiSort:true,
	remoteSort:false,
	height:'auto'
});

As you can see in the above block col_1, col_2, col_3 and col_4 have a html string as their data. The code works fine, however on clicking those column elements, the alert message is displayed.

I want the datagrid to escape html string if they are coded in the json directly.

If the formatter option of the datagrid is used, then only that column in the grid should be rendered as a html element, but the other columns should displayed plain text only.

Is it possible to escape the strings that are returned as a JSON object to create the datagrid on some event in the datagrid like onLoadSuccess or something???

Please note: I don't want the html to get escaped while getting the response from the ajax call. I want it to get escaped while populating it in the grid.

Thanks and Regards,
Darrel

Hello stworthy,

I did the following and it worked as expected:

Code:

function formatData(data)
{
	var l_data = data;

	l_data = JSON.stringify(l_data);

	//alert("l_data: " + l_data);
	l_data = l_data.replace(/</g,"&lt;").replace(/>/g,"&gt;");
	//alert("data now is: " +l_data);

	return JSON.parse(l_data);
}

//code for loading the datagrid
$('#RESULTS_TABLE').datagrid({
	columns: col_data,
	url: ajax_url,            //call to get the json data
	singleSelect:true,
	pagination: true,
	pagePosition: 'both',
	pageSize:10,
	multiSort:true,
	remoteSort:false,
	height:'auto',
	loadFilter: function(data){
		return formatData(data);
	}
});

The idea for using that loadFilter function is simply amazing!!!!

Thanks a lot for your response :)

God Bless!!!!!!

Regards,
Darrel.

EasyUI Forum

General Category => General Discussion => Topic started by: Darrel on April 06, 2016, 03:16:44 AM