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!

4 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. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete

Popular Posts