Jqgrid currency format

Question

I have a jqgrid, its option :formatter => "currency"

It is converting number 5 as $5.00, but this is a credit amount so I need to display it as ($5.00) instead of $5.00.

Any recommendations what should I change in :formatter => "currency"?

Oleg · Answer 1 · 2011-05-13T17:08:31.477

23

You should examine options of the currency formatter. You can define prefix, and suffix. For example you can use the following options

formatter:'currency',
formatoptions: {prefix:'($', suffix:')', thousandsSeparator:','}

The demo shows in the 'Total' column the numbers in the form which you need.

enter image description here

edited May 13 '11 at 17:08

answered May 13 '11 at 15:43

Oleg

220,925
34
403
798

its show me $5.00, i need ($5.00) instead of $5.00, the below code for this column:

    
 <%= jqgrid(" ", "registration_transactions_grid", "/registration_transactions/grid_data/#{grid_data_key}/#{grid_data_id}",
 [
    { :field => "id",                 :hidden => true },
   { :field => "amount",             :label => "Amount",           :width => 50,   :name => "amount",  :index => "amount",  :align => "right", :formatter => "currency"  }
   ]

 %>

– Adnan Khan May 13 '11 at 16:15

Adnan Khan: You wrote "its show me $5.00". **What** show you? [My demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridCurrency.htm) shows ($5.00) and not $5.00. I don't understand the syntax which you use. jqGrid is written in **JavaScript**. It you use some preformatter you need add `formatoptions` with `prefix` and `suffix` lake I described. I can not find there in the code which you posted, so you will have no parentheses over the currency value. – Oleg May 13 '11 at 16:36
@Oleg, I am also need to use currency formatter. But in my case I need to check one condition. if amount is **+ve** need to display like **$180.00**. if amount is **-ve**, need to display as **($180.00)**. Can you suggest any idea. – vissu May 04 '12 at 09:29
1

@vissupepala: You can use custom formatter in the case for example. Look at [the answer](http://stackoverflow.com/a/10245286/315935). It's not exactly what you need, but very close. If you would have implementation problems you can ask new question. – Oleg May 04 '12 at 11:39
@Oleg, I have implemented custom formatter. Thanks for your guidance. – vissu May 04 '12 at 14:16
I have a question: Adding `'$'` as a prefix via `formatoptions` works fine while I am editing the cell. But once the grid gets reloaded (via AJAX), the $ disappears. What can I do in this case? (datatype: "json") Do I need to provide the $ prefix in the back end function? I thought this is just for formatting ... – Matt Apr 12 '18 at 13:04
@Matt: Formatter works in all situations. See https://jsfiddle.net/OlegKi/89xphyu9/. The goal of formatter: the usage of clean language independent data transferred from the server (numbers, iso dates and so on). The data should be formatted *on the client side* by formatter (decimal point, thousands separator, prefix and so on). Thus it would be bad to format the data on the server. I can only guess, that you either reload grid in the wrong way or fill the grid in a wrong way or you use some very old version of jqGrid. – Oleg Apr 12 '18 at 14:02
Thank you for the hints you gave, I'll check which one applies to my code. It's a legacy application so it is not the latest version of jqGrid, but it could as well be a parameter issue (jqGrid settings). – Matt Apr 12 '18 at 14:07
@Matt: You can post *new question* with more details of your implementation if you would get implementation problems. Another remark: I try to hold maximal compatibility to old 4.x version in the [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork, which I develop. One needs typically only to replace URLs to 2/3 jqGrid files to upgrade to free jqGrid 4.15.4. After that you can make additional modifications to use new features. – Oleg Apr 12 '18 at 14:14
You are right, it is actually an 4.x version used in the code. So if it turns out it is not configuration but a bug, I'll look into the fork. Many thanks for your help so far. – Matt Apr 12 '18 at 14:26
@Oleg - I have now created a **[fiddle](https://jsfiddle.net/gpa2qc2f/11/)**, which simulates the scenario. But editing + submit I cannot implement in a fiddle. However, here the issue does not show up - the $ is displayed correctly. Do you have an idea, how I can add this to the sample? Then I would create a new question. – Matt Apr 13 '18 at 13:19
I have added some more config items that I think could be relevant, but it still won't be editable. **[Here](https://jsfiddle.net/gpa2qc2f/35/)** is the updated fiddle. – Matt Apr 13 '18 at 13:45
@Matt: Sorry, but I can't understand what you want to implement with the code. First of all you **replace** predefined formatter currency (`$.fn.fmatter.currency`). Why you could not use *another* name for your custom formatter? You replace *formatter* holding original unformatter. You can get problems with editing because *unformatter* be used during editing. Other parts are unclear too. What columns should be editable? Which editing mode you want to use? If you want to use Echo service of JSFiddle, then it's described [here](http://doc.jsfiddle.net/use/echo.html#json). – Oleg Apr 13 '18 at 14:47
@Matt: In case of jqGrid one should use `url: '/echo/json/', postData: { json: JSON.stringify(pagedData) }`. The properties of `postData` parameter (`json`, for example) will be sent to the server. It's what one needs. If you need to use cell editing mode then you need just add `cellEdit: true` parameter to jqGrid instead of calling `setCell` explicitly inside of `onCellSelect` callback. – Oleg Apr 13 '18 at 14:48
@Matt: You can use `postData: { json: JSON.stringify(gridSampleData) }` instead of `postData: { json: JSON.stringify(pagedData) }`. How many rows could be in the grid totally? Is `loadonce: true` good for you? Try the performance of local paging, sorting and filtering in [the demo](https://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-5000-25-free-jqgrid.htm) or [this one](https://www.ok-soft-gmbh.com/jqGrid/OK/performane-15-60000-25-free-jqgrid.htm) – Oleg Apr 13 '18 at 14:54
I've updated the sample as you suggested, [here](https://jsfiddle.net/gpa2qc2f/63/) is the updated code. Yes, I think loadonce:true should be fine. The cost column should be editable. – Matt Apr 13 '18 at 15:06
@Matt: You last demo had two items with **the same** `id: 20`, which produces id duplicates. The code still have `onCellSelect` callback, which use `$('#Grid4').jqGrid('setCell', rowid, 'flag', true);`, but there are no column with the name `flag`. What you want to do? I read `setCell` before in a wrong way as `editCell`. Which editing mode you want to use? What columns need be editable? I really still don't understand what the code should do. – Oleg Apr 13 '18 at 15:15
I removed that onCellSelect event completely, as it is not needed for the demo. And I fixed the duplicate ID. Now the remaining demo is [this](https://jsfiddle.net/gpa2qc2f/75/). The 2nd column (cost) should be editable and in the real code there is a SAVE button which submits the edited values to the web server via AJAX call. But the demo isn't editable (and I don't know why). – Matt Apr 13 '18 at 15:24
@Matt: Additionally, I see that you defined `$.fn.fmatter.myCurrencyFmt` and you use now `formatter: 'myCurrencyFmt'`, but you still don't defined *unformatter* for the `formatter: 'myCurrencyFmt'`. How the data formatted by `myCurrencyFmt` could be extracted? You use `formatoptions: { prefix: '$', suffix: '' }` in the column `Cost`, but your formatter `myCurrencyFmt` don't use the options. You should define `$.fn.fmatter.myCurrencyFmt.unformat` or to use just standard currency formatter: https://jsfiddle.net/OlegKi/gpa2qc2f/90/ – Oleg Apr 13 '18 at 15:39
@Matt: Of cause you can use inline editing and `formatter: "actions"` or `template: "actions"` instead of cell editing. One will have "Save" button in the way. See https://jsfiddle.net/OlegKi/gpa2qc2f/93/ – Oleg Apr 13 '18 at 15:42
Many thanks for the examples! I'll try to make the legacy code I "inherited" looking nicer (and clearer) and hopefully will find the issue that way. – Matt Apr 13 '18 at 15:51
@Matt: You are welcome! If you would like to use your custom formatter then you can look at [the old answer](https://stackoverflow.com/a/38877272/315935), which shows that one need define both `$.fn.fmatter.yourFormatterName` and `$.fn.fmatter.yourFormatterName.unformat` (one can do this without the usage of `$.extend` of cause). – Oleg Apr 13 '18 at 15:57
That is something I learned from you, I thought the unformatter would be optional. – Matt Apr 13 '18 at 16:00

Jqgrid currency format

1 Answers1