How to implement Grid with Images for columns for datasource as LIST

[Sourabha]

I am trying to implement a GRID having columns with different images.

Folloing is the logic for showing 'IsLocked' and 'IsLocked' as a boolean (TRUE/FALSE) on the GRID. Those boolean values we pass through
the LIST 'SeriesValues'.

I have been asked to show different images for BOOLEAN values.
for excample
if 'IsLocked' ==TRUE then
    show image1.ico
else
    show image2.ico

  <div data-bind="kendoGrid: { data:  SeriesValues, columns: [{field: 'IsLocked', title: 'Is Locked', width: 150}, {field: 'IsValid', title: 'Is Valid', width: 150},
   {field: 'PeriodEnd', title: 'Period End', template: '#= moment(new Date(PeriodEnd)).format(\'YYYY-MM-DD HH:mm\') #', width: 250},
   {field: 'Quantity', title: 'Quantity', width: 150},
   {field: 'QualityIndex',title: 'Quality Index'}], scrollable: true, sortable: true}" style="height: 200px"></div>
 </div>

[Jayesh Goyani]

Hello,

Please check below link/document.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq


Thanks,
Jayesh Goyani

[Sourabha]

I am very sorry but I couldn't make it done.

[Jayesh Goyani]

Hello,

.JS

$(document).ready(function() {

                   $("#grid").kendoGrid({

                       dataSource: {

                           type: "odata",

                           transport: {

                               read: "http://demos.kendoui.com/service/Northwind.svc/Orders"

                           },

                           schema: {

                               model: {

                                   fields: {

                                       OrderID: { type: "number" },

                                       Freight: { type: "number" },

                                       ShipName: { type: "string" },

                                       OrderDate: { type: "date" },

                                       ShipCity: { type: "string" }

                                   }

                               }

                           },

                           pageSize: 10,

                           serverPaging: true,

                           serverFiltering: true,

                           serverSorting: true

                       },

                       height: 250,

                       filterable: true,

                       sortable: true,

                       pageable: true,

                       columns: [{

                               field:"OrderID",

                               filterable: false

                           },

                           "Freight",

                           {

                               field: "OrderDate",

                               title: "Order Date",

                               width: 100,

                               format: "{0:MM/dd/yyyy}"

                           }, {

                               field: "ShipCity",

                               title: "Ship City Name",

                               width: 200

                           }, {

                               field: "ShipCity",

                               title: "Ship City",

                               template:  "<input type='checkbox' " + "# if (ShipCity == 'Lyon') { # " +  "checked='checked'" + "# } else { #" + "ElseLogicComeHere" + "# }#" + "/>"

                           }

                       ]

                   });

               });

.HTML

<div id="grid"></div>

Please check attached screenshot for more info.
When City name is 'Lyon' at that time CheckBox is checked else not.




Thanks,
Jayesh Goyani