asp.net - How to render html tags in a ListItem text property?

Question

I have a DropDownList control that is populated via server side.

I use a For Each [datarow] loop and create a New ListItem

In the DataRow is a column with the ID 'Title'; this field may contain either <B> or <I> tags. (ex. "[Title] in <i>[Parent Title]</i>")

The problem I am facing is when I [DropDownList].Controls.Add([ListItem]) it renders the text literally... so it displays the <B> or <I> tags literally and doesn't bold/italicize the font.

I have tried looking all over for an answer, can someone please point me in the right direction?

Answer 1

A DropDownList control is rendered as a select element in the hhtml code, and the ListItem controls are rendered as option elements. An option element does not support html formatting in the text. Some browsers may support some styling of the entire option text, but no browser supports styling of part of the text.

If you need html formatting in the dropdown list, you either have to make your own replacement dropdown list control using DHTML, or find someone who has done it already.

Answer 2

You can try adding style attributes to each listitem, but I'm not sure how universally this is supported across different browsers.

ListItem li = new ListItem(dr["Name"], dr["Course"]);
if (bold) li.Attributes.Add("style", "font-weight:bold");
listcontrol.Items.Add(li);

Re-reading your question I noticed you want to mix normal and bold text within a single item in the list. I'm almost certain this isn't supported using the standard dropdown list. I think you'll need to have a look at using a CSS-based control that simulates a dropdown list.

Answer 3

Indeed this is not possible.

You have a couple of alternatives although they have some minor disadvantages, because they do not exactly behave like a dropdownlist. In most solutions you can only pick an option with the mouse instead of typing a couple of characters. Of course it is possible to program this behaviour but that takes some time and effort.

Alternatives I have found are:

jquery solution from marghoob suleman

jquery solution from sanchez salvador

Answer 4

If you need to have the bold and italicized formatting, I'd recommend using an .net Literal control to serve as a placeholder for your drop down list. Then upon postback or databinding, you can iterate through your result set, generate the HTML code manually (since it is not that complex) and then insert the generated HTML into the Literal control.