This project is read-only.

Images in columns

Apr 20, 2013 at 1:50 AM
Edited Apr 20, 2013 at 1:52 AM
Hey

I want to start off by telling that I LOVE this API! I do have a little problem. Before I used
Grid.Mvc I just used a normal bootstrap table structure using a @foreach to display all my
information and using following code to display and image:
<img class="thumb"  src="~/Content/images/ads/@item.Photo" height="50" width="500" alt="@item.Photo"/>
I have no idea how I could implement an image in the columns structure Grid.Mvc offers, this is what I currently have:
@model ISFSchoolCup.WebUI.ViewModels.AdIndexViewModel
@using ISFSchoolCup.WebUI.Extensions

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@Html.Grid(Model.ads).Columns(columns =>
           {
               columns.Add(ad => ad.Name).Sortable(true);
               columns.Add(ad => ad.Sport).Sortable(true);
               columns.Add(ad => ad.StartDate).Sortable(true);
               columns.Add(ad => ad.EndDate).Sortable(true);
               columns.Add(ad => @<img class="thumb"  src="~/Content/images/ads/@ad.Photo" height="50" width="500" alt="@ad.Photo"/>);
               columns.Add(ad => ad.Company).Sortable(true);
           }).WithPaging(20)
I get a 500 error. I there a way to display an image?

Thanks in advance!
Apr 20, 2013 at 10:17 AM
Hi,

You need to use RenderValueAs method to render custom content in the column cell:
columns.Add().RenderValueAs(ad => @<img class="thumb"  src="~/Content/images/ads/@ad.Photo" height="50" width="500" alt="@ad.Photo"/>);
Apr 20, 2013 at 12:08 PM
Edited Apr 21, 2013 at 6:31 PM
Hey

That doesn't seem to work: Image
Am i doing something wrong?
@model ISFSchoolCup.WebUI.ViewModels.AdIndexViewModel
@using ISFSchoolCup.WebUI.Extensions

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@Html.Grid(Model.ads).Columns(columns =>
           {
               columns.Add(ad => ad.Name).Sortable(true);
               columns.Add(ad => ad.Sport).Sortable(true);
               columns.Add(ad => ad.StartDate).Sortable(true);
               columns.Add(ad => ad.EndDate).Sortable(true);
               columns.Add().RenderValueAs(ad => @<img class="thumb" src="~/Content/images/ads/@ad.Photo" height="50" width="500" alt="@ad.Photo"/>);
               columns.Add(ad => ad.Company).Sortable(true);
           }).WithPaging(3)
Apr 21, 2013 at 6:31 PM
Hi,

You need disable encoding and sanitizing of the column, to render HTML markup:
columns.Add().Encoded(false).Sanitized(false).RenderValueAs(ad => @<img class="thumb" src="~/Content/images/ads/@ad.Photo" height="50" width="500" alt="@ad.Photo"/>);
Filtering functionality adds gridmvc.min.js file. But to use them - you need to reference jquery and gridmvc.css. If you do that and gridmvc.min.js produce an error - can you provide more infomation about it?
Apr 21, 2013 at 7:24 PM
Image
Works like a charm thanks!
May 12, 2013 at 6:17 AM
One of the things I had to do to get it to work was use Url.Content method, for example:

columns.Add().Encoded(false).Sanitized(false).RenderValueAs(m => @<img class="thumb" src=__"@Url.Content(m.PicturePath)"__ height="170" width="114"/>).Titled("Product Picture");
Dec 2, 2013 at 10:15 AM
Hi, I am with the same problem, but this doesn't work for me.
Can someone help me?

<%@ Import Namespace="GridMvc.Html" %>
<%@ Import Namespace="GridMvc.Sorting" %>
<div class="box-content"> <%= Html.Grid(Model).Columns(columns => { columns.Add(o => o.NomePaciente) .Titled(Resources.Mensagem.nome_paciente) .ThenSortByDescending(o => o.NomePaciente) .Filterable(true); __columns.Add() .Encoded(false) .Sanitized(false) .RenderValueAs(o => @<img src='<%: Url.Action("GetImage", "Paciente", new { id= o.IdPaciente }) %>' width="100" height="110" alt="<%: Url.Action("GetImage", "Paciente", new { id= o.IdPaciente }) %>" />));__ /* Adding not mapped column, that renders body, using inline Razor html helper */ columns.Add() .Titled(Resources.Mensagem.editar) .Encoded(false) .Sanitized(false) .RenderValueAs(o => Html.ActionLink(Resources.Mensagem.editar, "Edit", new { id = o.IdPaciente }, new { @class = "modal-link" })); columns.Add() .Titled(Resources.Mensagem.detalhes) .Encoded(false) .Sanitized(false) .RenderValueAs(o => Html.ActionLink(Resources.Mensagem.detalhes, "Details", new { id = o.IdPaciente }, new { @class = "modal-link" })); columns.Add() .Titled(Resources.Mensagem.remover) .Encoded(false) .Sanitized(false) .RenderValueAs(o => Html.ActionLink(Resources.Mensagem.remover, "Delete", new { id = o.IdPaciente }, new { @class = "modal-link" })); }).WithPaging(5).Sortable().ToHtmlString()%> </div>
Dec 3, 2013 at 2:36 AM
Hi,
.RenderValueAs(o => @<img src='...'
It is a Razor (.cshtml) view engine syntax. You can't use them on aspx pages
Feb 28, 2014 at 2:20 PM
Hi,

I would like to ask about adding something like this:
columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .RenderValueAs(item =>
            "<img src=" + @Url.Action("ImagesAction", "Training", new { id = item.ID }, null) + " />");
this is the Action code:
public ActionResult ImagesAction(string id)
        {
            ClassificationSet classificationSet = _training.GetClassificationSetByID(id);

            return File(
                        GetByteArray(classificationSet.Image)
                        , "image/png"
                );

        }
I'm doing this because the image isn't in the file system.
Mar 1, 2014 at 6:38 AM
HI
Try to render image through razor helper:
@helper RenderImage(YourType item)
{
    <img src="@Url.Action("ImagesAction", "Training", new { id = item.ID }, null)" />
}

@Html.Grid(Model).Columns(columns=> {

.... 


columns.Add()
            .Encoded(false)
            .Sanitized(false)
            .RenderValueAs(item => RenderImage(item));


})
Mar 4, 2014 at 8:02 PM
Thank you very much.
It is working.