Как получить сетку Кендо для цветной валюты

Question

Я хотел бы, чтобы все отрицательные значения в этом столбце столбцов были отображены красным цветом, а все положительные значения - зеленым. Этот код для столбцов объекта массива:

{ 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

У вас есть синтаксические ошибки в шаблоне:

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

И внутри font тега вы должны показывать свои свойства:

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

Но, вместо того, используя font, используйте div и удалите format собственности от вашей колонки использовать kendo.toString(Acount, 'c') внутри шаблона:

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

Вы также можете удалить attributes из вашей колонки и использовать только CSS:

.currency { 
    text-align: right; 
} 

Demo

Answer 2

Вы делаете это так:

Кендо Сетка 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; 
}