Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should open a new window

Question

I have a jqgrid with certain columns and I need hyperlink in one of the columns, clicking on the hyperlink should open a new window, basically call a window.open().

Also when I call the window.open(), I need the hyperlink column value. Please provide me with some sample code.Anyhelp would be highly appreciated.

Thanks

Oleg, I tried the below code and it is throwing error "object expected" in load().

 {name:'FileName', FileName:'price', width:60, align:"center", formatter:returnMyLink}

    function returnMyLink(cellValue, options, rowdata) 
     {  
             return "<a href='javascript:load();'>Open Window</a>";

     }
     function load() 
      {
         var guid = 'CEF9C407-2500-4619-95E3-8E6227B65954';
  window.open              ('/irj/servlet/prt/portal/prtroot/com.medline.medpack.ExcelViewerPL.ExcelViewer?report=CustomerBenefit&reportId='+guid );
       }

I did try the document.delegate to capture the a href event.

$(document).delegate('#CustomerSavingsView .jqgrow td a[href="#"]', 'click',function()
  {
     alert('test');
  }

I was not able to capture this event either. Sorry Im new to Jquery. Please correct me if Im wrong.

Thanks

This is how I solved it. In the grid complete event added the following code.

      hl = "<a href='#Test' target='_blank' id='hlink"+cl+"'>Test</a>";

And then added a event handler for it.

$(document).delegate('#CustomerSavingsView .jqgrow td a[href*="#Test"]', 'click',  function () 
 { 

     var guid = 'CEF9C407-2500-4619-95E3-8E6227B65954';
   window.open('/irj/servlet/prt/portal/prtroot/com.medline.medpack.ExcelViewerPL.ExcelViewer?report=CustomerBenefit&reportId='+guid );
 }

This solved the purpose. Thanks again Oleg and Walter.

"Also when I call the window.open(), I need the hyperlink column value", are you saying that you want to pass the value from the column to the new window? — Walter Stabosz, Jan 12 '12 at 12:13
Yes I need to pass the value of the column to the new window. — siv, Jan 12 '12 at 15:14

score 4 · Answer 1 · answered Jan 12 '12 at 11:59

4

maybe this will be help: in colModel,define a col: {name:'test',formatter:linkformatter} and in javascript create a function named linkformatter which returns a link; like:

function linkformatter( cellvalue, options, rowObject){
  return '<a href='xxxxxx' />';
}

answered Jan 12 '12 at 11:59

lycatliu

41
1

lycatliu, I tried this custom formatter. This does not work for me, since I need to call window.open on href. The above code will navigate me to a different URL in the same page. – siv Jan 12 '12 at 15:16
change it to return ''; However, target="_blank" is deprecated in newer versions of HTML. – Walter Stabosz Jan 12 '12 at 18:38
Thanks Walter and Oleg. But I solved it in a different way. Please find the way I did. – siv Jan 13 '12 at 21:52

score 2 · Answer 2 · answered Jan 12 '12 at 12:46

2

The predefined formatter 'showlink' can be used to create the link in the grid column. You can use target property of the formatoptions options to define target of the link.

answered Jan 12 '12 at 12:46

Oleg

220,925
34
403
798

Oleg, I learn something new about jqGrid every time I read one of your responses. This is cleaner than my current solution. I've been using a custom formatter to render the hyperlinks, with an attached event handler that calls window.open() . However, I have one question or you: is there a way to define the value of the url parameter? It defaults to the row-index, but I want the cellvalue. – Walter Stabosz Jan 12 '12 at 15:06
Oleg, I tried a custom formatter and even with that I wasnt able to achieve my task. Please see my code . – siv Jan 12 '12 at 15:22
@WalterStabosz: The standard 'showlink' has do restricted functionality. For example you can't place `cellvalue` in the another place or place the rowid as the part of url (like `edit/123` and not `edit?id=123`). I would prefer to be able to define `baseLinkUrl` or just `url` as the function and defines if myself. You can currently continue to use custom formatter in your case or you can use `cellattr` to define `onclick` attribute or you can use Unobtrusive links like [here](http://stackoverflow.com/a/5017528/315935) – Oleg Jan 12 '12 at 15:23
@Oleg - The Unobtrusive links might not work for me, since I need to open a new window on href click. The code creates a href on grid complete event which might not be helpful. I would like to go for Custom formatter, since I can get the value of the cell, but Im not sure how to open a new window on href click. – siv Jan 12 '12 at 16:07
@sivshan: In case of unobtrusive links your JavaScript code will be executed. So you can do all what you want. For example you can use `window.open` (choose the value of the second parameter like you want). – Oleg Jan 12 '12 at 18:00

score 1 · Answer 3 · answered Jun 26 '14 at 13:09

First declare the Jquery JQGrid column definition as follows

   colModel: [{ name: 'Notes/Memos', width: "5", sortable: true, classes: 'ellip', resizable: false, formatter: MethodFormatter }]

The formatter property takes the method name which is invoked with the three parameters which internally having the cells value and its id and the following method returns the hyperlink.

       function MethodFormatter(cellValue, options, rowObject) {
            var selectedRowId = options.rowId;
            return '<a href="javascript:MethodJS(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >' + cellValue + '</a>';}

The following JS Function is invoked after clicking the hyperlink which opens up another page in a window.

       function MethodJS(selectedRowId) {
    document.location.href = "ViewContact.aspx?NoteID=" + selectedRowId;
}

Brian · Answer 4 · 2018-11-30T11:39:24.247

My approach involves fewer lines of code and gives the solution asked for. In my grid, a column called Project Number is formatted as a hyper link. It opens a new page and passes the project number as a parameter.

colNames: ["Project #", ...],

colModel: [ 
              { name: 'Project Number', index: 'Project Number', width: 80, key: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'Details.aspx', target: '_new' } },

Note where I have key: true. Without this, the url returns the row number. The url returned is http://localhost:57631/Details.aspx?id=2103

I'm using jqGrid version 5.0.1

score 0 · Answer 5 · answered Jan 12 '12 at 18:42

This is my pattern. As I said, it is much more code than Oleg's suggestion of using the showlink formatter, but it is more customizable.

 // bind a live event handler to any elements matching the selector 'a.linkWindowOpener'
 $('a.linkWindowOpener').live('click', linkWindowOpener);

// colModel settings
    { name: 'ItemDescription', index: 'ItemDescription', formatter: itemDescription_formatter, unformat: itemDescription_unformatter }, 

// custom formatter to create the hyperlink 
function itemDescription_formatter(cellvalue, options, rowObject) {

    var html = '';
    var itemID = rowObject.itemID;
    var itemDescription = cellvalue;

    var a = $('<a>')
            .attr('href', '/Forms/WorkOrder/ViewItem.aspx?ItemID=' + itemID)
            .attr('data-itemDescription', itemDescription )
            .html(itemDescription)
            .addClass('linkWindowOpener');

    html = a.getHtml();

    return html;
}

// unformatter to return the raw value
function itemDescription_unformatter( cellvalue, options, cell) {
    return $('a', cell).attr('data-itemDescription');
}

// event handler to call when clicking the hyperlink
function linkWindowOpener(event) {
    event.preventDefault();
    event.stopPropagation();
    var o = $(event.currentTarget);
    var url = o.attr('href');
    window.open(url);
    return false;
}

// jQuery extenision function I wrote to get the HTML of an element
// returns the HTML of an element. It works by wrapping the element 
// inside a DIV and calling DIV.html(). It then returns the element back to 
// it's original DOM location
jQuery.fn.getHtml = function () {

    var elm = $(this[0]);
    // create a div
    var div = $('<div>');

    // append it to the parent of the target element
    elm.parent().append(div);
    // append the element to the div
    div.append(elm);

    // get the html of the div
    var html = div.html();

    // move element back to its parent
    div.parent().append(elm);
    div.remove();

    return html;
}

Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should open a new window

5 Answers5