Escape Special HTML characters in Datagrid [Solved]

[Darrel]

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

[stworthy]

The 'loadFilter' function can be used to transorm the data before loading into the datagrid.

Code:

$('#dg').datagrid({
	loadFilter: function(data){
		// escape the data
		return data;
	}
});

[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.