Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:custom_formatter [2009/10/18 09:15]
tony
wiki:custom_formatter [2017/12/12 17:13] (current)
admin
Line 1: Line 1:
 ====== Custom Formatter ====== ====== Custom Formatter ======
 You can define your own formatter for a particular column. Usually this is a function. When set in the formatter option this should not be enclosed in quotes and not entered with () - show just the name of the function.For example, You can define your own formatter for a particular column. Usually this is a function. When set in the formatter option this should not be enclosed in quotes and not entered with () - show just the name of the function.For example,
 + 
 <code javascript>​ <code javascript>​
 <​script>​ <​script>​
Line 47: Line 47:
  
 The answer is: You can use your own custom unformatter function to do that. This function can be used in colModel The answer is: You can use your own custom unformatter function to do that. This function can be used in colModel
 +
 +Show image and edit image'​s path:
  
 <code javascript>​ <code javascript>​
Line 54: Line 56:
    ​colModel:​ [     ​colModel:​ [ 
       ...        ... 
-      {name:'​price',​ index:'​price',​ width:60, align:"​center",​ editable: true, unformat:myunformatfunc},+      {name:'​price',​ index:'​price',​ width:60, align:"​center",​ editable: true, formatter:​imageFormat, unformat:imageUnFormat},
       ...       ...
    ]    ]
 ... ...
 }); });
-function ​myunformatfunc ​( cellvalue, options) + 
-+function ​imageFormat( cellvalue, options, rowObject ​){ 
-   ​// do something here + return '<​img src="'​+cellvalue+'" ​/>';​ 
-   ​return ​unformated_value+
-+function imageUnFormat( cellvalue, options, cell){ 
 + return ​$('​img',​ cell).attr('​src'​)
 +}
 </​script>​ </​script>​
 </​code>​ </​code>​
  
 To the custom unformat function are passed the following parameters: To the custom unformat function are passed the following parameters:
-  * cellvalue - is the value to be unformated+  * cellvalue - is the value to be unformated ​(pure text).
   * options - is an object containing the following element   * options - is an object containing the following element
      * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid      * options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid
 +  * cellobject - is a jQuery cell object. This object can be used to obtain different things from the cell element - by example jQuery(cellobject).html() can be used to get the html content instead of the text.
  
 ===== Example ===== ===== Example =====
Line 96: Line 101:
 { {
  
-   ​return ​$(cellvalue).text().replace("​$",""​);​+   ​return cellvalue.replace("​$",""​);​
 } }
  
Line 105: Line 110:
 When we use getRowData or getCell methods or any editing module the value for this column will be 123.00 When we use getRowData or getCell methods or any editing module the value for this column will be 123.00
  
-<​note>​It is important ​to know, as seen in the examplethat to the format function we pass the value as parameter, but to the unformat function ​we pas the jQuery-ed element. </note>+===== Creating common formatter function===== 
 +There are times where you maybe want to use your custom format/​unformat functions ​in many places into the code. This of course can be done defining the functions as example ​above. 
 +We have designed the formatter module so that it can be easy extended from the developer and doing it so make the development process easy. 
 +Below we will discuss how to make your own formatter functions to be visible all into the code. \\ \\ 
 +After loading the jqGrid Java Script files you can define in script tag the following (or simple create your own file and include it into the head section) 
 +<code javascript>​ 
 +<script type="​text/​javascript">​ 
 +jQuery.extend($.fn.fmatter , { 
 +    currencyFmatter : function(cellvalue,​ options, rowdata) { 
 +    return "​$"​+cellvalue;​ 
 +
 +}); 
 +jQuery.extend($.fn.fmatter.currencyFmatter , { 
 +    ​unformat ​function(cellvalue, options) { 
 +    return cellvalue.replace("​$",""​);​ 
 +
 +}); 
 + 
 +</​script>​ 
 +</​code>​ 
 + 
 +Then in your code you just need to do: 
 +<code javascript>​ 
 +<​script>​ 
 +jQuery("#​grid_id"​).jqGrid({ 
 +... 
 +   ​colModel:​ [  
 +      ...  
 +      {name:'​price',​ index:'​price',​ width:60, align:"​center",​ editable: true, formatter:'​currencyFmatter'​},​ 
 +      ... 
 +   ] 
 +... 
 +}); 
 +</code> 
 +Note that in this case you will not need to specify the unformat function.

QR Code
QR Code wiki:custom_formatter (generated for current page)