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.

score 12 · Accepted Answer · edited May 23 '17 at 11:58

12

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.

edited May 23 '17 at 11:58

Community

1
1

answered Dec 08 '10 at 20:09

Oleg

220,925
34
403
798

Thanks a lot Oleg. That works. Is there anything related to what you told in the jggrid documentation page? – DG3 Dec 08 '10 at 20:39
@user508518: You welcome! The place in jqgrid documentation where `showlink` is described: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#predefined_format_types (see also example on the same page). – Oleg Dec 08 '10 at 20:47
@Oleg, I have a question if I have two columns with hyperlinks, and want a different outcome for each, is that possible? – DG3 Dec 09 '10 at 15:40
@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. – Oleg Dec 09 '10 at 15:50
@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. – DG3 Dec 09 '10 at 16:00
@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 http://www.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. – Oleg Dec 09 '10 at 16:16
@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 – DG3 Dec 09 '10 at 16:34
@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')` – Oleg Dec 09 '10 at 16:43
@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
, but when I say 'clonetotop:true', jqgrid clones the pager and automatically assigns an id of 'list_toppager'. How can I view this information?
– DG3 Dec 09 '10 at 18:35
@user508518: If you use `toppager:true` and 'cloneToTop:true' parameter of `navGrid` method, another my old answer with including small demo http://stackoverflow.com/questions/3552855/add-toolbar-in-the-bottom-of-the-header-using-jqgrid/3557663#3557663 could be interesting for you. The answer http://stackoverflow.com/questions/2683108/jqgrid-footer-cells-inherits-css-from-cells-in-the-main-grid/2697747#2697747 and http://stackoverflow.com/questions/3462071/jqgrid-get-th-and-thead-using-jquery/3463002#3463002 describes ids and classes of the most important divs of jqGrid. – Oleg Dec 09 '10 at 19:25
@user508518: By the way you can use vote up answers or questions which was helpful for you (see http://stackoverflow.com/faq#howtoask and http://meta.stackexchange.com/questions/7931/). – Oleg Dec 09 '10 at 19:29
@Oleg. Looks like I need to have atleast 15 reputation to do that. – DG3 Dec 10 '10 at 00:46
@user508518: Sorry, I don't known it. The reputation system have too many different roles. By the way in another recent answer http://stackoverflow.com/questions/4402455/unable-to-position-pager-navigation-bar-above-jqgrid I explained a little about pagers which you asked me before. – Oleg Dec 10 '10 at 09:16
@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: "');" }},` – Jun 24 '11 at 06:24
@Oleg: can you see 2 more questions in jqGrid for me? I am posting them right now :) – Jun 24 '11 at 10:02

jqgrid showLink

1 Answers1

Linked