title: Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should call a Jquery function
body: <p>I have a JQgrid which contains has just 5 columns..I am pasting my code which i have tried below..</p>
  
  <pre><code> jQuery("#grdAnn6InvstDetails").jqGrid({
          url: RootUrl + 'FDIAS/Ann6InvDtlsGridData',
          datatype: 'json',
          mtype: 'POST',           
          colNames: ['id', 'Name Of Investor', 'Amount Of Inflow', 'Currency Of Inflow', 'Amount Of Inflow(Inr)','Link'],
          colModel: [
                      { name: 'id', index: 'id', width: 30, sorttype: "int", editable: false,hidden:true },                       
                      { name: 'NameOfInvestor', index: 'NameOfInvestor', width: 200, editable: true, editoptions: { size: "22", maxlength: "100" }, editrules: { required: true} },
  
                       { name: 'AmountOfInflow', index: 'AmountOfInflow', align: "right", width: 120, editable: true,
                           editoptions: { size: "13", maxlength: "18", dataInit: function (element) {
                               $(element).keypress(function (e) {
                                   if (e.which != 8 &amp;&amp; e.which != 0 &amp;&amp; e.which != 46 &amp;&amp; (e.which &lt; 48 || e.which &gt; 57)) {
                                       return false;
                                   }
                                   var charCode = (e.which) ? e.which : e.keyCode;
                                   if (charCode == 46 &amp;&amp; this.value.split('.').length &gt; 1)
                                       return false;
                               });
                           }
                           }, editrules: { required: true }
                       },
                      { name: 'CurrencyOfInflow', index: 'CurrencyOfInflow', width: 120, editable: true, edittype: "select",  stype: 'select', 
                      edittype: "select", formatter: "select",editoptions: {value: Currencies},editrules: { required: true} },
                       { name: 'AmountOfInflowInr', index: 'AmountOfInflowInr', align: "right", width: 130, editable: true,
                           editoptions: { size: "13", maxlength: "18", dataInit: function (element) {
                               $(element).keypress(function (e) {
                                   if (e.which != 8 &amp;&amp; e.which != 0 &amp;&amp; e.which != 46 &amp;&amp; (e.which &lt; 48 || e.which &gt; 57)) {
                                       return false;
                                   }
                                   var charCode = (e.which) ? e.which : e.keyCode;
                                   if (charCode == 46 &amp;&amp; this.value.split('.').length &gt; 1)
                                       return false;
                               });
                           }
                           }, editrules: { required: true }
                       },
                       { name: 'Site_Name', index: 'Site_Name', width: 130,editable: true, sortable: false,formatter: addLink, formatoptions: {onClick: function (rowid, iRow, iCol, cellText, e) {Link();  } } },
  
                   ],
  
          cellEdit: true,
          rowNum: 100,
           gridview: true,
          rownumbers: true,
          autoencode: true,           
          height: 130,
           width: 600,
          cellsubmit: 'clientArray',
          caption: "Investor Details",
          multiselect: true,
          postData: {
              "FDIASId": "@Model.Id",
              "data": "@Model.Ann6InvstDetails"
          },           
          afterSaveCell : function() 
          {      
              var grid = $("#grdAnn6InvstDetails"),
                  sum = grid.jqGrid('getCol','AmountOfInflow', false, 'sum');
            $("#TotalAmountInflowAnnx6").val(sum);           
          } 
  
      });
       $(window).on("resize", function () {
          var newWidth = $("#grdAnn6InvstDetails").closest(".ui-jqgrid").parent().width();
          if(newWidth&gt;600)
          {
          jQuery("#grdAnn6InvstDetails").jqGrid("setGridWidth", 600, true);
  
          }
          else{
           jQuery("#grdAnn6InvstDetails").jqGrid("setGridWidth", newWidth, true);
          }
      });
      $("#btnAddNewAnn6InvstDetails").click(function () {
          if (ValidateRow($("#grdAnn6InvstDetails"))) {
              var idAddRow = $("#grdAnn6InvstDetails").getGridParam("reccount")
              emptyItem = [{ id: idAddRow + 1, NameOfInvestor: "",AmountOfInflow: "", CurrencyOfInflow: "", AmountOfInflowInr: ""}];
              jQuery("#grdAnn6InvstDetails").jqGrid('addRowData', 0, emptyItem);
          }
      });
  
  
      $("#btnDeleteAnn6InvstDetails").click(function () {
          $("#grdAnn6InvstDetails").jqGrid("editCell", 0, 0, false);
          var gr = jQuery("#grdAnn6InvstDetails").jqGrid('getGridParam', 'selarrrow');
          if (gr != "") {
              for (var i = 0; i &lt;= gr.length; i++) {
                  jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
              }
              for (var i = 0; i &lt;= gr.length; i++) {
                  jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
              }
          }
          else
              alert("Please Select Row(s) to delete!");
  
      });
  </code></pre>
  
  <p>In which the last column is a link, If I click the link button, then I want to call a Jquery function.</p>
  
  <pre><code>function addLink(cellvalue, options, rowObject)   
  {
      return '&lt;a href="#" class="actionButton" data-id="124" &gt;Click Me!  &lt;/a&gt;';
  }
  </code></pre>
  
  <p>If I click the "Click Me!" button, Then I want to call the following function. I tied it in lots of way but i didn't get any solution, So please anybody help me.</p>
  
  <pre><code>   function Link() {
                alert('aslam');
              // window.open(url);
          }
  </code></pre>