Is it possible to add an hyperlink at the bottom of a jqgrid?

Question

this is how my grid looks I have a JQgrid which cotains only one column which contains some 4 values... I need to add a constant hyperlink after that 4 values which is independent of the values in the cell.. It should not be a combined with column... Instead it should appear as an separate hyperlink inside the JQgrid below the column.. How to achieve this??

This is my code:

Aspx:

<table id="UsersGrid" width = "750px">

     </table>

Js:

$(function () {
            $("#UsersGrid").jqGrid({

                datatype: function (pdata) { getData(pdata); },
                colNames: ['CampaignName'],
                colModel: [
                        { name: 'campaign_name', index: 'CampaignName', width: 750},
                    ],
                    hidegrid: false,
                caption: 'Recent Campaigns'

            });
});

 function getData(pData) {
            var userid = $("#userId").val();
            var postData = {};
            postData.userId = userid;

            $.ajax({
                type: "GET",
                url: "/iSpaceWeb/CampaignService.svc/GetRecentCampaigns",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: postData,
                success: function (data) {
                    ReceivedClientData(JSON.parse(data));
                },
                error: function (data, textStatus) {
                    alert('An error has occured retrieving data!');
                }
            });
        }

        function ReceivedClientData(data) {
            var thegrid = $("#UsersGrid");
            for (var i = 0; i < data.length; i++) {
                thegrid.jqGrid('addRowData', i, data[i]);
            }

        }

And why can the hyperlink not appear in it's own cell inside the grid? — Mark, Mar 18 '13 at 11:33

score 1 · Accepted Answer · answered Mar 18 '13 at 12:37

1

You can just add footerrow: true as one more option of jqGrid which includes footer row. To fill the row you can use footerData:

$("#UsersGrid").jqGrid("footerData", "set", {
    campaign_name: "<a href='http://www.google.com'>Google</a>"
}, false);

Moreover I don't recommend you to use datatype as function and to use addRowData to fill the data. It's very bad style. Instead of that you can use datatype: "json" and set additional options of the Ajax request using ajaxGridOptions: { contentType: "application/json; charset=utf-8" } and serializeGridData.

The call of JSON.parse(data) inside of success of $.ajax having dataType: "json" looks very suspected. I suppose that you convert the returned object inside of CampaignService.svc/GetRecentCampaigns manually to JSON string. It's wrong. You should return object and WCF runtime converts the returned data * automatically* to JSON string. You current code makes serialization to JSON twice, so you have to parse the server response also twice: once it will be parsed by $.ajax having dataType: "json" and one more time you parse it by calling JSON.parse(data) explicitly. You should fix the problem in your server code and remove after that unneeded call JSON.parse(data) from the client side.

answered Mar 18 '13 at 12:37

Oleg

220,925
34
403
798

Actually its getting bisected and i am getting a lines between column values and the hyperlink..How to avoid that? – Xavier Mar 18 '13 at 12:54
@Xavier: Sorry, but I don't understand what you mean. Could you post picture and describe in other words the problem? – Oleg Mar 18 '13 at 12:56
I have attached the screenshot of my JQgrid.. Please check that in my edit – Xavier Mar 18 '13 at 13:04
@Xavier: It seems that you use wrong `width` of the grid or the `width: 750` for the column. Try to increase the value to have no scroll bar. I recommend you additionally add `height: "auto"` option to jqGrid. To tell the trust the whole construct of usage `datatype` as function is very bad. Look at [the old answer](http://stackoverflow.com/a/3914796/315935) which contains base code of usage WCF with jqGrid. – Oleg Mar 18 '13 at 13:13
@Xavier: Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/Xavier.htm). About so can look the client part of your code. – Oleg Mar 18 '13 at 13:38
It worked.. Thank you.. And thanks for the link describing WCF with jqgrid.. Really useful – Xavier Mar 18 '13 at 13:55

Is it possible to add an hyperlink at the bottom of a jqgrid?

1 Answers1