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!

6 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
  3. how to display audio file in jqgrid from database field is in the form of varbinary (datatype) . In advance thanks bro.

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

    ReplyDelete

Popular Posts