Jqgrid: navigation based on the selected row

Question

Hello,

I was trying to enable navigation based on a selected row. So, the user select a row from jQgrid, and when press the show (is there a show button for the grid, I saw edit, add etc), it needs to go to a new page based on the url (part of the row).

$(document).ready(function () {
    function getLink() {
//      var rowid = $("#customer_list").jqGrid('getGridParam', 'selrow');
        var rowid = $("#customer_list").getGridParam('selrow');
        var MyCellData = $("#customer_list").jqGrid('getCell', rowid, 'dataUrl');
        return MyCellData;
    }

    $("#customer_list").jqGrid({
        url:'mytestList',
        editurl:'jq_edit_test',
        datatype: "json",
        colNames:['Call Id','Title','dataUrl'],
        colModel:[
          {name:'callId', width:80, search:false},
          {name:'title', width:200, sortable:false},
          {name:'dataUrl',hidden:true}
        ],
        rowNum:10,
        sortname:'lastUpdated',
        sortorder: 'desc',
        pager:'#customer_list_pager',
        viewrecords: true,
        gridview: true
    }).navGrid('#customer_list_pager',
      {add:true,edit:true,del:false,search:true,refresh:true}, 
      {closeAfterEdit:true, afterSubmit:afterSubmitEvent}, // edit options
      {addCaption:'Create New something', afterSubmit:afterSubmitEvent,
       savekey:[true,13]}, // add options
      {afterSubmit:afterSubmitEvent}  // delete options
    );
    $("#customer_list").jqGrid('filterToolbar');
});

so, the url is passed for each row as dataUrl. I'm trying to read it and set to the button. When debug through firebug, the rowid was 223 (there were only 12 rows in the grid), and the cell value is empty. Currently the button is kept outside the grid, but it may better to be it part of the vavGrid

thanks.

Answer 1

You could just make the show button be part of each row in the grid and use a custom formatter to turn it into a URL.

Based on the example in the wiki, you'll probably need something along the lines of

function myformatter ( cellvalue, options, rowObject )
{
    return "<a href=\"" + cellvalue + "\">Show</a>";
}

Answer 2

The code like following could solve your problem

$("#customer_list").jqGrid ('navButtonAdd', '#customer_list_pager',
    { caption: ""/*"Show"*/, buttonicon: "ui-icon-extlink", title: "Show Link",
      onClickButton: function() {
          var grid = $("#customer_list");
          var rowid = grid.jqGrid('getGridParam', 'selrow');
          window.location = grid.jqGrid('getCell', rowid, 'dataUrl');
      }
    });