Differences

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

--- wiki:custom_formatter [2009/08/10 13:24]
tony
+++ wiki:custom_formatter [2011/09/17 13:51]
artemeey
@@ Line 1: / Line 1: @@
+====== 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,
+<code javascript>
+<script>
+jQuery("#grid_id").jqGrid({
+...
+   colModel: [
+      ...
+      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
+      ...
+   ]
+...
+});
+function currencyFmatter (cellvalue, options, rowObject)
+{
+   // do something here
+   return new_format_value
+}
+</script>
+</code>
+===== Definition and parameters =====
+To the custom formatter are passed the following parameters:
+<code javascript>
+function myformatter ( cellvalue, options, rowObject )
+{
+// format the cellvalue to new format
+return new_formated_cellvalue;
+}
+</code>
+<note>Note the return in the function. This function should always return a value in order to work correctly. </note>
+  * cellvalue - is the value to be formatted
+  * 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
+  * rowObject - is a row data represented in the format determined from datatype option. If we have datatype: xml/xmlstring - the rowObject is xml node,provided according to the rules from xmlReader If we have datatype: json/jsonstring - the rowObject is array, provided according to the rules from jsonReader
+\\ \\
+===== Unformatting =====
+As mentioned in [[Predefined Formatter]] chapter all predefined types are compatible with the editing modules. This means that the numbers, links, e-mails, etc., are converted so that they can be edited correctly. Also the methods (like getRowData and getCell) that get data, used this unformat in order to get the original value.
+The question is: What to do if we use a custom formatter function and want to to have the original value back if we use editing or methods getRowData and getCell?
+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>
+<script>
+jQuery("#grid_id").jqGrid({
+...
+   colModel: [
+      ...
+      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
+      ...
+   ]
+...
+});
+function imageFormat( cellvalue, options, rowObject ){
+	return '<img src="'+cellvalue+'" />';
+}
+function imageUnFormat( cellvalue, options, cell){
+	return $('img', cell).attr('src');
+}
+</script>
+</code>
+To the custom unformat function are passed the following parameters:
+  * cellvalue - is the value to be unformated (pure text).
+  * 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
+  * 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 =====
+Below we will simulate partial currency formatter using a custom format and unformat functions
+<code javascript>
+<script>
+jQuery("#grid_id").jqGrid({
+...
+   colModel: [
+      ...
+      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},
+      ...
+   ]
+...
+});
+function currencyFmatter (cellvalue, options, rowObject)
+{
+   return "$"+cellvalue;
+}
+function  unformatCurrency (cellvalue, options)
+{
+   return cellvalue.replace("$","");
+}
+</script>
+</code>
+If the value that is inserted or updated in the grid is 123.00, the in the grid it will be displayed as: $123.00;
+When we use getRowData or getCell methods or any editing module the value for this column will be 123.00
+===== 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.

Differences

Navigation

Search

Toolbox

QR Code