How to add custom Formatter for jqgrid with dynamic column binding

Question

This is almost continuation of a previous question. Problem showing jqgrid with dynamic column binding

I am trying to put a Custom Formatter for the columns like below. But nothing happens. Please help.

JSP:

   <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <script type="text/javascript"> 
  $(document).ready(function() {
  $.ajax( {
    type : "GET",
    url : "interFinalTbaAction",
    data : "",
    dataType : "json",
    success : function(result) {
        var colD = result.couponStripList, colM = result.colModelList;
        jQuery("#InterFinalTBAGrid").jqGrid( {
            data : colD.rootVar,
            datatype : 'local',
            gridview : true,
            colModel : colM,
            loadComplete : function(data) {
            },
            loadError : function(xhr, status, error) {
                alert('grid loading error');
            }
        });
    },
    error : function(x, e) {
        alert(x.readyState + " " + x.status + " " + e.msg);
    }
});
  });
 </script>
 </head>
 <body>
 <table id="InterFinalTBAGrid">
<tr>
    <td />
</tr>
 </table>
 </body>
 </html>

The JSON result from action:

 {
"colModelList": [
    {
        "formatter": "CouponFormatter",
        "index": 0,
        "jsonmap": null,
        "key": false,
        "label": "Coupon",
        "name": "coupon",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 100
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 1,
        "jsonmap": null,
        "key": false,
        "label": "03-10-11",
        "name": "prceCM",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 2,
        "jsonmap": null,
        "key": false,
        "label": "04-13-11",
        "name": "prceCMPlusOne",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 3,
        "jsonmap": null,
        "key": false,
        "label": "05-12-11",
        "name": "prceCMPlusTwo",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
    },
    {
        "formatter": "InterFinalPriceFormatter",
        "index": 4,
        "jsonmap": null,
        "key": false,
        "label": "06-13-11",
        "name": "prceCMPlusThree",
        "resizable": true,
        "search": true,
        "sortable": false,
        "title": true,
        "width": 150
      }
   ],
   "couponStripList": {
    "rootVar": [
        {
            "coupon": 5.0,
            "prceCM": "103.734375,103.734375",
            "prceCMPlusOne": "103.359375,99.03",
            "prceCMPlusThree": "102.671875,102.671875",
            "prceCMPlusTwo": "103.015625,103.015625"
        },
        {
            "coupon": 5.5,
            "prceCM": "105.984375,105.984375",
            "prceCMPlusOne": "105.671875,99.2",
            "prceCMPlusThree": "105.046875,105.046875",
            "prceCMPlusTwo": "105.359375,105.359375"
        }

    ]
   },
   "deliveredDataTimestamp": "03-02-11 11:52:57",
   "requestedTimestamp": null
   }

The Javascript functions for formatters:

  function CouponFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing coupon formatter";
   }

function InterFinalPriceFormatter(cellValue, opts, rowObject) {
return cellValue + "Testing price formatter";
}

Oleg · Accepted Answer · 2017-09-28T15:20:56.530

12

If you use

"formatter": "InterFinalPriceFormatter"

you don't set the value of "formatter" property to the function.

One way to fix the problem is to loop through result.colModelList and verify that one use "formatter" property with some string value for which you has implementation as the function in the JavaScript. Then you can overwrite the property with the value of the corresponding formatter function.

Another way will be use inline functions in the formatter:

"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"

In the way you will be not has clear separation of the code and the grid parameters, but you receive some encapsulation of the formatter inside the grid.

UPDATED: I hope that the next code fragment (untested) could make clear what I mean under the first implementation way

