31

Is it possible have a html link in a column with jqGrid, I can't find any example in the documentation?

Danny
  • 2,771
  • 5
  • 30
  • 42
  • 6
    @djangofan jQuery and ExtJs are two different frameworks and have nothing to do with grids. I don't understand what your comment has to do with this question. – Charles Boyung May 11 '12 at 20:37

6 Answers6

31

Here's the sample colModel configuration from Craig's link to jqGrid formatting help. It specifies the formatter as showLink and the url and params are specified with formatoptions.

colModel: [ {name:'myname', 
             edittype:'select', 
             formatter:'showlink', 
             formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}
Randy Klingelheber
  • 947
  • 2
  • 9
  • 16
  • Thanks for posting the sample. Always helpful :) – Dan May 07 '10 at 08:57
  • 4
    It appends id=bla to base url, can I change the id to something else like data_id or record_id? I found how to do this formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName='record_id'} – digz6666 Feb 15 '11 at 04:11
23

Sorry to post to an old question, but here is another option that worked for me: simply create a custom formatter and return an anchor tag (a good option if you need really granular control of the link):

function returnMyLink(cellValue, options, rowdata, action) 
{
    return "<a href='/Controller/Action/" + options.rowId + "' >Click here</a>";
}

Look in the rowdata for the data returned by your query. Hope this helps someone!

Patrick
  • 5,970
  • 4
  • 24
  • 21
  • 1
    Use this one where you want the id part of the link and not a parameter. eg. you want /mylink/123/ not /mylink?id=123 – PhoebeB Sep 20 '11 at 11:16
  • this approach with custom formater will require further work in editoptions cause full output will be put in there as value. – Email Feb 20 '12 at 00:24
22

Yes, use a formatter, either a custom formatter or Predefined Formatter.

CodeCaster
  • 147,647
  • 23
  • 218
  • 272
Craig Stuntz
  • 125,891
  • 12
  • 252
  • 273
4

within the json data i am using for the grid, i just send html code back with a href tag in, that works for me

beakersoft
  • 2,316
  • 6
  • 30
  • 40
  • Worked for me. In MVC controller action something like this when creating the json object worked for me: `@"" + p.Name + ""` This however breaks the sorting as it encounter PeopleKey before Name. But I'm sure there is another work around for this. – AaronLS Apr 19 '12 at 17:30
  • 1
    Managed to fix the sorting. Have to add another column that is just the text to sort on which is hidden `{ name: 'Name', index: 'Name', hidden: true},` and then reference that column name in the visible column's index: `{width: 190, name: 'NameUrl', index: 'Name'},` – AaronLS Apr 27 '12 at 21:33
3

If you use xml data, you can add a dummy column in your query to display it in the grid

grid:

colModel :[{name:'EDIT',edittype:'select',formatter:'showlink', width:5,xmlmap:"Edit",formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}},

query:

select f1,f2,f3, 'Edit' as Edit FROM table
yei
  • 31
  • 1
1

in xml I use entity &lt; instead of < in the a tag like this &lt;a href="dest">my link&lt;/a> and works fine with jqgrid 3.6

user214553
  • 11
  • 1