jquery - jqgrid showLink

Question

I am using showlink formatter to make a column as a link. is there a way I can call a javascript function when I click on that.

Right now this is the code I have

$("#list").jqGrid(  

{
     url: '..',
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['ID', 'User Name'],      
                colModel :[
     {name:'id',index:'id', width:110, sorttype:"string", formatter: 'showlink', formatoptions:{baseLinkUrl:'index.cfm'}},

...

I dont want to use the baselinkUrl. Instead can I call a Javascript function on clicking the URL? Also my form data does not seem to get posted to the next screen when I am using the 'showlink' formatter.

Answer 1

You can do this in different ways. The first one is to use formatter:'showlink' in the form like the following

formatoptions: {
    baseLinkUrl: 'javascript:',
    showAction: "MyBase.GetAndShowUserData(jQuery('#list'),'",
    addParam: "');"
}

(see my old answer for details). It will produce the <a> link with

href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'?id=rowId');"

where rowId will be the id of the corresponding grid row. Inside of your custom global function MyBase.GetAndShowUserData you should cut "?id=" prefix from the second parameter. So you will be able to access the grid and you will know the selected id.

One more way is to write you own custom formatter instead of the usage of formatter:'showlink'.

The main disadvantage of both approaches in my opinion is the usage of global functions. Moreover I prefer to follow concept of unobtrusive JavaScript. So I can suggest you another way from my answer on the trirand forum. The idea is to use predefined formatter showlink with '#' as the value of href attribute and to make binding to the click event of the link inside of loadComplete function:

colModel: [
    { name: 'Subcategory', formatter:'showlink',formatoptions:{baseLinkUrl:'#'}
...
loadComplete: function() {
    var myGrid = $("#list");
    var ids = myGrid.getDataIDs();
    for (var i = 0, idCount = ids.length; i < idCount; i++) {
        $("#"+ids[i]+" a",myGrid[0]).click(function(e) {
            var hash=e.currentTarget.hash;// string like "#?id=0"
            if (hash.substring(0,5) === '#?id=') {
                var id = hash.substring(5,hash.length);
                var text = this.textContent || this.innerText;
                alert("clicked the row with id='"+id+"'. Link contain '"+text+"'");
                location.href="http://en.wikipedia.org/wiki/"+text;
            }
            e.preventDefault();
        });
    }   
}

see live demo here. In the demo if you click on the text like "Physics" in the table it will be opened the url http://en.wikipedia.org/wiki/Physics which will be build dynamical. I included an additional alert to show how to decode information about the row id additionally.

UPDATED: Look at the improved code (from the performance side) of loadComplete in another answer.