How to provide a hyperlink to a column data in JQgrid and navigate to respective Url based on data clicked?

Question

I have a JQgrid which contains has just 2 columns..I am pasting my code which i have tried below..

var UserArr = new Array();
function Grid()
{
$("#users_grid").jqGrid({

            colNames: ['Site_Name', 'Details'],
            colModel: [{ name: 'Site_Name', index: 'Site_Name', width: 130,editable: false, sortable: false,formatter: 'showlink', formatoptions: { baseLinkUrl: 'url of respective site i have clicked'}},
            { name: 'Details', index: 'Details', width: 400, editable: false, sortable: false }],

            width: 400,
            height: 'auto',
            multiselect: true

        });

        var postJSONData = JSON.stringify({ 'parentitem': parent,'childitem':child });

         $.ajax({
            type: 'POST',
            data: postJSONData,
            url: 'ManageAssetService.asmx/DisplayGridData',
            dataType: 'json',
            async: false,
            contentType: 'application/json; charset=utf-8',
            success: function success(response) {

                UserArr = response.d;

            },
            error: function failure(response) {
            alert(response.message);
                alert('failed to fetch user details');
            }
        });

         var mydata;

         for (var i = 0; i <5; i++) {

             mydata = {};

            mydata.Url= UserArr[i].Url;
            mydata.Details= UserArr[i].Details;

            $("#users_grid").jqGrid('addRowData', 'GridData_Row_' + (i + 1), mydata);


        }
}

I will display the site name and some details about that in the JQgrid.. Now the Site_Name will be an hyperlink when i click that it should redirect to the respective url.. How could i achieve that..Moreover i am adding the grid data dynamically..so where should i give the respective url for the Site_Name column data and how could i link it with that..

Please help..

Answer 1

I have got my solution like this..

The JQgrid column shold be defined like this:

colNames: ['Site_Name', 'Details'],
            colModel: [{ name: 'Site_Name', index: 'Site_Name', width: 130,editable: false, sortable: false,formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');"} },
            { name: 'Details', index: 'Details', width: 400, editable: false, sortable: false }],

The Javascript function:

function Link(id) {

    var row = id.split("=");
    var row_ID = row[1];
    var sitename= $("#users_grid").getCell(row_ID, 'Site_Name');
    var url = "http://"+sitename; // sitename will be like google.com or yahoo.com

    window.open(url);


}

Thats it..