3

Hi I am trying to get showlink formatter working by following this document from trirand.

What I want to achieve is a hyperlink I can click for a edit view to update/edit records. But for some reason, the column are empty where I want show a hyperlink.

Here is my code snippets, and link is the last column:

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid_products").jqGrid({
            jsonReader: {
                repeatitems: false,
                id: 'Guid'
            },
            url: '/Product/jqgridJSON/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ProductCode', 'ProductDescription', 'DefaultSellPrice', 'LastCost', 'Edit'],
            colModel: [
                { name: 'ProductCode', index: 'Productcode' },
                { name: 'ProductDescription', index: 'ProductDescription' },
                { name: 'DefaultSellPrice', formatter: 'currency', index: 'DefaultSellPrice' },
                { name: 'LastCost', formatter: 'currency', index: 'LastCost' },
                { name: 'MyLink',
                    edittype: 'select',
                    formatter: 'showlink',
                    formatoptions: { baseLinkUrl: '/Product/Update/', idName: 'Guid' }
                },
                ],
            pager: '#pager',
            rowNum: 10,
            rowList: [20, 50, 100, 200],
            sortname: 'ProductCode',
            sortorder: 'asc',
            viewrecords: true,
            width: 'auto',
            height: 'auto',
            caption: 'Products'
        }).navGrid('#pager', { edit: true, add: false, del: false });
    });
</script>

@{
    ViewBag.Title = "JSONGrid";
}

<h2>JSONGrid</h2>
<table id="grid_products"></table>
<div id="pager"></div>

The formatter from jqGrid is working for currency, but for some reason, it just didn't shown for hyperlink.

Update:

Got it working by using custom formatter.

...
{ name: 'MyLink',
                    formatter: myLinkFormatter,
                },
...

function myLinkFormatter (cellvalue, options, rowObjcet) {
    return '<a href = "/Product/Edit/' + options.rowId + '">Edit this product</a>';
}
Paul L
  • 2,240
  • 5
  • 36
  • 55

1 Answers1

1

I suppose that you fill no value in JSON input for the 'MyLink' column. Because of this the hyperlink is empty. If you want to place the link with any fixed text in column I would recommend you to use custom formatter. See the recent answer for an example.

One more possible solution way is to use formatter: 'showlink' and include jsonmap: function() { return "Edit"; } to the 'MyLink' column definition. In the case you will not need to include in the JSON data "MyLink":"Edit" for every row of data. It's important to understand that the trick works only in case of usage jsonReader: {repeatitems: false} (so it should work for your grid).

If you have another problem you should include in the text of your question the JSON data which you use.

Some small remarks to your current code:

  • the usage of edittype: 'select' together with formatter: 'showlink' has no sense. You should remove it if you will do use formatter: 'showlink'.
  • the parameter height: 'atuo' should be height: 'auto'.
  • pager: $('#pager') is better to replace to pager: '#pager'. If you use pager: $('#pager'), the jqGrid will replace it internally to pager: '#pager' and the object $('#pager') will be discarded.
  • If you use jsonReader: { id: 'Guid'} and you don't plan to show the guids to the user you can remove the 'Guid' column from the grid. The id (the Guid in your case) will be used to assign ids of <tr> elements (table rows) of the grid. So you don't need to hold the same information twice
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you @Oleg, I modified my code based on your feedback. About 'select' and 'showlink', it doens't make sense to me as well, but because I am pretty new to jQuery and Javascript, I just copy it almost exactly from jqGrid examples, and it is in the link at the top of my question. Please let me know if you think the example is wrong. – Paul L Sep 04 '11 at 23:18
  • @pstar: It's a bug in the documentation. It's good that the documentation is wiki-documentation and so everybody (like me) can modify it. So I just now removed `edittype: 'select'` from [the 'showlink' example](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#showlink_example). All other what I wrote in independent from the example. Do you have success in modification of your code? Which from described ways you choosed? – Oleg Sep 04 '11 at 23:27
  • thanks again for modify the Wiki. As I need fixed text now, I am using custom formatter and it is working now. But I used 'function formatter' instead of 'formatter: function' in your answer. – Paul L Sep 04 '11 at 23:41
  • @pstar: Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/BackgroundColorFormatter.htm), [this one](http://www.ok-soft-gmbh.com/jqGrid/jsonfromsvc1.htm) or [this one](http://www.ok-soft-gmbh.com/jqGrid/CustomFormatterLinks.htm) which all use custom formatter in the form `formatter: function`. If you look at the source code of the examples you will see the difference to what you did. In any way I am glad to read that you have now at least one working example. – Oleg Sep 04 '11 at 23:52
  • @pstar: One thing more. Because you don't use voting I want point your attension to the following simple rule: [here](http://stackoverflow.com/faq#howtoask) you could read **"As you see new answers to your question, vote up the helpful ones by clicking the upward pointing arrow to the left of the answer. Answers are normally sorted by vote score so the most highly voted answers float to the top. Other users will also vote on the answers to your question."** To be not misunderstood I recommend you to follow the rule and use voting. – Oleg Sep 05 '11 at 00:02
  • @pstar: You should also not misunderstand me. I have enough reputation points which I can't use, but if I see any error or any problem I try to help and to point to the problem. It is not important what it be: the voting or a writing error like `height: 'atuo'` instead of `height: 'auto'`. – Oleg Sep 05 '11 at 00:03
  • thank you to take time explain both Javascript and functions for me. It is good that I know more than one way to make it working by now, but I will keep my update as it is. Personally I would say anonymous function implementation is slightly better for my case. – Paul L Sep 05 '11 at 00:14