剑道电网image列 [英] Kendo grid image column

问题描述

在MVC4项目的工作，我想添加一列显示图像我的剑道网格。

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

该图像不显示，我是否定义图像的src 在控制器或视图直接书写。

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

我检查了两个这和<一个href=\"http://stackoverflow.com/questions/16037136/defining-custom-template-for-kendo-ui-grid-column\">this但不显示的问题中的图像。

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

谁能帮助？

修改

这里是租界型号：

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

的图片属性是包含像一个字符串C：\\什么\\ pic.png

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

推荐答案

试试这个样子，

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

DEMO：

查看

@(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'/>");

    })
)

型号

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

控制器

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

这篇关于剑道电网image列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！