hyperlink in JQuery

Question

I have created a grid using JQuery in MVC3, the grid displays data from the model, but now am intending to place a hyperlink to one of the column in the grid so tat when user clicks on the link he should be able to look up on the data pertaining to the row value..below is the code to display my grid.

<script type="text/javascript">
$(document).ready((function () {
    $("#list").jqGrid({
        url: '/list/GetDet/', 
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Code', 'Name', 'Location'], //column name
        colModel: [
      { name: 'Code', index: 'Code', width: 100, align: 'right' },
      { name: 'Name', index: 'Name', width: 100, align: 'left' },
      { name: 'location', index: 'location', width: 100, align: 'left'}],

        pager: $('#pager'),
        rowNum: 5,
        rowList: [5, 10, 20, 50],            
        sortname: 'Code',
        sortorder: "desc",
        viewrecords: true,
        caption: 'Details'            
    });
})); 
</script>

if i intend to create a link to the name column how do i provid

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

I think you have a problem with the sending of the URL .
Here is the Link to solve that issue.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 05 '12 at 11:24

Mihai Labo

1,082
2
16
40

score 0 · Answer 2 · answered Sep 05 '12 at 15:19

0

You could use the getCell method (as mentioned in the jqGrid docs). Once you have this value in your javascript, you could handle it any way you like.

answered Sep 05 '12 at 15:19

keithxm23

1,280
1
21
41

But how do i pass the row id and column id to the get cell method...am sorry this would be a basic question to you...this is the first time am handling Jquery i am unable to solve...can you please help below is my code to genrate the hyperlink { name: 'Name', index: 'Name', width: 100, align: 'left', formatter: 'showlink', formatoptions: { baseLinkUrl: 'store/Details/' – Panther Sep 06 '12 at 08:20
Oh, I think I misunderstood your question. This seems similar to this other SO question: http://stackoverflow.com/questions/5010761/linking-from-a-column-value-in-jqgrid-to-a-new-page-using-get/5017528#5017528 Let me know if that helps. – keithxm23 Sep 06 '12 at 15:11

score 0 · Answer 3 · answered Nov 09 '12 at 01:44

In your getData action where you are putting the actual link or ID which you want to link use full html string just where you create the cell. Server can send <a href="/controller/action/id">View</a> to the client and it would appear as a link. This would not affect any search or sorting as they have been done on the actual index and not hyperlink.

I usually prepare my actions serverside but if you want to do it client side you can use specify a custom function as a formatter and format the value in anyway you want. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options Have a look at formater option

If you are using MVC3 I suggest you look at Lib.Web.MvC nuget package with all jqGrid options to generate HTML and Javascript from strongly typed models. http://nuget.org/packages/Lib.Web.Mvc — Farrukh Subhani, Nov 09 '12 at 01:45

score 0 · Answer 4 · edited May 23 '17 at 12:34

Use camelcase for column name and index, don't use capital letter on declaration of starting word of columns. If you use the grids are not loaded.

Example:

{ name: 'code', index: 'code', width: 100, align: 'right' }, { name: 'name', index: 'name', width: 100, align: 'left' }, { name: 'location', index: 'location', width: 100, align: 'left'}],

Your problem is related on off previously asked question Retrieve value of cells, when in edit mode in JqGrid is answered How to return row values using hyperlink in jqgrid

In editLink function use column index name for get the row values.

function editLink(cellValue, options, rowdata, action)
{
    alert('Name: '+ rowdata.name);//alerts row value of column
    //return "<a href='/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
}

hyperlink in JQuery

4 Answers4