This is a migrated thread and some comments may be shown as answers.

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

3 Answers 2448 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sourabha
Top achievements
Rank 1
Sourabha asked on 13 Dec 2012, 02:44 PM

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>

3 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 15 Dec 2012, 01:02 PM
Hello,

Please check below link/document.

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


Thanks,
Jayesh Goyani
0
Sourabha
Top achievements
Rank 1
answered on 18 Dec 2012, 12:42 PM
I am very sorry but I couldn't make it done.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 19 Dec 2012, 07:47 AM
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
Tags
Grid
Asked by
Sourabha
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Sourabha
Top achievements
Rank 1
Share this question
or