CODEWITHSUNDEEP
javascriptcsskendo-uikendo-grid
xinthose
xinthose

Reputation: 3838

How to get Kendo grid to color currency

I would like all negative values in this grid columns field to be displayed as red, and all positive values as green. This code is for the columns object array: 

{ field: "Amount", title: "Balance", format: "{0:c}", attributes: { style: "text-align: right;" }, template: "<font class='#if(Amount < 0) {# negative_field #} else {# positive_field #}'></font>" },

CSS

.negative_field {
    color: red;
}

.positive_field {
    color: green;
}

Upvotes: 0

Views: 1127

Answers (2)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

You have a syntax error in your template:

template: "<font class='#if(Amount < 0) {# negative_field #} else {# positive_field #}'></font>"
                                                        Hash(#) should be closes here ^

And inside your font tag you should display your property:

<font...>#= Acount #</font>

But, instead of using font, use a div and remove the format property from your column to use kendo.toString(Acount, 'c') inside your template:

template: "<div class='currency # if(Amount < 0) {#negative_field# } else { #positive_field# } #'>#=kendo.toString(Amount, 'c') #</div>"

You can also remove attributes from your column and use just css:

.currency {
  text-align: right;
}

Demo

Upvotes: 3

xinthose
xinthose

Reputation: 3838

You do it like so:

Kendo grid columns:

{ field: "Amount", title: "Balance", attributes: { style: "text-align: right;" }, template: function (e) { return format_currency(e, "Amount"); } },

Javascript:

var currency = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
});

function format_currency(e, property) {
    if (e[property] < 0) {
        return "<span class='negative_field'>" + currency.format(e[property]) + "</span>";
    }
    else if (e[property] === 0) {
        return "<span class='include_spaces'>$    -    </span>";
     }
     else {
        return "<span class='positive_field'>" + currency.format(e[property]) + "</span>";
    }
};

CSS: 

.negative_field {
    color: red;
}
.positive_field {
    color: green;
}
.include_spaces {
    white-space: pre;
}

Upvotes: 1

Related Questions