Datatable or Unbound Mode bind with images?

13 posts, 2 answers
  1. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 19 Nov 2010 Link to this post

    Hi,

    I am a little bit confuse as in how to bind images to a RadDropDownList. I can bind with a data table. But I don't know how to bind images to my items. So, do I have to use the Unbound Mode to bind each item in my data table and then bind images while I am iterate through the data table? I can't find a good example in the documents for this.

    Thank you for the help.

    Good day.

  2. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 20 Nov 2010 Link to this post

    Hi,

    The easiest way I find to do this is to bind your list as you would normally and then wire up the ItemDataBound event to set the image.

    For exmaple:
    Define a class (person) that has an image
    Public Class person
        Private m_Id As Integer
        Private m_Name As String
      
        Public Sub New()
        End Sub
      
        Public Sub New(ByVal name As String, ByVal id As Integer)
            m_Name = name
            m_Id = id
        End Sub
      
        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(ByVal value As String)
                m_Name = value
            End Set
        End Property
      
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set(ByVal value As Integer)
                m_Id = value
            End Set
        End Property
      
        Public ReadOnly Property TheImage() As Image
            Get
                Return New Bitmap("C:\Users\Richard\Pictures\MyImage.bmp")
            End Get
        End Property
      
    End Class

    In your form, for exmaple in form load event.. create and assign the data source to the list
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim list As New List(Of person)
        list.Add(New person("Richard", 1))
        list.Add(New person("Bob", 2))
        list.Add(New person("Stewart", 3))
        list.Add(New person("Chris", 4))
        list.Add(New person("Leisl", 1))
        list.Add(New person("Tom", 5))
        list.Add(New person("Oly", 6))
        Me.RadListControl1.DataSource = list
        Me.RadListControl1.DisplayMember = "Name"
        Me.RadListControl1.ValueMember = "Id"
    End Sub

    and then wire up the ItemDataBound event. Cast the DataBoundItem to a person and set the image for the list item
    Private Sub RadListControl1_ItemDataBound(ByVal sender As System.Object, _
        ByVal args As Telerik.WinControls.UI.ListItemDataBoundEventArgs) Handles RadListControl1.ItemDataBound
        args.NewItem.Image = DirectCast(args.NewItem.DataBoundItem, person).TheImage
    End Sub


    hope this helps but let me know if you have any other questions

    Richard


    EDIT// To answer in more detail your question, yes, you can of course use unbound mode, but the example above shows bound mode.  As you can only specify the ValueMember and the DisplayMember and not an ImageMember this, in my view is the best way to add images when using a datasource that contains images.
    Richard
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 21 Nov 2010 Link to this post

    Hi Richard,

    I am testing your above example and trying to understands how things work. But when I debug it, I got an error "NullReferencesException was unhandled: Object reference not set to an instance of an object." It looks likes the args.NewItem is null.

    1.private void radDropDownList2_ItemDataBinding(object sender, ListItemDataBindingEventArgs args)
    2.        {
    3.            args.NewItem.Image = ((person)args.NewItem.DataBoundItem).TheImage;
    4.        }

  5. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 21 Nov 2010 Link to this post

    Hello Ekin,

    Have you placed in an image at the location that is specified in the exmaple?
    My sample has an image in the person object at a specific location.
    Public ReadOnly Property TheImage() As Image 
        Get
            Return New Bitmap("C:\Users\Richard\Pictures\MyImage.bmp"
        End Get
    End Property
    But this is just an exmaple. As long as when you are binding to your datasource, each item that is being bound has an image, this will work fine.
    Let me know how you get on. If you need it in C#, I can translate it for you.
    Richard
  6. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 21 Nov 2010 Link to this post

    Hi,

    I've just noticed. In your code you have wired up ItemDataBinding and you should be wiring up ItemDataBound. that will be the issue.

    Richard
  7. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 21 Nov 2010 Link to this post

    ahhh..duhh...but I have another question. This could be a stupid question, but I can't seem figure out it out.  Your example has all the items in the RadDropDownList bind to a single image by calling TheImage class and assign the image. However, how can I insert an "if" statement to it so that I can say If the name is Richard then assign image 1.jpg, and if Bob then image 3.jpg ect..

    Thanks again.

  8. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 22 Nov 2010 Link to this post

    Hi,

    Don't worry, there are no stupid questions.
    Yes, you could do that, but it would be better to just make the "TheImage" propery part of the constructor and assign an image to each one.

    In your datasource (you said a datatable), then each row in the datatable will have it's own image won't it?

    So, in short, assign the image in your datasource the way you would do any other property. Or at least, your datasource will have the path to the image. 

    Hope that helps but let me know if there's anything else
    Richard
  9. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2010 Link to this post

    Yes, my datasource is from a datatable..but I do have another with a List<T>. The images would be in my project Resources. What was I thinking was..if name is Richard then use "Properties.Resources.myImage". So how can I use the if statement in the List<T>/datatable?

    Thanks.

  10. Answer
    Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 22 Nov 2010 Link to this post

    Hi Ekin,

    If your image is in your resources and not in your datasource, then.

    if (((person)args.NewItem.DataBoundItem).Name == "Richard")
    {
     args.NewItem.Image = // the resource image
    }

    Does that help? If you need more info though, just let me know
    Richard

  11. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2010 Link to this post

    Hi Richard,

    I would like to thank you so much for all of your help. As you can see, I am trying to learn.  All the help that I get from all the Pros..here are very helpful. We all have to learn from some where and always needed help for something. Students like me will always appreciated where there are good teachers like yourself and Emanuel ect..all from here. 

    P.S. How do I change the font and size of a RadDropDownList if the items are dynamically bound? I've tried in the UI but no luck there.

    Thank you again.

  12. Answer
    Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 22 Nov 2010 Link to this post

    Hi,

    It's no problem. I'm very glad to be able to help.

    To set the font for an item..
    1: In your form load (for exmaple) set the AutoSizeItems to true
    this.radDropDownList1.AutoSizeItems = true;


    2: In the ItemDataBound again..
    if (((person)args.NewItem.DataBoundItem).Name == "Richard")
    {
        args.NewItem.Font = new Font("Tahoma", 15);
    }


    Hope that helps but let me know if there's anything else
    Richard
  13. Ekin
    Ekin avatar
    11 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2010 Link to this post

    Richard, thank you. That does it.  I was missing this "this.radDropDownList1.AutoSizeItems = true;"  Thanks again. Have a good day.
  14. Richard Slade
    Richard Slade avatar
    3000 posts
    Member since:
    May 2009

    Posted 22 Nov 2010 Link to this post

    you too. Glad this has helped.

    Best regards,
    Richard
Back to Top
UI for WinForms is Visual Studio 2017 Ready