jquery - Showlink custom formatter with anchor and image in jqgrid

Question

I have a custom formatter of showlink which opens up new page below is the code and screen shot

{name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
                                                                            {
                                                                                baseLinkUrl:'javascript:',
                                                                                showAction: "goToViewAllPage('",
                                                                                addParam: "');"

                                                                            }},

What I want is if the difference of Last Updated time and today's date is more than 10 days it should display a warning image before the Name

I wrote the below function to calculate the difference of 2 dates, here is the demo for that, but I need help in placing images infront of showlink names, if the no of days count is > 10 in the grid

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);
}

Here is my jqGrid 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());

Answer 1

You can implement your requirements in many ways. The simplest one would be to use custom formatter instead of the showlink predefined formatter.

In the demo which looks like

I use the following costom formatter

formatter: function (cellvalue, options, rowObject) {
    var cellPrefix = '';
    if (rowObject.Category === 'Science') {
        cellPrefix = iconAlert;
    }
    return cellPrefix + '<a href="http://en.wikipedia.org/wiki/' + cellvalue + '">' +
           cellvalue + '</a>';
}

where iconAlert variable is defined as

iconAlert = '<span class="ui-state-error" style="border:0">' +
    '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">' +
    '</span></span>';

If you need no have more "dynamic" link and you have to implement it as JavaScript function you can use unobtrusive way to bind the click event. See the answer which is modification of another one. Corresponds to suggestions which describes how to enumerate grid rows mostly effectively the code could be

loadComplete: function () {
    var iRow, row, trClasses, $cell,
        iSubcategory = getColumnIndexByName(myGrid, 'Subcategory'),
        iCategory = getColumnIndexByName(myGrid, 'Category'),
        grid = myGrid[0],
        rows = grid.rows,
        cRows = rows.length,
        myLink = function (e) {
            var $td = $(e.target).closest('td'),
                text = $td.text(),
                $tr = $td.closest('tr'),
                rowid = $tr[0].id;

            alert("clicked the row with id='" + rowid +
                "'. Link contain '" + text + "'");
            location.href = "http://en.wikipedia.org/wiki/" + text;
        };

    for (iRow = 0; iRow < cRows; iRow += 1) {
        row = rows[iRow]; // row.id is the rowid
        trClasses = row.className.split(' ');
        if ($.inArray('jqgrow', trClasses) > 0) {
            // the row is a standard row (only if subGrid:true are used)
            $cell = $(row.cells[iSubcategory]);

            if ($(row.cells[iCategory]).text() === 'Science') {
                $cell.prepend(iconAlert);
            }
            $cell.click(myLink);
        }
    }
}

where 'Subcategory' column are defined as

{ name: 'Subcategory', index: 'Subcategory', width: 200,
    formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} }

and

var getColumnIndexByName = function (grid, columnName) {
        var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
        for (; i < l; i += 1) {
            if (cm[i].name === columnName) {
                return i; // return the index
            }
        }
        return -1;
    },
    myGrid = jQuery("#list"),
    iconAlert = '<span class="ui-state-error" style="border:0">' +
        '<span class="ui-icon ui-icon-alert" ' +
        'style="float: left; margin-right: .3em;"></span></span>';

The corresponding demo you will find here.

UPDATED: I recommend to read the answer which discuss another options in the implementation which improve the performance.