jsGrid edit payment amount

Question

I am using jsGrid JQuery plugin to display and edit payments. Although it is an excellent option I am unable to use the build-in fields to edit a 'Payment Amount'. If I use the 'number' type, I am not able to enter digits after the decimal place. If I use the 'text' type I can enter non-numeric values.

Here is my code so far

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "auto",

        editing: true,
        paging: true,
        autoload: true,

        loadIndication: true,
        loadIndicationDelay: 500,
        loadMessage: "Please, wait...",
        loadShading: true,

        controller: {
            loadData: function () {
                return $.ajax({
                    type: "GET",
                    url: AJAX_URL_GET_CALCULATED_AFFECTED_PAYMENTS,
                    data: { 'startDate': startDate, 'endDate': endDate },
                    dataType: "json",
                    cache: false,
                });
            },
        },
        fields: [
            { name: "PaymentDate", title: "Payment Date", type: "text", width: 150, editing: false, },
            { name: "PaymentEndDate", title: "Payment End Date", type: "text", width: 150, editing: false, },
            { name: "PaymentStatusDisplay", title: "Payment Status", type: "text", width: 150, align: "center", editing: false, },
            {
                name: "PaymentAmount", title: "Payment Amount", type: "number", width: 100, align: "center", editing: true,
                itemTemplate: function(value) {
                    return "$" + value;
                },
            },
            { type: "control", deleteButton: false, editButton: true, editButtonTooltip: "Edit Amount", }
        ]
    });

Has anyone used this plugin got an example or managed to create a custom field type or use the field templates to edit a field in jsGrid to only allow currency values (number, comma, decimals)

Thank you in advance.

score 9 · Accepted Answer · answered Sep 26 '15 at 23:06

9

You can define your custom field like the following:

function MoneyField(config) {
    jsGrid.NumberField.call(this, config);
}

MoneyField.prototype = new jsGrid.NumberField({

    itemTemplate: function(value) {
        return "$" + value.toFixed(2);
    }

    filterValue: function() {
        return parseFloat(this.filterControl.val() || 0);
    },

    insertValue: function() {
        return parseFloat(this.insertControl.val() || 0);
    },

    editValue: function() {
        return parseFloat(this.editControl.val() || 0);
    }

});

jsGrid.fields.money = MoneyField;

Now you can use it in field specifing type="money"

answered Sep 26 '15 at 23:06

tabalin

2,303
1
15
27

Great answer. Could you also add how to separate the value like so... $1000000 to $1 000 000.00 – 6dev6il6 May 25 '17 at 15:05
1

@ShaunMorehammeredDenovan, here I guess another SO answer should help https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript. Formatting code should go inside `itemTemplate`. – tabalin May 25 '17 at 15:09

score 2 · Answer 2 · answered Oct 19 '17 at 10:01

Here's how you can format the value for display. This will would print the number in the following format $1,000.00.

Declare the function:

function formatNumberForDisplay(numberToFormat) {
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        digits: 2,
      });

      return formatter.format(numberToFormat);
}

and then just use it in the itemTemplate method:

    itemTemplate: function(value) {
        return formatNumberForDisplay(value) ;
    },

jsGrid edit payment amount

2 Answers2