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

20,313

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

Share:
20,313
Xavier
Author by

Xavier

Updated on December 20, 2020

Comments

  • Xavier
    Xavier over 3 years

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