hyperlink / button with custom function call in jqgrid

Question

I want to add a hyperlink / button in each row of jqgrid, that fires a custom javascript function. Tired of various trials.

jQuery('#ProductListGrid').jqGrid({
    url: '/Product/ProductListGrid',
    datatype: 'json',
    multiselect: true,
    height: 250,
    autowidth: true,
    mtype: 'GET',
    loadComplete: addlinks,
    colNames: ['ProductId', 'ProductName', 'edit'],
    colModel: [
      { name: 'ProductId', index: 'ProductId',key:true, width: 70, hidden: true, editable: true, size: 5 },
      { name: 'ProductName', index: 'ProductName', width: 70, editable: true },
      { name: 'edit', index: 'edit', width: 70},

    ],
    pager: jQuery('#ProductListGrid_pager'),
});
function addlinks() {
    var ids = jQuery("#ProductListGrid").getDataIDs();
    alert(ids);
    for (var i = 0; i < ids.length; i++) {
        be = "<a href='#' style='height:25px;width:120px;' type='button' title='Slet' onclick=\"ff()\" >Slet</>";
        jQuery("#ProductListGrid").jqGrid('setCell', ids[i],'edit','', { act: be });
    }
    //for (var i = 0; i < ids.length; i++) {
    //    jQuery("#ProductListGrid").setCell(i, 'edit', '<a href="#">edit</edit>');
    //}
}
function ff()
{
    alert("hi");
}

The code in addlinks in is getting executed but there nothing appears in the column. I tried using custom formatting also but I couldnot show custom text "Edit" and link click doesnot fire the js method.

Diphenylamine

Have you tried the formatter? if so can you share them or provide the demo... – Exhibit

I added another column to grid, which shows link { name: 'ProductId', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Product/ProductEdit/', addParam: '&action=edit' } } – Diphenylamine

I would recommend you to read the answer and this one which shows how to use 1) custom formatter to place some text/link/button in the column 'edit' and 2) how to use beforeSelectRow callback instead of onclick attribute to execute any JavaScript code on click on the link/button... – Laine

beforeSelectRow callback have the second parameter e which provide you information about the clicked element. $(e.target).closest("td") will be the clicked cell, $(e.target).closest("tr") will be the clicked row, $(e.target).closest("td").attr("id") will be the rowid and so on. var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]); is the column number of the clicked cell. In any way I strictly recommend you to use gridview: true option (see the answer) to improve performance. Usage of addlinks makes grid slow. – Laine

Answer 1

You need to call a formatter for edit column like below :

Add formatter: addLink to the last column :

colModel: [
      { name: 'ProductId', index: 'ProductId',key:true, width: 70, hidden: true, editable: true, size: 5 },
      { name: 'ProductName', index: 'ProductName', width: 70, editable: true },
      { name: 'edit', index: 'edit', width: 70,formatter: addLink},

    ]

add javascript function :

function addLink(cellvalue, options, rowObject) 
{
  //to get row Id
  alert(options.rowId);
  // to get product Id
  alert(rowObject.ProductId);
  return "<a href='#' style='height:25px;width:120px;' type='button' title='Slet' onclick=\"ff()\" >Slet</a>";
}

More Information on formatter here.

Linalinacre

Thanks, this fires the method. Can you help me how to pass id to the function? – Diphenylamine

do you want to pass productId to ff function? – Linalinacre

Yes. the product ID and row id as well, in case i need any other info – Diphenylamine

you can access any column of the current row using rowObject like rowObject.ProductId or rowObject.ProductName inside addLink function. – Linalinacre

And use options to get row id like options.rowId – Linalinacre