Have Image file path - Display column with image

[Ahmuser]

Hi,

I have a database with the field that contains the filename of an image that I would like to display in am Rad GridViewImage Column.  

- The databse itself does not contain the image just the filename.
- The field only contains the filename - not the full path (all images are stored in a single directory)
- The width of all the images are the same, however the height will vary.

I need to load the image at runtime for every record that is displayed.

I have searched everywhere, but cannot find how to achieve this.

I am using VB.NET 2010

Kindly assist.

[Geert]

I also need an answer tothis question.

I have my gridview binded to a datasource. in my datasource there is a field which indicates if it is a folder or a file. Then I have tot show the correct icon in front of the row.

Anyone knows which event I can use for this??

Where is the RowDataBound event??

[Geert]

Anyone who knows the answer?

[Martin Vasilev]

Hello folks,

You can load an image to a RadGridView cell element by using a custom cell element and adding an ImagePrimitive inside. Please consider the following code snippet. It demonstrates how you can create a custom cell which loads an image from the path specified in the value of the cell:

void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.Row is GridDataRowElement && e.Column is GridViewDataColumn &&
        ((GridViewDataColumn)e.Column).UniqueName == "pic")
    {
        e.CellType = typeof(CustomGridImageCellElement);
    }
}
public class CustomGridImageCellElement : GridDataCellElement
{
    ImagePrimitive _imagePrimitive;
    public CustomGridImageCellElement(GridViewDataColumn column, GridRowElement row)
        : base(column, row)
    {
    }
    public override void Initialize()
    {
        base.Initialize();
        _imagePrimitive = new ImagePrimitive();
        _imagePrimitive.Margin = new Padding(3);
        this.Children.Add(_imagePrimitive);
        this.AutoSizeMode = RadAutoSizeMode.WrapAroundChildren;
    }
    protected override void SetContentCore(object value)
    {
        if (this.Value != null && this.Value != DBNull.Value)
        {
            _imagePrimitive.Image = Bitmap.FromFile(this.Value.ToString());
        }
        else
        {
            _imagePrimitive.Image = null;
        }
    }
}

I hope this helps. Let me know if you have any additional questions.

Regards,
Martin Vasilev
the Telerik team

[Carisch]

I have a fully qualified url, instead of a file path.  Any recommendations?

Thanks

[Richard Slade]

Hello Brian,

You should be able to use the system above, but just get the image from a stream instead. E.g.

Dim request As Net.HttpWebRequest = DirectCast(Net.HttpWebRequest.Create("http://www.server.com/image.jpg"), Net.HttpWebRequest)
Dim response As Net.HttpWebResponse = DirectCast(request.GetResponse, Net.HttpWebResponse)
Dim img As Image = Image.FromStream(response.GetResponseStream())

hope that helps
Richard

[Carisch]

Thanks Richard I tried this in the mean time, and it worked, but I'm having difficulty getting the rows to size correctly

WebClient wc = new WebClient();

byte[] data = wc.DownloadData(value.ToString());

MemoryStream ms = new MemoryStream(data);

Bitmap bitmap = new Bitmap(ms);

_imagePrimitive.Image = bitmap;

protected override void SetContentCore(object value)
{
    if (this.Value != null && this.Value != DBNull.Value && value.ToString().StartsWith("http://"))
    {
        WebClient wc = new WebClient();
        byte[] data = wc.DownloadData(value.ToString());
        MemoryStream ms = new MemoryStream(data);
        Bitmap bitmap = new Bitmap(ms);
        _imagePrimitive.Image = bitmap;
    }
    else
    {
        _imagePrimitive.Image = null;
    }
}

[Richard Slade]

Hi Brian,

Have you tried the following:

this.radGridView1.AutoSizeRows = True;

richard

[Carisch]

I did, and there was no change to the appearance.    The last two lines did solve the height problem, but the width is still funky.  I think it has to do with the fact that I have set this on form load:
radGridView1.MasterTemplate.BestFitColumns();

WebClient webclient = new WebClient();
byte[] data = webclient.DownloadData(value.ToString());
MemoryStream stream = new MemoryStream(data);
Bitmap bitmap = new Bitmap(stream);
_imagePrimitive.Image = bitmap;
RowInfo.Height = bitmap.Height;
ColumnInfo.Width = bitmap.Width;

[Richard Slade]

Hi Brian,

This will set the width of the column to the width of the last image. You need to set the width to the width of your widest image.
Hope that helps
Richard

[bob]

I have inserted the provided code and applied what I believe to be the appropriate references. I am receiving an error on the base.Initialize(); line which says "void GridVirtualizationCellElement.Initialize(GridViewColumn column, GridRowElement Row)  Error: No overload for method 'Iniatalize' takes 0 arguments".

The only change to the code was the ((GridViewDataColumn)e.Column).UniqueName  line to ((GridViewDataColumn)e.Column).Name

What am I missing?

[Carisch]

I tweaked to work with the latest release that I have.

protected override void InitializeFields()
{
    base.InitializeFields();
    _imagePrimitive = new ImagePrimitive();
    this.Children.Add(_imagePrimitive);
}

I also want to set a specific size, and this is what I came up with.  Would love to hear feedback if there is an easier way.

protected override void SetContentCore(object value)
{
    if (value != null && value != DBNull.Value)
    {
        HttpWebRequest request = HttpWebRequest.Create(value.ToString()) as HttpWebRequest;
        HttpWebResponse response = request.GetResponse() as HttpWebResponse;
        Image img = Image.FromStream(response.GetResponseStream());

        Bitmap sized = new Bitmap(80, 115);
        Graphics g = Graphics.FromImage(sized);
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.DrawImage(img, 0, 0, 80, 115);
        g.Dispose();

        _imagePrimitive.Image = sized;
        RowInfo.Height = sized.Height;
        ColumnInfo.Width = sized.Width;
    }
    else
    {
        _imagePrimitive.Image = null;
    }
}

