CODEWITHSUNDEEP
kendo-uikendo-grid
Prashant
Prashant

Reputation: 702

Kendo Grid - Using Different Icon in same Column

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?

Upvotes: 0

Views: 2176

Answers (1)

Adrian Salazar
Adrian Salazar

Reputation: 5319

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>
}

Upvotes: 1

Related Questions