CODEWITHSUNDEEP
javascriptif-statementkendo-gridconditional-statements
Aviator
Aviator

Reputation: 613

Kendo ui grid if else condition

What is wrong with my code?

I have to check in kendo UI grid is there "OrderType 20" in my column. If it is, I need to apply my css condition which includes background, but it does not work, can someone help me? thanks

template: '# if (OrderType == "OrderType 20") {#<div class='customClass'>#:OrderType#</div>#} else {#OrderType#}#'

Upvotes: 14

Views: 65023

Answers (5)

bilal chaudhari
bilal chaudhari

Reputation: 77

{
  field: "status",
  title: "Status",
  width: "80px",
  template: "#  if (status == '1' ) { # <center><span 
                style='color:green;'>Active</span></center> #
            } 
            else if (status == '0'){ # 
               <center><span style='color:red;'>Deactive</span></center> 
            #} #"
}

Upvotes: 2

Anil Singh
Anil Singh

Reputation: 4212

It might help you for nested if else for kendo ui grid row template. i.e.

template: "#if(ErrorDesc==null){# #: DeviceLabel # #}else If(ErrorDesc==""){# #: DeviceLabel # #}else{# #: DeviceText # #}#"

Upvotes: 34

Aviator
Aviator

Reputation: 613

done on easier way: thank You all

template: "#if(OrderType == 'OrderType 20') {#<div class='customClass'>#:OrderType#</div>#} else{##:OrderType##}#"

Upvotes: 8

ashutosh jambhale
ashutosh jambhale

Reputation: 250

I would recommend you to write a function and call that in template and code the logic in that. following is the example.

$(gridId).kendoGrid({
dataSource: {
    data: datasource
},
scrollable: true,
sortable: true,
resizable: true,
columns: [
 { field: "MetricName", title: "Metric", width: "130px" },
 { field: "OnTrack", title: "On Track", template:'#:changeTemplate(OnTrack)#', width: "130px", attributes: { style: "text-align: center !important;" } },
 { field: "CurrentAmount", title: "Current", template: '$ #:parseFloat(CurrentAmount).toFixed(2)#', width: "130px" },
 { field: "RequiredAmount", title: "Required", template: '$ #:parseFloat(RequiredAmount).toFixed(2)#', width: "130px" }
]
});

function changeTemplate(value)
{
   Conditions depending on Your Business Logic
if ()
    return "HTML Here";
else
    return "HTML Here";
}

Upvotes: 6

Andrea
Andrea

Reputation: 175

You can handle it in grid databound event too.Check this fiddle:

http://jsfiddle.net/Sowjanya51/krszen9a/

You can modify the databound instead of looping through all the cell collection

if(dataItem.OrderType == 'OrderType20')

Upvotes: 1

Related Questions