Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
811 views
in Technique[技术] by (71.8m points)

asp.net mvc - Kendo grid image column

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"

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...