Putting hyperlinks in JQGrid using jsonstring data - json

Question

I have a json string which i am using to populate the jqgrid. in the string i have one element which is a hyperlink. the problem is that if i use this string then the grid does not load at all ! here is my code
var json = '{"total": "","page": "1","records": "","rows" : [{"id" :"1", "cell" :["Quantum of Solace","142456", "1234.89", "1234"]},{"id" :"2", "cell":["01/04/2013", "7741", "007997.66", "234"]},{"id" :"3", "cell":["06/08/2013", "78976", "2329.336", "234"]},{"id" :"4", "cell":["01/01/2012", "6678", "2154.22", "1234"]},]}';
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: 'jsonstring',
datastr:json,
colNames: ['Date', 'Account ', 'Amount', 'Code'],
colModel: [
{ name: 'adate', index: 'adate', width: 90, sorttype: 'date', datefmt: 'Y-m-d' },
{ name: 'account', index: 'account', width: 80, align: 'right', sorttype: 'int' },
{ name: 'amount', index: 'amount', width: 80, align: 'right', sorttype: 'float' },
{ name: 'code', index: 'code', width: 80, align: 'right', sorttype: 'int' }
],
pager: "#pager",
toppager: true,
rowNum: 10,
rowList: [10, 20, 30],
toolbar: [true, "top"],
sortorder: "desc",
viewrecords: true,
gridview: true,
imgpath: 'F:/profile/ProgramFiles/JQGrid/jquery-ui-1.10.3.custom/development-bundle/themes/redmond/images',
autoencode: true,
height: '100%',
caption: "My first grid"
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true, cloneToTop: true });
});
do i need to make a change in the colModel ? is that the reason why the grid does not load ? if i replace the link with random text, the grid works just fine.
please help, i really need to implement hyperlinks in the grid and i have to do it on the backend

Answer 1

First of all the usage of imgpath: 'F:/profile/...' options have the same effect like the usage of for example myName: 'user2334092'. Both options will be just ignored by jqGrid as unknown. I wrote you about it in my previous answer.
If you need to have a column of grid with hyperlink which data come from the server you can do the following. You need place all information which you need in the hyperlink as data. For example
[
{
"id": 10,
"href": "http://www.google.com",
"linktext": "Quantum of Solace",
"adate": "2012-12-15",
"account": 142456,
"amount": 1234.89,
"code": 1234
},
{
"id": 20,
"href": "https://stackoverflow.com/questions/17351495/",
"linktext": "Your question",
"adate": "2013-06-28",
"account": 7741,
"amount": 7997.66,
"code": 234
}
]
Then you can use for example
colNames: ["", "Date", "Account", "Amount", "Code"],
colModel: [
{ name: "linktext", width: 200, sortable: false, search: false,
formatter: function (cellValue, options, rowObject) {
return "<a href='" + rowObject.href + "'>" +
$.jgrid.htmlEncode(cellValue) + "</a>";
}},
{ name: "adate", width: 90, formatter: "date", sorttype: "date" },
{ name: "account", width: 80, formatter: "integer", sorttype: "int",
align: "right" },
{ name: "amount", width: 80, formatter: "number", sorttype: "float",
align: "right" },
{ name: "code", width: 80, formatter: "integer", sorttype: "int",
align: "right" }
]
to read and display the data. Usage the function $.jgrid.htmlEncode make you sure that you can currectly display any text in the link event textes like </td>foo "bar's which contains symbols having special meaning in HTML. You can remove formatter: "integer" and formatter: "integer" if you don't want to display numbers with thouthand separator and with decimal separator specified in jqGrid locale file (like from grid.locale-en.js). You can use formatoptions to specify the options of the formatters (see the documentation). The demo uses the code and it display the following results