Differences

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

--- wiki:custom_formatter [2010/01/07 11:24]
vladan
+++ wiki:custom_formatter [2017/12/12 17:13] (current)
admin
@@ 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>
@@ 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
+Show image and edit image's path:
 <code javascript>
@@ Line 54: / Line 56: @@
    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, cellobject)
-{
+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>
 </code>
@@ Line 140: / Line 144: @@
 });
 </code>
-Note that in this case you will not to specify the unformat function.
+Note that in this case you will not need to specify the unformat function.