[Solved] RadListBox with Item text and images

[Robert Canal]

I am trying to add an image next to the text information in the ListBox.

I have a imageList that has the images i want to display.  I tried something like this.

RadListBoxItem test1 = new RadListboxItem("ITEM" + imageList1.Images[0]);
radListBox1.Items.Add(test1);

But all i get is the "ITEMSystem.Drawing.Bitmap" instead of the image.... 

[Emanuel Varga]

Hello Robert,

You cannot use it like this, if you want to set the image when creating a ListBoxItem and set the image to appear after the text you should change the default TextImageRelation property, like this:

var listItem = new RadListBoxItem("ITEM");
listItem.Image = imageList1.Images[0];
listItem.TextImageRelation = TextImageRelation.TextBeforeImage;
radListBox1.Items.Add(listItem);

An example for this is also available in the Telerik Demos application under : DropDown & List -> List Control -> Data Bindings -> Unbound Mode

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Robert Canal]

Thanks for the solution, works like a charm.  But I have a followup question...Is it possible to add another image after the 1st image.  So it would be "ITEM" image[0] image[1]

 

[Emanuel Varga]

Hello again Robert,

It is possible to add multiple images to a RadListBox, but you will have to extend the RadListBoxItem class and change the structure of the ListBox item.

For this, you can follow Nikolay's response in this thread (http://www.telerik.com/community/forums/winforms/ui-controls/radlistbox-with-multiple-images.aspx), there is also an example on how to do this there.

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Robert Canal]

 

 

I am trying to run the following example but keep getting an error

"Unable to cast object of type 'Telerik.WinControls.Layouts.StackLayoutPanel' to type 'Telerik.WinControls.Layouts.StripLayoutPanel'.

public class MyListBoxItem : RadListBoxItem

{

protected override void CreateChildElements()

{

base.CreateChildElements();

ImageAndTextLayoutPanel layoutPanel = (ImageAndTextLayoutPanel)base.Children[2];

StripLayoutPanel stripPanel = (StripLayoutPanel)layoutPanel.Children[1];  <------ERROR

TextPrimitive itemText = (TextPrimitive)stripPanel.Children[0];

StripLayoutPanel newStripPanel = new StripLayoutPanel();

newStripPanel.Orientation = Orientation.Horizontal;

ImagePrimitive secondImage = new ImagePrimitive();

stripPanel.Children.Remove(itemText);

newStripPanel.Children.AddRange(new RadElement[] { itemText, secondImage });

 

stripPanel.Children.Insert(0, newStripPanel);

}

}

[Emanuel Varga]

Hello Robert,

I've been meaning to ask you, can't you update to the new ListControl?, because the ListBox is obsolete and will be removed soon...

If you cannot please let me know and i will try to help you with this further, but if you can, i would suggest opening a new thread in the DropDownList and ListControl section.

Best Regards,
Emanuel Varga

[Robert Canal]

I was not aware of the ListControl, I just upgraded my version and will check it out.  I will let you know if I am still having issues, I would assume I will.

Thanks

[Robert Canal]

Does the listcontrol work like a typical Listbox control....Where you can place it on your form.  Or do you have to something else to get it to show up on the form....

[Emanuel Varga]

Hello Robert,

The ListControl looks exactly like the old ListBox, but it has better performance and fully supports virtualization.
I have prepared a small proof of concept that creates a label and two images for a list Item,

namespace RadListControlCustomItems
{
    using System;
    using System.ComponentModel;
    using System.Drawing;
    using System.Windows.Forms;
    using Telerik.WinControls;
    using Telerik.WinControls.Enumerations;
    using Telerik.WinControls.Layouts;
    using Telerik.WinControls.Primitives;
    using Telerik.WinControls.UI;

    public partial class Form1 : Form
    {
        private RadListControl radListControl1;

        public Form1()
        {
            InitializeComponent();
            this.radListControl1 = new RadListControl();
            this.Size = new Size(500, 300);
            this.Load += new System.EventHandler(Form1_Load);
        }

