How to convert point to comma for any number of decimal places

Free jqgrid data comes as json string from server. It can contain different number of decimal places like

amount: "300.1", 
tax: "20.12", 
total: "320.123"

This data should appear as comma separated in jqgrid columns like

300,1    20,12    320,123

Locale file grid.locale-et.js was created for this with contents

formatter: {
    integer: {
        thousandsSeparator: " ",
        defaultValue: "0"
    },
    number: {
        decimalSeparator: ",",
        thousandsSeparator: " ",
        decimalPlaces: 2,
        defaultValue: "0,00"
    },

and template: 'number' option in colmodel is used. This shows all columns with 2 digits like

300,10    20,12    320,12

How to fix this so that columns will display proper numbers of decimal places?

I tried in colmodel

"template":"number",
"decimalPlaces":4

but it still shows 2 decimal places. Without using template proper number of decimal places is shown.

Testcase is at http://jsfiddle.net/xssnr1gn/3/

It contains

 { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.1", tax: "20.12", closed: false, ship_via: "FE", total: "320.123" },

but output is 2 decimal places for every column.

Update

If decimalPlaces: 2, is removed, jqgrid looks like

Issues:

decimal separator is changed to .
There are variable number of decimal places
The is non-understandable value 7 146 2.8
for some numbers space appears before decimal point

Data from server contains fixed number of decimal places. How to show exactly the same number of decimal places as it is in server data ?

Solution

http://jsfiddle.net/xssnr1gn/4/

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter

You need to apply the formatter and formatoptions

formatter: "number", formatoptions: {decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'}

And full code:

$(function () {
    "use strict";
    var mydata = [
            { id: "10",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
            { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.1", tax: "20.12", closed: false, ship_via: "FE", total: "320.123" },
            { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "40",  invdate: "2007-10-04", name: "test4 test4 test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "90",  invdate: "2007-09-01", name: "test9 test9 test9 test9 test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
            { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
            { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
            { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: "dd-M-yy",
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        initDateSearch = function (elem) {
            setTimeout(function () {
                initDateEdit(elem);
            }, 50);
        };

    $grid.jqGrid({
        data: mydata,
        colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
        colModel: [
            { name: "act", template: "actions" },
            { name: "name", align: "center", width: 100, editrules: {required: true} },
            { name: "invdate", width: 82, align: "center", sorttype: "date", frozen: true,
             formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
             editoptions: { dataInit: initDateEdit },            
             searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
            { name: "amount", width: 62, template: "number",
             formatter: "number", formatoptions: {decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'},
               editoptions: {
                   type: "number", 
                   step: "0.01",
                   min: "0.00",
                   max: "1000",
                   pattern: "[0-9]+([\.|,][0-9]+)?",
                   title: "This should be a number with up to 2 decimal places."
               } },
            { name: "tax", width: 45, template: "number", autoResizableMinColSize: 40 },
            { name: "total", width: 53, template: "number" },
            { name: "closed", width: 60, template: "booleanCheckboxFa" },
            { name: "ship_via", width: 76, align: "center", formatter: "select",
             edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
             stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
            { name: "note", width: 43, edittype: "textarea", sortable: false }
        ],
        cmTemplate: { editable: true, autoResizable: true },
        autoResizing: { compact: true },
        iconSet: "fontAwesome",
        rowNum: 10,
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        autoencode: true,
        pager: true,
        sortname: "invdate",
        sortorder: "desc",
        searching: { defaultSearch: "cn", searchOperators: true }
    })
        .jqGrid("filterToolbar")
        .jqGrid("gridResize");
});