CODEWITHSUNDEEP
c#asp.netjqueryasp.net-mvcjqgrid
Tim
Tim

Reputation: 1309

jqGrid show image in row from database

im trying to display images from records in jqGrid but it's not working.

Every record in my jqGrid has an id. To get the images out of my database table i wrote a ActionResult that returns a File (image) which is stored in the database table to the id.

Because every record has a unique id i'm having a hidden field in my page where jq should store the actual id of the actual record which is formated to the formatter.

When i look through the code with firebug, it seems that the way with the hidden field is not working.

Maybe you have an idea?

Here is my code:

<input type="hidden" name="cellvalue" value="" />
<script type="text/javascript">
$(function () {
    $("#PartialIndexGrid").jqGrid({
        url: '/@ViewContext.RouteData.Values["Controller"].ToString()/IndexGridData',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Details', 'Bearbeiten','Bild', 'Titel', 'Bearbeitungsort', 'Status'],
        colModel: [
              { name: 'Details', index: "Details", edittype: 'select', align: "center", width: 45, formatter: 'showlink', formatoptions: { baseLinkUrl: '/Shared/Details/', addParam: ''} },
              { name: 'Bearbeiten', index: "Bearbeiten", edittype: 'select', align: "center", width: 80, formatter: 'showlink', formatoptions: { baseLinkUrl: '/Shared/Edit/', addParam: ''} },
              { name: 'Bild', index: 'Bild', edittype: 'image', formatter: imageFormatter },
              { name: 'Titel', index: 'Titel'},
              { name: 'Bearbeitungsort', index: 'Bearbeitungsort' },
              { name: 'AuftragStatus', index: 'AuftragStatus'}
            ],
        pager: $("#PartialIndexGridpager"),
        rowNum: 10,
        rowList: [5, 10, 20, 30],
        sortname: 'Titel',
        sortorder: "asc",
        viewrecords: true,
        width: 942, 
        caption: ''
    })
});
function imageFormatter(cellvalue, options, rowObject) {
        $("cellvalue").val(cellvalue);
        return '<img src="@Url.Action("AuftragDBImage", "Shared", new { id = Request.Form["cellvalue"]})" />';
}; 


public ActionResult AuftragDBImage(Guid id)
    {
        try
        {
            var auftrag = _db.Auftrag.Where(x => x.Auftrag_GUID == id).Select(x => x).Single();
            return File(auftrag.Bild, "image/jpeg");
        }
        catch (Exception)
        {

            return File(pfaddummybild, "image/jpeg");
        }
    }

Regards, float

Upvotes: 1

Views: 10960

Answers (1)

Xhalent
Xhalent

Reputation: 3944

Have you registered the formatter? I think you need to do this before you load the grid. Here's an example:

<script type='text/javascript'>
  $.fn.fmatter.imageFormatter = function(cellvalue, options, rowObject) {
       return "<img src='/Shared/AuftragDBImage?id=" + cellvalue + "'/>";
  }; 
</script>

Note that you don't have a Request.Form object in the formatter (remember you're on the client), so use the regular url.

Upvotes: 1

Related Questions