jqGrid - format ratio field as percent value

Question

My server code transfers some column as a ratio value, 0.0 to 1.0. I need to format and edit it as a percent. I would like to do it on JavaScript side, without modifying server-side. So if I add a custom formatter to just multiply the value by 100, display works as expected. Moreover, when I hit edit button, inline edit box also displays value as percentage. The trouble starts when I save - the value gets converted with formatter one more time, giving me things like 10000. So OK, I need symmetry here, so I create an unformatter which just divides value by 100. But that doesn't work too - now edit control displays it as a ratio which not what I wanted (although saving now works correctly).

Is there any way around without changing the server code?

Answer 1

You can skip the unformatter in favour of custom edit type, just use this in your colModel:

{ ..., edittype: 'custom', editoptions: { custom_element: function(value, options) { return $('<input type="text" value="' + value + '"/>'); }, custom_value: function(element){ return parseFloat(element.val())/100; }  }}

Answer 2

To have full support of your custom type of data like 0.0 to 1.0 displayed as percent value inclusive editing and searching you have to implements:

1. implement formatter to display the data in the grid in the custom way.
2. implement unformat to allow access to the data from its "visual representation". The method will be used by jqGrid in some situations (for example during initializing phase of form editing).
3. define sorttype, which could be some compatible type of data like 'number' or your custom sorting function.
4. use edittype: 'custom' and implement custom_element and custom_value of editoptions (see the documentation).
5. use stype: 'custom' and implement custom_element and custom_value of editoptions.

In some situations one from the steps could be skipped, but in the common case you have to think about implementation all of the steps. You should verify which steps from above are still not implemented in your solution.

The demo is the modification of the demo from the old answer and another answer. The demo is not oriented on your direct question. It shows just why and how one can full implement custom control in jqGrid. The functionally of form editing works not full in the demo only because of no server part implemented. If needed one could use the approach from the answer which shows how local form editing can be implemented in jqGrid. I don't wanted to make the code more complex as requiret to show the main purpose of the demo.