If condition in Kendo UI grid template - kendo-ui

Question

field: 'Status' ,
width: '70px' ,
template: "#if(Status == 'On Request') {#<div class='redAndBold'>#:Status</div>#}#"
I have a kendo UI grid where the "Status" is being filled in from the javascript file. The Status in the model can be "On Request", and what I want is: if it is "On Request", add a class to it, "redAndBold". The syntax in this particular example gives a "user is not defined" error.
Could anyone give me some pointers on how to correctly do this?

Answer 1

The kendo.templates depend on #=fieldName# or #:fieldName#. In the current case, there is a missing closing "#" after 'Status'. The templates are evaluated with the value of the field when bound to a data item during initialization. For executing JavaScript logic use only "#JS logic goes here#". Further information can be found here Kendo UI templates.
To avoid confusion of the template syntax, plain JavaScript function can be used instead:
template: "#=templateFunc(data)#"
// JS hander
function templateFunc(dataItem){
if(dataItem.Status== 'On Request') {
return "<div class='redAndBold'>"+dataItem.Status+"</div>";
} else{
return dataItem.Status;
}
}

Answer 2

I think you are missing a # after Status. When you inject the value of a variable it needs a # before and after. If you split the template code over several lines whilst you write it, it can be easier to get it right.
#if(Status == 'On Request') {#
<div class='redAndBold'>
#:Status#
</div>
#}#
A good check is to count the number of # symbols in your template. It should always be an even number.

Answer 3

As many people pointed out, you're missing a pound sign. I would like to point out that you can set the template as a function that returns a string. I generally do this because there are nuances with the string template such as escaping pound signs among other things:
field: 'Status',
width: '70px',
template: function(dataItem) {
var div = $('<div />');
if (dataItem.Status === 'On Request') {
div.addClass('redAndBold');
}
return div.prop('outerHTML');
}

Answer 4

Just use function for a template :
}, {
field: "TrackingNumber",
title: "#T("Admin.Orders.Shipments.TrackingNumber")",
}, {
field: "ShippingMethodName",
title: "#T("Admin.Orders.Shipments.ShippingMethodName")",
template:function(dataItem) {
var template;
var ShippingMethodPluginName = dataItem.ShippingMethodPluginName;
var IsReferanceActive = dataItem.IsReferanceActive;
var ShippingMethodName = dataItem.ShippingMethodName;
var CargoReferanceNo = dataItem.CargoReferanceNo;
var ShipmentStatusId = dataItem.ShipmentStatusId;
if (ShipmentStatusId == 7) {
return "<div align='center'><label class='label-control'><b style='color:red'>Sipariş İptal Edildi<b></label></div>";
} else {
if (ShippingMethodPluginName == "Shipping.ArasCargo" || ShippingMethodPluginName == "Shipping.ArasCargoMP") {
template =
"<div align='center'><img src = '/content/images/aras-kargo-logo.png' width = '80' height = '40'/> <label class='label-control'><b>Delopi Aras Kargo Kodu<b></label>";
if (IsReferanceActive) {
template =
template +
"<label class='label-control'><b style='color:red; font-size:20px'>"+CargoReferanceNo+"<b></label></div>";
}
return template;
}