Geek Answers Handbook

How to add custom formatter for jqgrid with dynamic column binding

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

I am trying to set a custom format for columns as shown 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>

JSON is the result of an 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 }

Javascript functions for formatter:

  function CouponFormatter(cellValue, opts, rowObject) { return cellValue + "Testing coupon formatter"; } function InterFinalPriceFormatter(cellValue, opts, rowObject) { return cellValue + "Testing price formatter"; }
+6
jqgrid
source share
1 answer

If you use

 "formatter": "InterFinalPriceFormatter"

you do not set the value of the "formatter" property for the function .

One way to fix the problem is to loop through result.colModelList and make sure that you use some string value to use the "formatting" property, for which you have an implementation as a function in JavaScript. Then you can rewrite the property with the value of the corresponding formatting function.

Another way would be to use the built-in functions in formatting:

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

In how you will not have a clear separation of code and grid parameters, but you will get some encapsulation formatting inside the grid.

UPDATED . Hopefully the following code snippet (untested) can clarify what I mean by the first implementation method.

 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 custom formatters and non-formats as standard formatters, as described in the old answer or answer the question . After that, you can really use a syntax like "formatter": "InterFinalPriceFormatter" , and the user functions $.fn.fmatter.InterFinalPriceFormatter and $.fn.fmatter.InterFinalPriceFormatter.unformat will be automatically called by jqGrid.

+11
source share

More articles:


All Articles