How to use jqGrid Custom Formatter and 'showli

Question

I am trying to link the variables in the first column of my jqgrid to another page. Right now, the variables do not appear link-like OR exclusive (meaning no matter where I click on the row, I am taken to the destination page).

I need to use the custom formatter because the URL in my search bar should not change (I am running this on my local server). But with the custom formatter, I cannot seem to also use 'showlink' (which ultimately seems to make my data appear link-like when I'm not using the custom formatter). I want the finger cursor when hovering over the data in my first column, all I'm getting right now is the "I".

Is there someway I can use both formatter:'showlink' from the predefined formatter AND formatter: returnHyperLink(name) from the custom formatter? I want to be able to ONLY click the first column's data to be taken to the page, and I want this data to appear link-like ( should not be able to click anywhere on the row).

My relevant jqgrid code is:

    colNames:['Name','Status', 'Created On', 'Update By', 'Updated On', 'RetentionDays','ValidityTime','Edit'],
    colModel:[
              {  
                  name: 'name', width:100,editable: true, edittype:'select',
                  formatter: returnHyperLink(name),

                  xmlmap: function (obj) {
                      return $(obj).attr('name'); 
                  }

              },

And my function, returnHyperLink appears as:

function returnHyperLink(name){

$(this).click(function() {
      $( "#contents" ).load("jsp/consumers.jsp");
         console.log(this, "Hello world");

    });

};

...okay obviously something is wrong if all of this code isn't even showing up in the code box. I was thinking I could call the javascript function from inside of an href, but I also do not know how to do this.

Answer 1

It seems to me that you misunderstand how the custom formatter works. jqGrid creates the whole body of the grid (<tbody>) as the string. Thus the custom formatter should return the string and no $(this).click inside of the formatter do not what you expect. The <td> element not yet exist during the custom formatter is working.

You don't wrote, which version of jqGrid and from which fork of jqGrid you use. If you would use free jqGrid, then you can use onClick callback option of formatter: "showlink":

formatter: "showlink", formatoptions: {
    onClick: function (options) {
        // this is DOM of the grid
        // options.iCol is the column index
        // options.iRow is the row index
        // options.rowid is the rowid
        // options.cm is the element from colModel
        // options.cmName is the column name
        // options.cellValue is the text from the <a>
        // options.a - DOM element of the clicked <a>
        // options.event - Event object of the click event
        alert("it's clicked!");
    }
}

If you have to use an old version of jqGrid and can't migrate to free jqGrid then you can download jQuery.jqGrid.dynamicLink.js from here and to use formatter: "dynamicLink", which I described in the old answer. See the answer too.

If you would do prefer to use your custom formatter, then you can use beforeSelectRow callback to implement onClick action. See the answer and this one for more details.