Kendo网格图像列

时间:2014-07-29 11:40:06

标签: asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid kendo-asp.net-mvc

在MVC4项目上工作,我试图在显示图像的kendo网格中添加一列。

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

我已经尝试过,但没有运气。还尝试过:

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

无论是在控制器中定义图像src还是直接在视图中写入图像,都不会显示图像。

我已检查了thisthis个问题,但图片未显示。

有人可以帮忙吗?

修改

这是特许经营模式:

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

Image属性是一个字符串,其中包含&#34; C:\ whatever \ pic.png&#34;

1 个答案:

答案 0 :(得分:16)

试试这个,

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

<强>样本:

查看

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