This is a migrated thread and some comments may be shown as answers.

Image before Text

3 Answers 481 Views
CheckedDropDownList
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 28 Apr 2020, 06:07 PM

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.

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 29 Apr 2020, 05:05 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jon
Top achievements
Rank 1
answered on 01 May 2020, 04:04 PM

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?

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 06 May 2020, 11:00 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
CheckedDropDownList
Asked by
Jon
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Jon
Top achievements
Rank 1
Share this question
or