[David]

Martin,

This is exactly what we are needing to do in our project, but it is in VB.net.  We have converted your sample using the code converter, but get errors on the Public Overrides Sub Initialize that say "sub Initialize cannot be declared Overrides because it does not override a sub in a base class".

Is it possible to provide a code sample in VB to display an image to a RadGridView cell element by using a custom cell element and adding an ImagePrimitive inside?

Thanks in advance.

[David]

Martin,

This is exactly what we are needing to do in our project, but it is in VB.net.  We have converted your sample using the code converter, but get errors on the Public Overrides Sub Initialize that say "sub Initialize cannot be declared Overrides because it does not override a sub in a base class".

Is it possible to provide a code sample in VB to display an image to a RadGridView cell element by using a custom cell element and adding an ImagePrimitive inside?

Thanks in advance.

[Stefan]

Hi David,

Here is the custom cell class in VB updated for the latest version of the suite:

Public Class CustomGridImageCellElement
    Inherits GridDataCellElement
    Private _imagePrimitive As ImagePrimitive
    Public Sub New(column As GridViewDataColumn, row As GridRowElement)
        MyBase.New(column, row)
    End Sub
    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()
        _imagePrimitive = New ImagePrimitive()
        _imagePrimitive.Margin = New Padding(3)
        Me.Children.Add(_imagePrimitive)
        Me.AutoSizeMode = RadAutoSizeMode.WrapAroundChildren
    End Sub
    Protected Overrides Sub SetContentCore(value As Object)
        If Me.Value IsNot Nothing AndAlso Not Me.Value.Equals(DBNull.Value) AndAlso File.Exists(Me.Value.ToString()) Then
            _imagePrimitive.Image = Bitmap.FromFile(Me.Value.ToString())
        Else
            _imagePrimitive.Image = Nothing
        End If
    End Sub
End Class

I hope this helps.

Regards,
Stefan
Telerik

[Vlad]

Very long. Cell already contains URl of xml. Why go again to the server to download pictures? And if the path http :/ / server.com / bhbvhdhbvvbf.jpg and ordered picture' need? Again, view the entire xml file swing? And then how all compare in the table? Use Fildname does not work?

[Stefan]

Hi,

FieldName will not work as in the data source there is just link to the image, not the image itself. I agree that there can be improvement in this approach to use the already downloaded images instead of getting them again. Feel free to post your suggestion.

Regards,
Stefan
Telerik

[Vlad]

I do not know. I'm thinking about it. Maybe try something RowFormating apply BitmapImage (URI) -> Imag From existing Cell?

Offtop - 2014 vs 2013 scrteenshots WinForms.

[Vlad]

I do not know. I'm thinking about it. Maybe try something RowFormating apply BitmapImage (URI) -> Imag From existing Cell?

[Vlad]

In windows there Pitsture Pitsturboks boxing. "PicBox.Load (Response.Elements (" user "). Descendants (" photo_medium "). Value.ToString)" Loading precisely RLC. It's so impossible?

[Vlad]

sorry *URL

[Vlad]

Dim Response As XElement

            Response = XElement.Load("https://server.ru/method/users.get.xml?uids=" & strUsers & "&fields=status,counter,online,wall_comments,last_seen,activity,can_write_private_message,can_see_all_posts,can_post,contacts,screen_name,domain,sex,photo_medium,photo") '&access_token=" & VK_Online.VKOnline.TextBox1.Text)

            xmlUsers = XDocument.Parse(Response.ToString)

 

 

            Dim items = From item In xmlUsers.Descendants("user") Select New Users() With { _

            .No = n, _

            .UID = item.Element("uid"), _

            .Name = item.Element("first_name").Value & " " & item.Element("last_name").Value & vbCrLf & item.Element("uid").Value, _

            .Sex = item.Element("sex"), _

            .Data = Format(New DateTime(1970, 1, 1, 4, 0, 0).AddSeconds(item.Elements("last_seen").Descendants("time").Value), "dd/MM/yyyy") & vbCrLf & Format(New DateTime(1970, 1, 1, 4, 0, 0).AddSeconds(item.Elements("last_seen").Descendants("time").Value), "HH:mm:ss") & vbCrLf & "(OS/" & item.Elements("last_seen").Descendants("platform").Value & ")", _

            .Time = Format(New DateTime(1970, 1, 1, 4, 0, 0).AddSeconds(item.Elements("last_seen").Descendants("time").Value), "HH:mm:ss"), _

            .ET = "(" & DateDiff(DateInterval.Minute, Now, New DateTime(1970, 1, 1, 4, 0, 0).AddSeconds(item.Elements("last_seen").Descendants("time").Value)) + 15 & ")", _

            .Status = item.Element("online"), _

            .OS = item.Elements("last_seen").Descendants("platform").Value, _

            .App_ID = item.Element("online_app"), _

            .Mob = item.Element("online_mobile"), _

            .Del = item.Element("deactivated"), _

            .Photo = item.Element("photo").Value, _

            .Activity = item.Element("activity")}

            Dim contacts As New ObservableCollection(Of Users)()

            For Each contact As Users In items

                            PictureBox1.Load(contact.Photo)

                contacts.Add(contact)

            Next contact
Stupid way, but it is edtgstvenny works.

[Stefan]

Thank you for sharing this solution with the community. I have updated your Telerik Points for your time and efforts. 

Regards,
Stefan
Telerik