Kendo Grid - Using Different Icon in same Column - kendo-ui

Question

I am using Kendo UI to render data in grid format. In grid there is a column of status which can have values like completed, error, in progress etc. Now to make it more convenient I want to represent it using images. In case of single icon I can use below code in COLUMNS array:
columns:[
{
field: "oper",
title: "Operation"
},
{
field: "exedate",
title: "Date"
},
{
field: "status",
title: "Status",
template: '<img src="/resources/icons/user_green.png"/>
}]
But now, how to represent multiple icons and that to with condition based on status value that I am not able to find out?

Answer 1

You can have control over the template if you pass a function.
{
field: "status",
title: "Status",
template: function(dataRow){
var icon = 'red.png'
switch(dataRow.status){
// Assign here the icon as you please.
}
return '<img src="/resources/icons/' + icon + '"/>';
}
}
Another solution is to define CSS classes to the different statuses.
.statusicon.good
{
background: url('green.png')
}
.statusicon.bad
{
background: url('red.png')
}
And then just render the css class in your template.
{
field: "status",
title: "Status",
template: '<div class="statusicon #: status #"></div>
}