Add image from file to Telerik Radgrid column

6 posts, 0 answers
  1. Steve
    Steve avatar
    6 posts
    Member since:
    Jul 2015

    Posted 28 Dec 2015 Link to this post

    I have a Winforms app with a Telerik RadGridView. Our HR dept has employee pictures in a known location on our file server. I am trying to include the employee picture on my RadGrid using the picture file.

    I created a column of type ImageColumn as shown:

    Dim imageColumn As New GridViewImageColumn
    imageColumn.Name = "ImageColumn"
     imageColumn.HeaderText = "Picture"
     imageColumn.ImageLayout = ImageLayout.Zoom
     RadGridView1.MasterTemplate.Columns.Add(imageColumn)

    Then I tried to loop through each row of the radGrid and assign a picture to the imageColumn:

    For i As Integer = 0 To RadGridView1.Rows.Count - 1
        RadGridView1.Rows(i).Cells("ImageColumn").Value = "c:\myPicture.jpg"
    Next

     

    Note: In this example I'm simply trying to assign the same picture to every row. Later I will add logic to add the specific picture required.

    Running this code produces a blank image column. No error is returned.

    I have tried image values of c:\myPicture.jpg, c:\\\myPicture.jpg, and @c:\myPicture.jpg

    What am I doing wrong?

    I have a Winforms app with a Telerik RadGridView. Our HR dept has employee pictures in a known location on our file server. I am trying to include the employee picture on my RadGrid using the picture file.

    I created a column of type ImageColumn as shown:

    Dim imageColumn As New GridViewImageColumn
    imageColumn.Name = "ImageColumn"
    imageColumn.HeaderText = "Picture"
    imageColumn.ImageLayout = ImageLayout.Zoom
    RadGridView1.MasterTemplate.Columns.Add(imageColumn)

    Then I tried to loop through each row of the radGrid and assign a picture to the imageColumn:

    For i As Integer = 0 To RadGridView1.Rows.Count - 1
        RadGridView1.Rows(i).Cells("ImageColumn").Value = "c:\myPicture.jpg"
    Next

    Note: In this example I'm simply trying to assign the same picture to every row. Later I will add logic to add the specific picture required.

    Running this code produces a blank image column. No error is returned.

    I have tried image values of c:\myPicture.jpgc:\\\myPicture.jpg, and @c:\myPicture.jpg

    What am I doing wrong?

    I have a Winforms app with a Telerik RadGridView. Our HR dept has employee pictures in a known location on our file server. I am trying to include the employee picture on my RadGrid using the picture file.

    I created a column of type ImageColumn as shown:

    Dim imageColumn As New GridViewImageColumn
    imageColumn.Name = "ImageColumn"
    imageColumn.HeaderText = "Picture"
    imageColumn.ImageLayout = ImageLayout.Zoom
    RadGridView1.MasterTemplate.Columns.Add(imageColumn)

    Then I tried to loop through each row of the radGrid and assign a picture to the imageColumn:

    For i As Integer = 0 To RadGridView1.Rows.Count - 1
        RadGridView1.Rows(i).Cells("ImageColumn").Value = "c:\myPicture.jpg"
    Next

    Note: In this example I'm simply trying to assign the same picture to every row. Later I will add logic to add the specific picture required.

    Running this code produces a blank image column. No error is returned.

    I have tried image values of c:\myPicture.jpgc:\\\myPicture.jpg, and @c:\myPicture.jpg

    What am I doing wrong?

  2. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    711 posts

    Posted 29 Dec 2015 Link to this post

    Hi Steve,

    Thank you for writing.

    In order to display the images, you would need to create an Image instance and assign it the Value property of the required cells. Please check my code snippet below:
    Sub New()
     
        InitializeComponent()
     
        Dim imageColumn As New GridViewImageColumn
        imageColumn.Name = "ImageColumn"
        imageColumn.FieldName = "Photo"
        imageColumn.HeaderText = "Picture"
        imageColumn.ImageLayout = ImageLayout.Center
        RadGridView1.MasterTemplate.Columns.Add(imageColumn)
     
        Me.RadGridView1.AutoSizeRows = True
        Me.RadGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
     
        For index = 1 To 10
            Me.RadGridView1.Rows.AddNew()
        Next
     
    End Sub
     
    Private Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click
        For i As Integer = 0 To RadGridView1.Rows.Count - 1
            RadGridView1.Rows(i).Cells("ImageColumn").Value = Image.FromFile("..\..\pic.png")
        Next
    End Sub

    Additional information about GridViewImageColumn​ is available here: http://www.telerik.com/help/winforms/gridview-columns-gridviewimagecolumn.html

    I am also sending you a short video showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo Merdjanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Steve
    Steve avatar
    6 posts
    Member since:
    Jul 2015

    Posted 29 Dec 2015 in reply to Hristo Merdjanov Link to this post

    Thanks Hristo, 

    I did get this to work with one small problem.

    I am trying to add the image to the master template of a hierarchical radGrid.

    If I comment out all the code that creates the child template the image displays properly, if I un-comment the child template code the image does not display.

     Is that functionality normal ?

  5. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    711 posts

    Posted 30 Dec 2015 Link to this post

    Hello Steve,

    Thank you for writing back.

    I am not sure how exactly you have set up the hierarchy and how you are applying the images. By accessing a cell located in an image column, you should be able to change its value. The images can be also set while populating the data.

    Please check the following documentation articles for additional information about bound and unbound mode of RadGridView when set in a hierarchy: Binding to Hierarchical Data AutomaticallyBinding to Hierarchical Data Programmatically.

    I am also sending you attached a project handling different use cases as well as a gif file showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back. 

    Regards,
    Hristo Merdjanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Steve
    Steve avatar
    6 posts
    Member since:
    Jul 2015

    Posted 30 Dec 2015 in reply to Hristo Merdjanov Link to this post

    I got this figured out.

    I'm doing this all with code, my steps were:

    1) Get data from SQL server and fill a DataView (one dv for the master, one dv for the child)

    2 ) Bind Master Template to dv.

    3) Add image column, then add image to the column

    4) Create Child template and bind it to datasource

    5) Define relationship

    That process did not render the image.

    I changed this process by moving the add the image column and assign the image value to the Master Template to AFTER creating the Child Template and everything works perfectly now.

    Thank you for your help !!

  7. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    711 posts

    Posted 31 Dec 2015 Link to this post

    Hi Steve,

    I am glad that I've managed to help you resolve your issue.

    Please let me know in case you need any further assistance.

    Regards,
    Hristo Merdjanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WinForms is Visual Studio 2017 Ready