剑道格子图片栏 [英] Kendo grid image column

问题描述

在处理 MVC4 项目时，我正在尝试向显示图像的剑道网格添加一列.

@(Html.Kendo().Grid().Name("datagrid_Concessions").Columns(columns =>{column.Bound(c => c.Code).Title(ViewBag.lblCode);column.Bound(c => c.Description).Title(ViewBag.lblDescription);columns.Template(@<img src='@item.Image'/>).title("图片");})

我试过了，但没有运气.也试过了:

columns.Template(@<img src='../../Images/pic.png'/>).title("图片");

图像不显示，无论我在控制器中定义图像src还是直接在视图中编写.

我已经检查了 this 和 this 问题，但图像未显示.

有人可以帮忙吗?

编辑

这是特许模式:

公共类 ConcessionModel{公共字符串 ID { 获取；放;}公共字符串代码 { 获取；放;}公共字符串 描述 { 获取；放;}公共字符串 TrafficOpeningDate { 获取；放;}公共字符串 CreationDate { 获取；放;}公共字符串 CreationUser { 获取；放;}公共字符串图像 { 获取；放;}...

Image 属性是一个包含类似C:whateverpic.png"的字符串

解决方案

试试这个，

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

演示:

查看

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

模型

公共类分类{[ScaffoldColumn(false)]公共 int Id { 获取；放;}公共字符串名称 { 获取；放;}[UIHint("文件上传")][必需的]公共字符串 ImageUrl { 获取；放;}公共字符串文件名 { 获取；放;}内部静态对象 ToDataSourceResult(Kendo.Mvc.UI.DataSourceRequest dsRequest){抛出新的 NotImplementedException();}}

控制器

 public static List类别 = 新列表<类别>();私有整数_nextid = 4;静态类别控制器(){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" });}公共 ActionResult 索引(){ViewData["类别"] = 类别；返回视图()；}公共 ActionResult GetCategory([DataSourceRequest] DataSourceRequest dsRequest){var 结果 = Category.ToDataSourceResult(dsRequest);返回 Json(结果);}

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:whateverpic.png"

解决方案

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

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