Link Building in JQGrid

Question

I need to make all the cells of a column in my JQgrid a link that calls a javascript function with the value of the cell to be passed for some server-side request. I saw the html link column in jqGrid but it does not work. that's what i have

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

and communication function

 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()+'\');'>"; } 

By doing this, I am not getting any data in the column, I also tried using the predefined formatters and showlink links, but they add href and id to the url, which gets confused.

Please, help.

Answer 1

Clicking on the providerId edit column will take you to the editProvider edit editProvider . specify formatter: editLink in providerId colModel for the editLink call editLink . This creates a 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>"; } 

Answer 2

The logForProv function must be defined at the global (top) level .

I recommend that you try a better formatter: "dynamicLink" instead, which I described here and which you can download from here ( jQuery.jqGrid.dynamicLink.js file). This makes it very simple and flexible to build a link in jqGrid. You can define onClick inside formatoptions (see demo ). The callback provides rowId , iRow , iCol , cellValue and e as parameters.