Datatable or Unbound Mode bind with images?

[Ekin]

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.

[Richard Slade]

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

[Ekin]

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.        }

[Richard Slade]

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

[Richard Slade]

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

[Ekin]

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.

[Richard Slade]

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

[Ekin]

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.

[Richard Slade]

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

[Ekin]

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.

[Richard Slade]

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

[Ekin]

Richard, thank you. That does it.  I was missing this "this.radDropDownList1.AutoSizeItems = true;"  Thanks again. Have a good day.

[Richard Slade]

you too. Glad this has helped.

Best regards,
Richard