9

working on a MVC4 project, I'm 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've tried that but no luck. Also tried:

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

The images aren't shown, whether I define the image src in the controller or write it directly in the view.

I've checked both this and this question but the images aren't displayed.

Can anyone help?

EDIT

Here's 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"

Community
  • 1
  • 1
chiapa
  • 4,362
  • 11
  • 66
  • 106

1 Answers1

17

Try like this,

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);
        }
Jaimin
  • 7,964
  • 2
  • 25
  • 32
  • Thanks, I was testing your previous answer and both your answers work! However, now that I can show an image by writing the img src like ``, I want this `src`to be filled by the image `src` that exists in the model. How to bind that? – chiapa Jul 29 '14 at 13:47
  • @chiapa please show your model so i understand.What exactly you want. – Jaimin Jul 29 '14 at 13:53
  • Jaimin, I just posted the model in my question – chiapa Jul 29 '14 at 14:04
  • Thanks a lot Jaimin, it works now. At last I find someone who works with Kendo asp.Net MVC and understands it. I've been struggling with the kendo controls for a while, can you please see some of my questions ([this](http://stackoverflow.com/questions/24997246/kendo-grid-change-event-fires-only-once-per-row-selection) and [this](http://stackoverflow.com/questions/24883572/javascript-runtime-error-object-doesnt-support-property-or-method-in-interne)) that involve kendo that are still unanswered and I guess will remain that way...? Again, thanks a lot – chiapa Jul 29 '14 at 14:21
  • @chiapa Welcome and i will look in to your question and let you know. – Jaimin Jul 30 '14 at 04:02
  • Hi Jaimin, what if the image `src` property is a server path? I'm having trouble with [this question](http://stackoverflow.com/questions/26176564/kendo-grid-column-with-image-from-a-server), can you please help? – chiapa Oct 03 '14 at 11:36