Wie Kendo Gitter zu Farbe Währung

Question

Ich möchte alle negativen Werte in diesem Raster Spalten Feld als rot angezeigt werden, und alle positiven Werte wie grün. Dieser Code ist für die Spalten-Objekt-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; 
} 

Answer 1

Sie haben einen Syntaxfehler in der Vorlage:

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

Und in Ihrem font Tag sollten Sie Häuser:

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

Aber statt Verwenden Sie font, verwenden Sie div und entfernen Sie die format Eigenschaft von Ihrer Spalte kendo.toString(Acount, 'c') in Ihrer Vorlage zu verwenden:

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

können Sie auch attributes aus Ihrer Spalte entfernen und nur mit CSS:

.currency { 
    text-align: right; 
} 

Demo

Answer 2

Sie tun es, wie so:

Kendo Gitter 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; 
}