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.

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.

• javascript
• jquery
• jqgrid

Share Improve this question Follow edited May 23, 2017 at 10:25 CommunityBot 111 silver badge asked Feb 13, 2014 at 11:47 SKaulSKaul 34922 gold badges77 silver badges2222 bronze badges 2

• can you post the code for logForProv function? – anurupr Commented Feb 13, 2014 at 11:48
• 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 Commented Feb 13, 2014 at 11:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>";
    }

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

I remend 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.