CODEWITHSUNDEEP
asp.net-mvcgridviewdevexpress
BobRock
BobRock

Reputation: 3467

display image devexpress gridview, is this a rocket science?

Let say I have ViewModel which I use in devexpress gridview. Inside that view I display my data in devexpress gridview like this

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "myGridView";
        settings.KeyFieldName = "Id";
....
    var column = settings.Columns.Add("Id", "Id");
    column = settings.Columns.Add("Title", "MyTitle");
    ...    
    }).Bind(Model).GetHtml()

My Model is of IEnumerable and everything is ok with this code up. Now I want to display image inside that gridview before or after Id column. So I found that this should be done with Html.DevExpress().BinaryImage() But I'm stuck here for a while now. First to describe my viewmodel and how my images are stored. My Model have List<Photo> collection. I'm getting images as FileContentResult.

So I know I should use this Html.DevExpress().BinaryImage() but I dont know. Here is example which I should follow.

column = settings.Columns.Add("", "Photos");
        Html.DevExpress().BinaryImage(
            imageSettings =>
            {
                //imageSettings.Name = "Photo";
                imageSettings.Width = 100;
                imageSettings.Height = 100;
            })
            .Bind(((System.Data.Linq.Binary)DataBinder.Eval(Model, "Photo")).ToArray())
            .Render();

Update: I think I should try with this solution. Problem here is that I want to display in my grid first image from the Photos collection. I tried with with code below but with no luck. No errors.

var photoColumn = settings.Columns.Add("Photos[0].ImageData", "Foto");
        photoColumn.Visible = true;
        photoColumn.Width = 20;
        photoColumn.FieldName = "Photo.ImageData";
        photoColumn.ColumnType = MVCxGridViewColumnType.BinaryImage;
        DevExpress.Web.ASPxEditors.BinaryImageEditProperties properties = (DevExpress.Web.ASPxEditors.BinaryImageEditProperties)photoColumn.PropertiesEdit;
        properties.ImageHeight = 50;
        properties.ImageWidth = 50;

Upvotes: 0

Views: 4948

Answers (3)

Momodu Deen Swarray
Momodu Deen Swarray

Reputation: 169

Here is one that worked for me.

   settings.Columns.Add(column =>
    {
        column.SetDataItemTemplateContent(c =>
        {
            Html.DevExpress().BinaryImage(
                imageSettings =>
                {
                    imageSettings.Name = "PhotographOfCommodity" + c.KeyValue;
                    imageSettings.Width = 50;
                    imageSettings.Height = 50;
                })
                .Bind(DataBinder.Eval(c.DataItem, "PhotographOfCommodity")).Render();
        });
    });

HOPE THIS HELPS

Upvotes: 0

Mikhail
Mikhail

Reputation: 9300

In you case it is necessary to customize DataItemTemplate and customize BinaryImage inside it as follows:

settings.Columns.Add(column => {
    column.SetDataItemTemplateContent(c => {
        Html.DevExpress().BinaryImage(
            imageSettings => {
                imageSettings.Name = "Photo" + c.KeyValue;
                imageSettings.Width = 50;
                imageSettings.Height = 50;
            })
            .Bind(Here_Your_Code_To_Retrieve_Image_From_Current_DataItem)
            .Render();
    });
});

Upvotes: 0

DmitryG
DmitryG

Reputation: 17850

You do not need to use BinaryImage within the GridView directly, because MVCxGridViewColumnType supports BinaryImage.
Related link - GridView - How to load binary image within BinaryImage column

Please, also review the Grid View - Templates demo that demonstrates how to use the BinaryImage within the data rows.

Upvotes: 1

Related Questions