This project is read-only.
1
Vote

Display image with grid mvc

description

How to Display image with grid mvc.

file attachments

comments

luckydragon76 wrote May 13, 2016 at 1:39 PM

Not sure if you were able to figure this out. I am new to Grid.Mvc, but this is how I was able to display images in the grid. I used the HTML tag within the RenderValueAs() like this.
<div id="divGrid" class="row"> @Html.Grid(Model).Named("gvCanvassDetail").Columns(col => { col.Add(c => c.employeeId).Titled("Emp ID"); col.Add().Encoded(false).Sanitized(false).Titled("Name").RenderValueAs(c => @<a href="#" title="@c.primaryPhone" style="color:black; text-decoration:none;">@c.lastname</a>); col.Add(c => c.tsrStatusName).Titled("Status"); col.Add().Encoded(false).Sanitized(false).Titled("Bypass").RenderValueAs(c => @<div style="width:80px;"> <input type="text" class="GradientGrayInput2" style="width:60px;float:left;" /> <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>); col.Add().Encoded(false).Sanitized(false).Titled("TSR").RenderValueAs(c => @<div style="width:50px;"> <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" /> <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>); col.Add().Encoded(false).Sanitized(false).Titled("Contact").RenderValueAs(c => @<div style="width:50px;"> <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" /> <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>); col.Add().Encoded(false).Sanitized(false).Titled("Date").RenderValueAs(c => @<div style="width:100px;"> <input type="text" class="GradientGrayInput2" style="width:80px;float:left;" /> <img alt="View" src="@Url.Content("~/Content/img/Calendar2.png")" /></div>); col.Add().Encoded(false).Sanitized(false).Titled("Time").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />); col.Add().Encoded(false).Sanitized(false).Titled("Resp.").RenderValueAs(c => @<div style="width:50px;"> <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" /> <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>); col.Add().Encoded(false).Sanitized(false).Titled("Hrs. Chrg.").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />); col.Add().Encoded(false).Sanitized(false).Titled("Hrs. To Work").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />); col.Add().Encoded(false).Sanitized(false).Titled("WO").RenderValueAs(c => @<img alt="WO" src="@Url.Content("~/Content/img/WO.png")" />); }).WithPaging(10).WithMultipleFilters() </div> If needing to redirect user to a new page while passing the record ID, use the Url.Action helper like this.

@Html.Grid(Model).Named("gvCanvassQuery").Columns(col =>
{
    col.Add().Encoded(false).Sanitized(false).SetWidth(25).RenderValueAs(c => @<a href="@Url.Action("CanvassHeader/" + c.canvassId, "Home")"><img alt="View" src="@Url.Content("~/Content/img/view.png")" /></a>);
    ....
}).WithPaging(10).WithMultipleFilters()
Cheers,

luckydragon76 wrote May 13, 2016 at 1:44 PM

Sorry, couldn't read the earlier post and no way to edit it.
see details.png image for example.
Was able to display images in the grid. I used the HTML tag within the RenderValueAs() like this.
<div id="divGrid" class="row">
    @Html.Grid(Model).Named("gvCanvassDetail").Columns(col =>
    {
        col.Add(c => c.employeeId).Titled("Emp ID");
        col.Add().Encoded(false).Sanitized(false).Titled("Name").RenderValueAs(c => @<a href="#" title="@c.primaryPhone" style="color:black; text-decoration:none;">@c.lastname</a>);
        col.Add(c => c.tsrStatusName).Titled("Status");
        col.Add().Encoded(false).Sanitized(false).Titled("Bypass").RenderValueAs(c => @<div style="width:80px;">
            <input type="text" class="GradientGrayInput2" style="width:60px;float:left;" />
            <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>);
        col.Add().Encoded(false).Sanitized(false).Titled("TSR").RenderValueAs(c => @<div style="width:50px;">
            <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" />
            <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>);
        col.Add().Encoded(false).Sanitized(false).Titled("Contact").RenderValueAs(c => @<div style="width:50px;">
            <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" />
            <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>);
        col.Add().Encoded(false).Sanitized(false).Titled("Date").RenderValueAs(c => @<div style="width:100px;">
            <input type="text" class="GradientGrayInput2" style="width:80px;float:left;" />
            <img alt="View" src="@Url.Content("~/Content/img/Calendar2.png")" /></div>);
        col.Add().Encoded(false).Sanitized(false).Titled("Time").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />);
        col.Add().Encoded(false).Sanitized(false).Titled("Resp.").RenderValueAs(c => @<div style="width:50px;">
            <input type="text" class="GradientGrayInput2" style="width:30px;float:left;" />
            <img alt="View" src="@Url.Content("~/Content/img/edit_find.png")" /></div>);
        col.Add().Encoded(false).Sanitized(false).Titled("Hrs. Chrg.").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />);
        col.Add().Encoded(false).Sanitized(false).Titled("Hrs. To Work").RenderValueAs(c => @<input type="text" class="GradientGrayInput2" style="width:60px;" />);
        col.Add().Encoded(false).Sanitized(false).Titled("WO").RenderValueAs(c => @<img alt="WO" src="@Url.Content("~/Content/img/WO.png")" />);
    }).WithPaging(10).WithMultipleFilters()
</div>
If needing to redirect user to a new page while passing the record ID, use the Url.Action helper like this.
@Html.Grid(Model).Named("gvCanvassQuery").Columns(col =>
    {
        col.Add().Encoded(false).Sanitized(false).SetWidth(25).RenderValueAs(c => @<a href="@Url.Action("CanvassHeader/" + c.canvassId, "Home")"><img alt="View" src="@Url.Content("~/Content/img/view.png")" /></a>);
        ....
    }).WithPaging(10).WithMultipleFilters()
Cheers,

Satyanshu wrote May 27, 2016 at 1:08 PM

Try below code :-

columns.Add().Encoded(false).Sanitized(false).RenderValueAs(ad => @<a href="~/yourController/Edit/@ad.Id "><img class="thumb" src="~/Content/images/edit.png" height="16" width="16" alt="edit" title="Edit This Record" /></a>).SetWidth(20);


Thanks