Wednesday, September 18, 2013

How to add images inside rows in jQgrid

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!

5 comments:

  1. can you post your sample system so that i could grasp what you like to share :D thanks

    ReplyDelete
    Replies
    1. You 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.

      Delete
  2. how to display audio file in jqgrid from database field is in the form of varbinary (datatype) . In advance thanks bro.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Popular Posts