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\"         


        

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.