How to add icon or image in Raddropdownlist ?

1 Answer 110 Views
DropDownList
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
Aravind asked on 28 Jul 2023, 09:02 AM

Hai,
   How to add icon or image on right side of the raddropdowlist  ?
   I am dynamically added dropdowlist via code and i need to add icon on right side of the control  (inside the control) ,In textbox i can add, like this i want to add icon, here i attach screenshot.

Thanks and Regards
Aravind

Aravind
Top achievements
Rank 2
Iron
Iron
Iron
commented on 01 Aug 2023, 03:24 AM

Hai, any reply on this i want to show icon on right side of the dropdown list for

1. If dropdown list is empty
2,if dropdown list have value like "Yes" and "No", if user selected "No", then need to show icon in right side with that value (NO)

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Aug 2023, 08:53 AM

Hello, Aravind,

I have prepared a sample code snippet for your reference which result is illustrated in the below screenshot: 

            RadListDataItem item1 = new RadListDataItem();
            item1.Image = Properties.Resources.ok;
            item1.Text = "Yes";

            RadListDataItem item2 = new RadListDataItem();
            item2.Image = Properties.Resources.cancel;
            item2.Text = "No"; ;
            this.radDropDownList1.Items.Add(item1);
            this.radDropDownList1.Items.Add(item2);

            this.radDropDownList1.DropDownStyle = RadDropDownStyle.DropDownList;
            this.radDropDownList1.ShowImageInEditorArea = true;
            this.radDropDownList1.DropDownListElement.EditableElement.TextImageRelation = TextImageRelation.TextBeforeImage;
            this.radDropDownList1.DropDownListElement.EditableElement.ImageAlignment = ContentAlignment.MiddleRight;

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

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Aravind
Top achievements
Rank 2
Iron
Iron
Iron
commented on 02 Aug 2023, 03:04 AM | edited

Hi, Thanks for reply ,
1 .Icon need to add when ddl is empty also, i mean ddl got items, but not select any item, that time need to show error icon like  validation .Below the screenshot what i want


2. Need to show icon on right side of text when select "No" , and not in the list added, below the screenshot what i want

3. Icon not showed when i select item programmatically, i mean i added icon in the list , but when select item "No" via code, icon not appear, below the screenshot

when i click dropdown list then only icon appear.

I want to show icon when select the "No" via code.

 

Regards
Aravind

 
Dess | Tech Support Engineer, Principal
Telerik team
commented on 04 Aug 2023, 02:25 PM

Hi, Aravind,

Thank you for the additional screenshots and details.

1. If you need to show an icon when no item is selected, it is appropriate to handle the SelectedIndexChanged event and set the DropDownListElement.EditableElement.Image:

        private void radDropDownList1_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
        {
            if (e.Position==-1)
            {
                this.radDropDownList1.DropDownListElement.EditableElement.Image = Properties.Resources.warning;
            }
        }

Then, you can reset the Image when a real item is selected.

2. It is possible to eliminate the image in the popup items by handling the VisualListItemFormatting event: 

        private void radDropDownList1_VisualListItemFormatting(object sender, VisualItemFormattingEventArgs args)
        {
            args.VisualItem.DrawImage = false;
        }

3. If the RadListDataItem is added with specified Image property, once this item is selected (no matter if programmatically or by the UI), the respective image is expected to be shown. Please refer to the attached sample project that I have prepared for your reference.

Please give it a try and see how it works on your end.

Tags
DropDownList
Asked by
Aravind
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or