Kendo grid image column

Question

working on a MVC4 project, I\'m trying to add a column to my kendo grid that displays an image.

    @(Html.Kendo().Grid

        
                      

              相关标签:
       
      

Answer 1

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