var functionsMapping = {
    // here we define the implementations of the custom formatter which we use
    "CouponFormatter": function (cellValue, opts, rowObject) {
        return cellValue + "Testing coupon formatter";
    },
    "InterFinalPriceFormatter": function (cellValue, opts, rowObject) {
        return cellValue + "Testing price formatter";
    }
};
$.ajax({
    type: "POST",
    url: "interFinalTbaAction.action",
    data: "",
    dataType: "json",
    success: function(result) {
        var i, cm, colD = result.couponStripList,
            colN = result.columnNames,
            colM = result.colModelList;
        for (i=0;i<colM.length,i++) {
            cm = colM[i];
            if (cm.hasOwnProperty("formatter") &&
                functionsMapping.hasOwnProperty(cm.formatter)) {
                // fix colM[i].formatter from string to the function
                cm.formatter = functionsMapping[cm.formatter];
            }
        }
        jQuery("#dataGrid").jqGrid({/* all parameters from your code */});
    },         
    error: function(jqXHR, textStatus, errorThrown){
        alert("Error Occured!" + " | " + jqXHR.responseText + " | " +
              textStatus + " | " + errorThrown);
    }
});

UPDATED 2: It would be better to register the custom formatters and unformatters as standard formatters like it's described in the old answer or in answer one. After that one can really use the syntax like "formatter": "InterFinalPriceFormatter" and the custom defined functions $.fn.fmatter.InterFinalPriceFormatter and $.fn.fmatter.InterFinalPriceFormatter.unformat will be automatically called by jqGrid.

edited Sep 28 '17 at 15:20

answered Mar 03 '11 at 00:14

Oleg

220,925
34
403
798

I understood the inline function part but didnt get the first part. When I loop through the `result.colModelList` how do I replace with the formatter fucntion? Can you put some pseudo code example please? – silpa Mar 03 '11 at 15:47
Is it something like, var InterFinalPriceFormatter = " function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }" – silpa Mar 03 '11 at 15:53
@silpa: I updates my answer. The `var InterFinalPriceFormatter = " function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }";` defines the variable `InterFinalPriceFormatter` having `typeof(InterFinalPriceFormatter) === "string"` and `var InterFinalPriceFormatter = function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; };` defines the function and `typeof(InterFinalPriceFormatter) === function"`" – Oleg Mar 03 '11 at 16:26
Thank You. Works perfectly. I was also looking into this link[sending javascript functions over json](http://solutoire.com/2008/06/12/sending-javascript-functions-over-json/) before you updated the answer. – silpa Mar 03 '11 at 17:51
1

@volocuga: You are welcome! It's relatively old answer. Now I would you recommend better to extend `$.fn.fmatter` object to defined formatters which you could directly use as *string*: `formatter: "InterFinalPriceFormatter"`. You can find corresponding code examples [here](https://github.com/OlegKi/jqGrid-plugins/blob/master/jQuery.jqGrid.dynamicLink.js) and in [the answer](http://stackoverflow.com/a/9048483/315935). It's important that it allows to use formatter as string `formatter: "dynamicLink"` instead of function `formatter: dynamicLinkFunction`. – Oleg Apr 01 '13 at 12:33
@Oleg i am use number formatter so i want to change decimalPlaces dynamically is it poosible? – Ashish Mehta Jun 23 '13 at 10:49
@AshuMehta: You can change *any* property of `colModel` inclusive `formatoptions`. You can use `setColProp` method which simplify changes. If you load the information from the server then you can change `formatoptions` inside of `beforeProcessing` callback. In the case the filling of jqGrid will uses the changed `colModel` values. – Oleg Jun 24 '13 at 05:50
I am sorry: how do I get the column name, or ID ? rowObject.columnid won't work ! – Jess Stone Dec 17 '13 at 12:14
1

@JessStone: One can't answer on your question without to know details. Which `datatype` you use? Do you use `loadonce` (if `datatype: "json"`)? Which format have **input data** of jqGrid (which `jsonReader` you use)? How `colModel` is defined? and so on. It's better you ask *new question* where you post all the details. – Oleg Dec 17 '13 at 12:17
@Oleg [my question](http://stackoverflow.com/questions/20634037/jqsuite-php-get-column-name-or-id) – Jess Stone Dec 17 '13 at 12:26

How to add custom Formatter for jqgrid with dynamic column binding

1 Answers1

Linked