This tutorial will go over how to add an image inside a jqGrid cell when the 'url' is delivered from your json data.
Your grid will look something like this:
1. Add the required title to the colModel.
2. At the appropriate position, add the colModel as follows:
{ name: "photo_mobile_url", formatter: playerPicFormatter},
where "photo_mobile_url" is the key of the image in your json data.
For e.g. my json data looks like..
{...
"photo_mobile_url": "http://cdn.ismfg.net/static/plfpl/img/shirts/photos/51507.jpg",
...}
3. After your jQGrid definition, add the function:
function playerPicFormatter(cellvalue, options, rowObject)
{
var html = "<img src='"+cellvalue+"'/>";
return html;
}
Here, cellValue will hold the value held at the key: photo_mobile_url and so you can edit it if you have to, to correctly display your image.
Make sure the function name is the same as in the formatter.
That's it!
Your grid will look something like this:
1. Add the required title to the colModel.
2. At the appropriate position, add the colModel as follows:
{ name: "photo_mobile_url", formatter: playerPicFormatter},
where "photo_mobile_url" is the key of the image in your json data.
For e.g. my json data looks like..
{...
"photo_mobile_url": "http://cdn.ismfg.net/static/plfpl/img/shirts/photos/51507.jpg",
...}
3. After your jQGrid definition, add the function:
function playerPicFormatter(cellvalue, options, rowObject)
{
var html = "<img src='"+cellvalue+"'/>";
return html;
}
Here, cellValue will hold the value held at the key: photo_mobile_url and so you can edit it if you have to, to correctly display your image.
Make sure the function name is the same as in the formatter.
That's it!
can you post your sample system so that i could grasp what you like to share :D thanks
ReplyDeleteYou can see it here: https://fpl-assistant.herokuapp.com/ . The 'Picture' column is disabled by default but you can enable it by clicking the 'Show/hide columns' button and selecting 'Picture' from the menu.
Deletethanks
ReplyDeletehow to display audio file in jqgrid from database field is in the form of varbinary (datatype) . In advance thanks bro.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete