Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should call a Jquery function

Question

I have a JQgrid which contains has just 5 columns..I am pasting my code which i have tried below..

 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 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                     return false;
                                 }
                                 var charCode = (e.which) ? e.which : e.keyCode;
                                 if (charCode == 46 && this.value.split('.').length > 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 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                                     return false;
                                 }
                                 var charCode = (e.which) ? e.which : e.keyCode;
                                 if (charCode == 46 && this.value.split('.').length > 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>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 <= gr.length; i++) {
                jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
            }
            for (var i = 0; i <= gr.length; i++) {
                jQuery("#grdAnn6InvstDetails").jqGrid('delRowData', gr[i]);
            }
        }
        else
            alert("Please Select Row(s) to delete!");

    });

In which the last column is a link, If I click the link button, then I want to call a Jquery function.

function addLink(cellvalue, options, rowObject)   
{
    return '<a href="#" class="actionButton" data-id="124" >Click Me!  </a>';
}

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.

   function Link() {
              alert('aslam');
            // window.open(url);
        }

score 1 · Answer 1 · answered Nov 19 '15 at 09:41

1

You can remove the formatoptions:

, formatoptions: {onClick: function (rowid, iRow, iCol, cellText, e) {Link();  } }

and you can use this:

function addLink(cellvalue, options, rowObject)   
{
    return '<a href="#" class="actionButton" onclick="Link();" data-id="124" >Click Me!  </a>';
}

although inline events are considered bad practice, so you can use event delegation as:

jQuery("#grdAnn6InvstDetails").on('click', '.actionButton', Link);

answered Nov 19 '15 at 09:41

Jai

74,255
12
74
103

@MdAslam the function `Link()` should be available globally. – Jai Nov 19 '15 at 10:28
@ Jai: Yes thats available in global – Md Aslam Nov 19 '15 at 11:57

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

I's very important to know, which version of jqGrid you use and which fork of jqGrid (free jqGrid, Guriddo jqGrid JS or some old jqGrid in version <=4.7).

Free jqGrid is the fork which I develop after the license agreement was changed in jqGrid 4.7.1 and the product was renamed to Guriddo jqGrid JS (see the post). It contains some enhansements in formatter: "showlink". You can use onClick callback in formatoptions:

formatter: "showlink",
formatoptions: {
    onClick: function (options) {
        // options is object which have the following
        // properties:
        //  cmName, cellValue, rowid, cm, iCol, iRow, a, event.
    }
}

See the answer.

If you can't migrate to free jqGrid then you can use formatter: "dynamicLink", which I described initially in the answer and have published on GitHub here.

edited May 23 '17 at 12:23

Community

1
1

answered Nov 19 '15 at 09:50

Oleg

220,925
34
403
798

@MdAslam: What you tried **exactly**? Where is your code? Which version of free jqGrid you used? The code which I posted don't contain any additional function `Link`. If you do define it, it's very important in which part of your code you placed the definition of the function and where you call it. – Oleg Nov 19 '15 at 10:25
I used that function in Document.Ready function, and called like formatter: "showlink", formatoptions: { onClick: function (options) { Link(); } } – Md Aslam Nov 19 '15 at 11:57
@MdAslam: If you get the message "the Link () is undefined" then you have defined it on the wrong place. Just use inline code `onClick: function (options) { alert("in onClick!"); location.href = "http://www.google.com/"; return false; }`. See [the answer](http://stackoverflow.com/a/29456558/315935) – Oleg Nov 19 '15 at 12:48
Yeah its working fine but I want to call another function in this onclick event and the Link() is in the document. ready function. – Md Aslam Nov 19 '15 at 13:16
@MdAslam: Then you should understand the *visibility* (the scope) of functions and what is the difference between the functions in JavaScript from functions in the language which you better known (for example what will be `this` in the function and so on). You can for example include the full code of your *not working code* at the end of your question and I would point you on your error. By the way you can examin `this` inside of anonymous `onClick` and then inside of `Link`. You will see what information dissapies if you insert unneeded `Link();` call. Then you can use `Link.call(this);`. – Oleg Nov 19 '15 at 13:35

Add a hyperlink in one of the columns in JQGrid and clicking on Hyperlink should call a Jquery function

2 Answers2