        void Form1_Load(object sender, System.EventArgs e)
        {
            radListControl1.Dock = DockStyle.Fill;
            this.radListControl1.CreatingVisualListItem += CreatingVisualListItem;
            this.radListControl1.ItemDataBinding += this.ItemDataBinding;
            this.radListControl1.ItemDataBound += this.ItemDataBound;

            this.Controls.Add(radListControl1);

            PrepareDataSourceAndShowDropDown(1000);
        }

        private void PrepareDataSourceAndShowDropDown(int noObjects)
        {
            this.radListControl1.DataSource = null;
            this.radListControl1.DisplayMember = "Name";

            BindingList<BussinessObject> list = new BindingList<BussinessObject>();
            for (int i = 0; i < noObjects; ++i)
            {
                BussinessObject businessObject = new BussinessObject();
                businessObject.Image = Properties.Resources.combobox;
                businessObject.Image2 = i % 2 == 0 ? Properties.Resources.calendar : null;
                businessObject.Name = " Item " + (i + 1);
                list.Add(businessObject);
            }

            this.radListControl1.DataSource = list;
        }

        #region Event Handlers

        private void ItemDataBound(object sender, ListItemDataBoundEventArgs args)
        {
            CustomListDataItem listDataItem = (CustomListDataItem)args.NewItem;
            BussinessObject dataObject = (BussinessObject)listDataItem.DataBoundItem;

            listDataItem.Name = dataObject.Name;
            listDataItem.Image = dataObject.Image;
            listDataItem.Image2 = dataObject.Image2;
        }

        private void ItemDataBinding(object sender, ListItemDataBindingEventArgs args)
        {
            args.NewItem = new CustomListDataItem();
        }

        private void CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
        {
            args.VisualItem = new CustomListVisualItem();
        }

        #endregion Event Handlers

        #region Overrides

        #endregion Overrides
    }

    public class BussinessObject : INotifyPropertyChanged
    {
        #region Fields

        private string name;
        private Image image;
        private Image image2;

        #endregion Fields

        #region Properties

        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                if (this.name == value)
                {
                    return;
                }

                this.name = value;
                this.OnNotifyPropertyChanged("Name");
            }
        }

        public Image Image
        {
            get
            {
                return this.image;
            }
            set
            {
                if (this.image == value)
                {
                    return;
                }

                this.image = value;
                this.OnNotifyPropertyChanged("Image");
            }
        }

        public Image Image2
        {
            get
            {
                return this.image2;
            }
            set
            {
                if (this.image2 == value)
                {
                    return;
                }

                this.image2 = value;
                this.OnNotifyPropertyChanged("Image2");
            }
        }

        #endregion Properties

        #region INotifyPropertyChanged Implementation

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnNotifyPropertyChanged(string property)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

        #endregion INotifyPropertyChanged Implementation
    }

    public class CustomListDataItem : RadListDataItem
    {
        #region RadProperties

        public static readonly RadProperty ImageProperty = RadProperty.Register("Image", typeof(Image), typeof(CustomListDataItem), new RadElementPropertyMetadata(null));
        public static readonly RadProperty Image2Property = RadProperty.Register("Image2", typeof(Image), typeof(CustomListDataItem), new RadElementPropertyMetadata(null));
        public static readonly RadProperty NameProperty = RadProperty.Register("Name", typeof(string), typeof(CustomListDataItem), new RadElementPropertyMetadata(""));

        #endregion RadProperties

        #region Properties

        public new Image Image
        {
            get
            {
                return (Image)this.GetValue(CustomListDataItem.ImageProperty);
            }
            set
            {
                this.SetValue(CustomListDataItem.ImageProperty, value);
            }
        }

        public Image Image2
        {
            get
            {
                return (Image)this.GetValue(CustomListDataItem.Image2Property);
            }
            set
            {
                this.SetValue(CustomListDataItem.Image2Property, value);
            }
        }

        public string Name
        {
            get
            {
                return (string)this.GetValue(CustomListDataItem.NameProperty);
            }
            set
            {
                this.SetValue(CustomListDataItem.NameProperty, value);
            }
        }

        #endregion Properties

        #region Overrides

        protected override void SetDataBoundItem(bool dataBinding, object value)
        {
            base.SetDataBoundItem(dataBinding, value);
            if (value is INotifyPropertyChanged)
            {
                INotifyPropertyChanged item = value as INotifyPropertyChanged;
                item.PropertyChanged += item_PropertyChanged;
            }
        }

        #endregion Overrides

        #region Private Methods

        private void item_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Image")
            {
                this.Image = (this.DataBoundItem as BussinessObject).Image;
            }

            if (e.PropertyName == "Image2")
            {
                this.Image2 = (this.DataBoundItem as BussinessObject).Image2;
            }

            if (e.PropertyName == "Name")
            {
                this.Name = (this.DataBoundItem as BussinessObject).Name;
            }
        }

        #endregion Private Methods
    }

    public class CustomListVisualItem : RadListVisualItem
    {
        #region Fields

        private RadLabelElement label = new RadLabelElement();
        private ImagePrimitive image = new ImagePrimitive();
        private ImagePrimitive image2 = new ImagePrimitive();

        #endregion Fields

        #region Initialization

        static CustomListVisualItem()
        {
            RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.ImageProperty);
            RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.Image2Property);
            RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.NameProperty);
        }

        #endregion Initialization

        #region Overrides

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(RadListVisualItem);
            }
        }

        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            this.label.StretchHorizontally = true;

            var stack = new StackLayoutPanel { Orientation = Orientation.Horizontal };

            image.ImageScaling = ImageScaling.SizeToFit;
            image2.ImageScaling = ImageScaling.SizeToFit;

            stack.Children.Add(label);
            stack.Children.Add(image);
            stack.Children.Add(image2);

            this.Children.Add(stack);
        }

        protected override void PropertySynchronized(RadProperty property)
        {
            var dataItem = (CustomListDataItem)this.Data;

            this.image2.Image = dataItem.Image2;
            this.image.Image = dataItem.Image;
            this.label.Text = dataItem.Name;
        }

        #endregion Overrides
    }
}

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Robert Canal]

