Kendo Grid Image Column

Question

while working on an MVC4 project, I am trying to add a column to my kendo grid that displays an image.

<div id="datagrid"> @(Html.Kendo().Grid<SustIMS.Models.ConcessionModel>() .Name("datagrid_Concessions") .Columns(columns => { columns.Bound(c => c.Code).Title(ViewBag.lblCode); columns.Bound(c => c.Description).Title(ViewBag.lblDescription); columns.Template(@<text> <img src='@item.Image' /> </text> ).Title("Image"); }) 

I tried this but no luck. Also tried:

 columns.Template(@<text> <img src='../../Images/pic.png' /> </text> ).Title("Image"); 

Images are not displayed, whether I detect the src image in the controller or write it directly to the view.

I checked both this and this question, but the images are not displayed.

Can anyone help?

EDIT

Here is the concession model:

 public class ConcessionModel { public string Id { get; set; } public string Code { get; set; } public string Description { get; set; } public string TrafficOpeningDate { get; set; } public string CreationDate { get; set; } public string CreationUser { get; set; } public string Image { get; set; } ... 

The Image property is a string that contains something like "C: \ whatever \ pic.png"

Answer 1

Try it,

 columns.Template(e => { }).ClientTemplate("<img src='../../Images/pic.png'/>").Width(140).Title("Image"); 

DEMO:

View

 @(Html.Kendo().Grid<Category>().Name("people") .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(m => m.Id); }) .Read(read => read.Action("GetCategory", "Category")) ) .Columns(columns => { columns.Bound(c => c.Id); columns.Bound(c => c.ImageUrl).ClientTemplate("<img src='" + Url.Content("~/CategoryImage/") + "#=ImageUrl#' alt='#=Name #' Title='#=Name #' height='62' width='62'/>"); }) ) 

Model

 public class Category { [ScaffoldColumn(false)] public int Id { get; set; } public string Name { get; set; } [UIHint("FileUpload")] [Required] public string ImageUrl { get; set; } public string FileName { get; set; } internal static object ToDataSourceResult(Kendo.Mvc.UI.DataSourceRequest dsRequest) { throw new NotImplementedException(); } } 

controller

  public static List<Category> Category = new List<Category>(); private int _nextid = 4; static CategoryController() { Category.Add(new Category { Id = 1, Name = "Desert", ImageUrl = "Desert.jpg" }); Category.Add(new Category { Id = 2, Name = "Hydrangeas", ImageUrl = "Hydrangeas.jpg" }); Category.Add(new Category { Id = 3, Name = "Tulips", ImageUrl = "Tulips.jpg" }); } public ActionResult Index() { ViewData["Category"] = Category; return View(); } public ActionResult GetCategory([DataSourceRequest] DataSourceRequest dsRequest) { var result = Category.ToDataSourceResult(dsRequest); return Json(result); }