How to bind jqGrid colModel Formatter dynamically

Question

I am trying to bind the formatter for the jqGrid column Model dynamically. I build the colModel array dynamically as follows.

ColModel:[{name:Id,width:50,formatter:customerLinkFormatter}]

I have extended the formatter as follows

$.extend($.fn.fmatter, {
customerLinkFormatter: function (cellvalue, options, rowdata) {
    return '<a href="CustomerEdit.aspx?id=' + rowdata[options.colModel.name] + '"> ' + cellvalue + '</a>';
}

});

But no link is displayed for the Id column. Please help me in figuring out.

Here is part of the code

$(document).ready(function () {
        "use strict";
        $.ajax({
            type: "POST",
            url: "../Hdlr.ashx?",
            datatype: "json",
            success: function (msg) {
                jqcolNames = msg.ColNames,
                jqcolModel = msg.ColModel,

                PopulateGrid();
            },
            error: function (msg) {
                alert(' error  ' + msg.responseText);
            }
        });
    });

    function PopulateGrid() {
        $('#list').jqGrid({
            url: "../Hdlr.ashx?",
            colNames: jqcolNames,
            colModel: jqcolModel,
            jsonReader: {
                cell: "",
                id: "0",
                repeatitems: false
            },
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: "#pager",
            rownumbers: true,
            viewrecords: true,
            search: false,
            caption: "Grid Information"
        }).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: false });
    }

score 0 · Answer 1 · answered Apr 08 '13 at 04:31

0

Try defining the formatter just like defining a function :

  function customerLinkFormatter(cellvalue, options, rowdata) {
               return '<a href="CustomerEdit.aspx?id=' + rowdata.name + '"> ' + cellvalue + '</a>';
            };

answered Apr 08 '13 at 04:31

Sharun

3,022
6
30
59

This is what I did earlier. The formatter field in the database has the function directly. It did not work either – user1077595 Apr 08 '13 at 12:43

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

If you extended $.fn.fmatter then you should use string "customerLinkFormatter" instead of direct usage of function customerLinkFormatter:

colModel:[{name: "Id", width: 50, formatter: "customerLinkFormatter"}]

The usage of name:Id is also wrong if you don't defined Id variable before with the corresponding string value.

You wrote about binding formatter of jqGrid dynamically. You need just change formatter property inside of colModel. One can use setColProp method for exampele. See here an example of usage of setColProp.

edited May 23 '17 at 10:25

Community

1
1

answered Apr 08 '13 at 05:58

Oleg

220,925
34
403
798

thanks for the reply. When I have extended the formatter do I still have to bind the formatter of the colModel. – user1077595 Apr 08 '13 at 12:41
@user1077595: Sorry, I don't understand your question. With respect of `$.extend($.fn.fmatter, {customerLinkFormatter: function(...) {...}});` you define `$.fn.fmatter.customerLinkFormatter` function which will be called for formatting all cells on the columns which are defined with `formatter: "customerLinkFormatter"`. So your custom formatter works in the same way like any other [predefined formatter](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#predefined_format_types) of jqGrid. – Oleg Apr 08 '13 at 12:47
I get the colModel from the database as follows "ColModel":[{"name":"CUSTOMER_ID","width":"60","formatter":"customerLinkFormatter"},{"name":"Description","width":"50","formatter":null}] but it does not work – user1077595 Apr 08 '13 at 13:22
@user1077595: What is not work? What error you has? Do you debugged the code? Do you defined `$.fn.fmatter.customerLinkFormatter` before the grid is created? Could you include `alert("in customerLinkFormatter");` as the first line of `$.fn.fmatter.customerLinkFormatter` and verify whether alert was called? Moreover you posted permanently code with errors. Do you use `"ColModel"` (wrong name !!!) or `"colModel"`? – Oleg Apr 08 '13 at 13:34
I build the ColModel dynamically for the grid like this success: function (msg) { colNames = msg.ColNames, colModel = msg.ColModel, PopulateGrid(); } What is not working is the column is not displayed as a link – user1077595 Apr 08 '13 at 13:54
@user1077595: Sorry, but you don't answered on any from my questions from my previous comment. I don't help you if I don't know what you do. The code like `success: function (msg) { colNames = msg.ColNames, colModel = msg.ColModel, PopulateGrid(); }` first contains syntax errors (usage of commas for example without `var`) and it get no information at all. The code `PopulateGrid();` could be `MyProgramWhichNotWorks();`. One can't find the error if you don't provide the code and not even describes exactly *which error* you have (what exactly "does not work" in the grid) – Oleg Apr 08 '13 at 14:39
Sorry I will not be able to post the code in the forum. Yes the variables are declared at the beginning. – user1077595 Apr 08 '13 at 15:41
@user1077595: Sorry, but I don't understand what you want with posting the question if you don't want to post more details about the problem. So it's unclear whether you have empty grid, empty column of the grid, empty HTML page, some error message etc... Moreover I asked you multiple time to explain what problem you have exactly and you wrote nothing and ask many other questions: no answers. I suggested you to insert `alert` in the formatter: no comment. What you expect with posting such questions? Do you want just spent the time of other people who read the text and try to help you? – Oleg Apr 08 '13 at 15:56
I have pasted part of the code. I get the colModel dynamically as I said earlier. I construct name width and formatter attributes. The grid is displayed with the data. The hyerlink is not displayed on the column with the customerLinkFormatter – user1077595 Apr 08 '13 at 17:08
@user1077595: You should insert some test data which can be used to reproduce the problem. Two columns in `colModel` and one row of data would be enough to reproduce the problem which you describe. By the way `cell` option in `jsonReader` will be ignored. `id: "0"` will be also wrong in case of usage `repeatitems: false`, but all that is independent from the problem which you posted. If I understand you correct the `id: "0"` should be replaced to `id: jqcolModel[0].name`. – Oleg Apr 08 '13 at 17:28

How to bind jqGrid colModel Formatter dynamically

2 Answers2