SlickGrid Link Formatter Dynamic Hyperlink Assistance Needed

Question

I have a slick grid in my jquery. It works great except it seems I cannot create a dynamic url for example I need to take the value of another column (deviceId) and then insert that value into the hyperlink (/messagedetail?deviceId=1, /messagedetail?deviceId=2, /messagedetail?deviceId=3 and so on...).

      var columns = [
{id: "device_id", name: "Device ID ", field: "device_id", headerCssClass:"cell-head", cssClass: "cell-row", width:170, resizable: false,  selectable: true, sortable: true},
{id: "detail_link", name: "Details ", field: "detail_link", headerCssClass:"cell-head", formatter: linkFormatter = function ( row, cell, value, columnDef, dataContext ) {return '<a href=\"MessageDetail.jsp?deviceID='+device_id+'\"><img src=\"images/info.png\" style=\"\" alt=\"info\"></a>';}, cssClass: "cell-row", width:55, resizable: false, selectable: true, sortable: false}

];

However, it seems I can only write the value into the url link from the column defs (above code), but when I iterate to create some actual data for the rows shown below, I can't actually affect the url link itself below (detail_link) and add the value I want to be added. Any ideas on how I can achieve this? Thanks in advance.

   $(function () {
     var data = [];
     for (var i = 0; i < 500; i++) {
        data[i] = {
        id: i+1, 
        num: i+1,
    device_id: "asdf97sdfa98sdf7s987fsd987fs"+i,
    detail_link: "<a href=\"MessageDetail.jsp?deviceID=' + somevar + '\"><img           src=\"images/info.png\" style=\"\" alt=\"info\"></a>"
  };
}

Answer 1

This could be an issue in your column declaration. Try

{id: "detail_link", name: "Details ", field: "detail_link", headerCssClass:"cell-head", formatter: linkFormatter = function ( row, cell, value, columnDef, dataContext ) {return '<a href=\"MessageDetail.jsp?deviceID='+dataContext['id']+'\"><img src=\"images/info.png\" style=\"\" alt=\"info\"></a>';}, cssClass: "cell-row", width:55, resizable: false, selectable: true, sortable: false}

for your column definition and see if that fixes your dynamic link. You'll want to update the detail link in the data array to make it blank:

detail_link: ""   

This will allow the linkformatter function to do its thing dynamically. I haven't tested this on your code but this has worked for me in the past.

edit: if you want the link to be the device_id and not id you'd use

{id: "detail_link", name: "Details ", field: "detail_link", headerCssClass:"cell-head", formatter: linkFormatter = function ( row, cell, value, columnDef, dataContext ) {return '<a href=\"MessageDetail.jsp?deviceID='+dataContext['device_id']+'\"><img src=\"images/info.png\" style=\"\" alt=\"info\"></a>';}, cssClass: "cell-row", width:55, resizable: false, selectable: true, sortable: false}