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.

Relent

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.

Intrigante

Thanks a lot Oleg. That works. Is there anything related to what you told in the jggrid documentation page? – Relent

@user508518: You welcome! The place in jqgrid documentation where showlink is described: trirand.com/jqgridwiki/… (see also example on the same page). – Intrigante

@Oleg, I have a question if I have two columns with hyperlinks, and want a different outcome for each, is that possible? – Relent

@user508518: Yes, it is possible. For example, you can use different addParam values in the columns. The values will be appended to the URL after ?id=rowId, so is you will use in one column &col=foo and for another &col=foo then you will have the corresponding text appended to ?id=rowId. Just start addParam values with a charachters which can ba a good separator, so you can easy cut off the information inside of your click event handler. – Intrigante

@Oleg. I have some complicated scenario here. I have three columns from my database query. They are userid, username, and email. I want to display only userid and username, and both of them have hyperlinks. From your solution above, i got the link for userid to be customized how I want. For username also I want a link, but with the link should open up my email client, with the email value for that row from the database. All this seems a bit complicated with jqgrid. – Relent

@user508518: It seems to me easy to implement what you need. Just the showlink formatter is not flexible enough. Inside of click handler you will know the row id which are clicked (see my answer above). So you can get the contain of any cell of the row with respect of getCell method (see trirand.com/jqgridwiki/doku.php?id=wiki:methods) or with respect of getRowData method. In case of local editing (or in case of loadonce:true) you can use also jqGrid('getGridParam','data') to get all reference to local data from all pages at once. – Intrigante

@Oleg. Thanks for replying. How can I get the row id? In the above code, in the click function, oyu passed a parameter e. I got the solution by using addParams, but how to get the rowid value and associated columns value – Relent

@user508518: var id = hash.substring(5,hash.length); is the row id, so you can use it as a parameter of getRowData or getCell: myGrid.jqGrid('getRowData',id) or myGrid.jqGrid('getCell',id,'email') – Intrigante

@Oleg. Thanks a lot. I learnt a lot from you. Can you also let me know if there is a way to know the IDs of the elements created by jqGrid. For example, for creating a bottom pager, we mention it <div id="pager">, but when I say 'clonetotop:true', jqgrid clones the pager and automatically assigns an id of 'list_toppager'. How can I view this information? – Relent

@user508518: If you use toppager:true and 'cloneToTop:true' parameter of navGrid method, another my old answer with including small demo #3553355 could be interesting for you. The answer #2683608 and #3462571 describes ids and classes of the most important divs of jqGrid. – Intrigante

@user508518: By the way you can use vote up answers or questions which was helpful for you (see stackoverflow.com/faq#howtoask and meta.stackexchange.com/questions/7931). – Intrigante

@Oleg. Looks like I need to have atleast 15 reputation to do that. – Relent

@user508518: Sorry, I don't known it. The reputation system have too many different roles. By the way in another recent answer #4402955 I explained a little about pagers which you asked me before. – Intrigante

@Oleg: It helped me put a hyperlink and call to a javascript function {name:'cfgName',index:'cfgName', width:90, align:"right", formatter: 'showlink', formatoptions: { baseLinkUrl:'javascript:', showAction: "goToViewAllPage('", addParam: "');" }}, – Haldan

@Oleg: can you see 2 more questions in jqGrid for me? I am posting them right now :) – Haldan