Looks like I had an issue with my update, I had to uninstall the win controls and reinstall before they would work correctly....Kind of junky but I got it to load correctly.  As for you example works like a charm, I am going to modify it a bunch though, I need it to work as a class instead of having it in my main form.  Thanks for the help....

[Emanuel Varga]

Hello again Robert,

Sorry to hear about the problems... but I'm glad to hear that it is what you were expecting, if you have any other questions, please do not hesitate to say so,

Best Regards,
Emanuel Varga

[Peter]

Hi all,

Emanuel, thank you for the solution.

Robert, please note that you should restart the Visual Studio instance after you update the references of your project. Probably, you did not perform this step during the update process. Please refer to this article which concerns the application update.

Regards,

Peter
the Telerik team

[Robert Canal]

I restarted Visual studio's multiple times, I even went so far as opening a new project and try the controls.  But for some reason none of the controls would render on the page it would only add the control to a pallet on at the bottom of the project.  Removing and re-installing is always my last option.  Hope this help explain the problem I was having.

[Robert Canal]

Emanuel

I have run into another problem....I created a class out of the code you provide and it works great when I run it in a RadForm.  But when I take that same code and put it into a RadRibbonForm it doesn't work.  Complies fine, I can step through the code and can see where the "BussinessObject" list is created, can see the "Control.DataSource=list;" has all the elements in it.  But when the RadRibbonForm opens the radListControl is blank, it acts like the controls visibility is set to false....and ideas?  Does the ControlList act funky on RadRibbonForms?

help...

[Emanuel Varga]

Hello Robert,

I tested it on a RadRibbonForm and it's working
Please check to what control collection are you adding the ListControl, in the RadRibbonForm you should add it to the Panels control collection not to the forms collection, if you need an example i will be happy to provide one.

this.panel1.Controls.Add(this.radListControl1);

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Peter]

Hi Robert,

I also cannot reproduce the issue with RadRibbonForm. Is it possible to send us a sample application where the issue can be reproduced? This will allow us to assist you further.

Please note that you have to open a new support ticket in order to attach your files.

I am looking forward to your response.

Kind regards,
Peter
the Telerik team