Image before Text

[Jon]

Want the image for each option to be before the text of the option

 

myDropDownList.Items.Add(new RadCheckedListDataItem("USA", false) { Image = Properties.Resources.USAFlag });

Tried every version of TextImageRelation.ImageBeforeText and DisplayStyle.Image I could find and nothing seemed to help.

 

[Dess | Tech Support Engineer, Principal]

Hello, Jon,

In order to achieve your goal, it is suitable to handle the VisualListItemFormatting event and apply the image to the RadLabelElement that shows the text:

        public RadForm1()
        {
            InitializeComponent(); new RadControlSpyForm().Show();

            this.radCheckedDropDownList1.VisualListItemFormatting+=radCheckedDropDownList1_VisualListItemFormatting;
            this.radCheckedDropDownList1.Items.Add(new RadCheckedListDataItem("USA", false) { Image = Properties.Resources.BUL });
        }

        private void radCheckedDropDownList1_VisualListItemFormatting(object sender, VisualItemFormattingEventArgs args)
        {
            RadCheckedListVisualItem visualItem = args.VisualItem as RadCheckedListVisualItem;
            if (visualItem!=null)
            {
                visualItem.DrawImage = false;
                visualItem.Label.Image = args.VisualItem.Data.Image;
                visualItem.Label.TextImageRelation = TextImageRelation.ImageBeforeText;
            } 
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Jon]

Worked as expected thanks for the help.  Resharper suggested a small tweak.  I added line 6 because image was just a bit close for my taste.

 

1.if (args.VisualItem is RadCheckedListVisualItem visualItem)
2.{
3.     visualItem.DrawImage = false;
4.     visualItem.Label.Image = args.VisualItem.Data.Image;
5.     visualItem.Label.TextImageRelation = TextImageRelation.ImageBeforeText;
6.     visualItem.Label.Padding = new Padding(10, 0, 0, 0);
7.}

 

 

ps.  Wrong Flag
pss. Shouldn't the designer have a option that accomplishes this without having to trap an event?

[Dess | Tech Support Engineer, Principal]

Hi, Jon,

I am glad that the suggested solution was helpful for achieving your goal.

As to the question about the designer, please have in mind that the RadCheckedListVisualItem are created when the popup is opened. Until then, you don't have access to the visual elements. In addition, the visual items are reused during operations like scrolling. That is why we offers the VisualListItemFormatting event to cover these scenarios and provide a suitable approach for proper customization.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik