title: Showlink custom formatter with anchor and image in jqgrid
body: <p>I have a custom formatter of showlink which opens up new page below is the code and screen shot</p>
  
  <pre><code>{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
                                                                              {
                                                                                  baseLinkUrl:'javascript:',
                                                                                  showAction: "goToViewAllPage('",
                                                                                  addParam: "');"
  
                                                                              }},
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/aGbJz.png" alt="enter image description here"></p>
  
  <p>What I want is if the difference of <code>Last Updated time</code> and today's date is more than 10 days it should display a <code>warning</code> image before the <code>Name</code></p>
  
  <p>I wrote the below function to <strong>calculate the difference of 2 dates</strong>, <a href="http://jsfiddle.net/vQnHz/4/" rel="nofollow noreferrer">here is the demo</a> for that, but I need help in placing images infront of <strong>showlink</strong> names, if the <code>no of days count</code> is > 10 in the grid</p>
  
  <pre><code>function diffOf2Dates(todaysDate,configDate)
  {
  /*var udate="2011-08-18 11:49:01.0";
  var configDate=new Date(udate);*/
  
  var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
  var firstDate = todaysDate; // Todays date
  var secondDate = new Date(configDate);
  
  var diffDays = Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay));
  console.info(firstDate+", "+secondDate);
  //console.info(Math.ceil(diffDays));
  
  return Math.ceil(diffDays);
  }
  </code></pre>
  
  <p>Here is my jqGrid code</p>
  
  <pre><code>var grid = jQuery("#list1");
  
  
              grid.jqGrid({
  
                datastr : xml,
                datatype: 'xmlstring',
                colNames:['cfgId','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','',''],
                colModel:[
                    {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true},
                    //{name:'updateDate',index:'updateDate', width:20, align:'center', formatter: oldConfigurationWarning },
                    {name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
                                                                              {
                                                                                  baseLinkUrl:'javascript:',
                                                                                  showAction: "goToViewAllPage('",
                                                                                  addParam: "');"
  
                                                                              }},
                    {name:'hostname',index:'hostname', width:90, align:"left"},
                    {name:'cfgDesc',index:'cfgDesc', width:90, align:"left"},
                    {name:'productId',index:'productId', width:60, align:"left"},
                    {name:'cfgType',index:'cfgType', width:60, align:"left"},
                    {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"},
                    {name:'emailAddress',index:'emailAddress', width:120, align:"left"},
                    {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true},
                    {name:'fileName',index:'fileName', width:90, align:"left", hidden:true},
                ],
                pager : '#gridpager',
                rowNum:10,
                rowList:[10,50,100],
                scrollOffset:0,
                height: 'auto',
                emptyrecords: 'No configurations loaded',
                autowidth:true,
                viewrecords: true,
                gridview: true,
                multiselect: true,
                xmlReader: {
                    root : "list",
                    row: "Response",
                    userdata: "userdata",
                    repeatitems: false
                },
                loadComplete: function () {
                      var count = grid.getGridParam();
                      var ts = grid[0];
                      if (ts.p.reccount === 0) {
                          grid.hide();
                          emptyMsgDiv.show();
                      } else {
                          grid.show();
                          emptyMsgDiv.hide();
                      }
                  },
                onSelectRow: function(id,status){
                    var rowData = jQuery(this).getRowData(id); 
                    configid = rowData['cfgId'];
                    configname=rowData['cfgName'];
                    configdesc=rowData['cfgDesc'];
                    configenv=rowData['cfgType'];
                    absolutepath=rowData['absolutePath'];
  
                    /*filename=rowData['fileName'];
                    updatedate=rowData['updateDate'];
                    absolutepath=rowData['absolutePath'];*/
                    updateproductid=rowData['productId'];
  
  
                    $('#cfgid').removeAttr('disabled');
                    document.getElementById("cfgid").value=configid;
                    document.getElementById("cfgname").value=configname;
                    document.getElementById("cfgdesc").value=configdesc;
  
                    var element = document.getElementById('cfgenv');
                    if(configenv=="Production")
                        element.value = "Production";
                    else if(configenv=="Development")
                        element.value="Development";
                    else
                        element.value="Test/QA";
                    rowChecked=1;
                    currentrow=id;
                    }
  
  
              });
              grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});
              jQuery("#m1").click( function() {
                  var s;
                  s = grid.jqGrid('getGridParam','selarrrow');
                  alert(s);
              });
              var myGrid = $("#list1");
              $("#cb_"+myGrid[0].id).hide();
              // place div with empty message insde of bdiv
              emptyMsgDiv.insertAfter(grid.parent());
  </code></pre>