Creating a link in JQGrid

Question

I need to make all cells of a column, in my JQgrid, a link, which calls a javascript function with the cell value, to be passed for some query on the server side. I have seen html link column in jqGrid but it is not working out. here is what I have,

colModel:[
{name:'name',width:300,formatter:link}
]

and the link function is

function link(cellvalue, options, rowObject) {


alert('<a href="javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');">');
return "<a href='javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');'>";
        }

Doing this I dont get any data in the column, I also tried using the predefined formatters link and showlink, but they are appending href and id to the URL which is messing up.

Please Help.

The function makes an ajax call, it was working fine when I was not using jqgrid and appending the link directly to a table, the problem has to be outside it. — SKaul, Feb 13 '14 at 11:54

score 3 · Accepted Answer · answered Feb 13 '14 at 12:22

When click on providerId edit column you will redirect to edit page of editProvider. mentionformatter: editLink at providerId colModel for call editLink function. In this way creating link in jqGrid.

Code:

$(document).ready(function(){
        //jqGrid
        $("#providerList").jqGrid({
            url:'<%=request.getContextPath() %>/Admin/getProvidersList',
            datatype: "json",               
            colNames:['Id','Edit','Provider Name'],
            colModel:[
                {name:'providerId',search:false,index:'providerId',hidden:true},
                {name:'providerId',search:false,index:'providerId', width:30,sortable: false, formatter: editLink},
                {name:'providerName',index:'providerName', width:200},
                rowNum:20,
                rowList:[10,20,30,40,50],
                rownumbers: true,  
                pager: '#pagerDiv',
                sortname: 'providerName',  
                viewrecords: true,  
                sortorder: "desc",  
        }); 
        $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
        $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
        $('#load_providerList').width("130");   
        $("#providerList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
        $(".inline").colorbox({inline:true, width:"20%"});
    });
    function editLink(cellValue, options, rowdata, action)
    {
        return "<a href='<%=request.getContextPath()%>/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
    }

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

0

The function logForProv have to be defined on global (top) level.

I recommend you to try better formatter: "dynamicLink" instead, which I described here and which you can download from here (jQuery.jqGrid.dynamicLink.js file). It allows to construct link in jqGrid in very simple and flexible way. You can define onClick callback inside of formatoptions (see the demo). The callback provide rowId, iRow, iCol, cellValue and e as parameters.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 13 '14 at 11:58

Oleg

220,925
34
403
798

Thank You, your answers are very well written, I solved the problem using a function inside a formatter that returned the anchor ,which worked , without using link and showlink, Why do you say the function needs to be on a global level though, is it a good practice ? – SKaul Feb 13 '14 at 13:01
@SKaul: You are welcome! If you use JavaScript function in `href` then the function *have to be defined as global*. It's better to reduce the usage of global function of cause. You wrote that your original code not worked. I supposed that you have defined `logForProv` not on as global (not on the the top level). – Oleg Feb 13 '14 at 14:20

Creating a link in JQGrid

2 Answers2

Linked