How to force a line break in the listitems of a dropdownlist?

Question

I have a dropdownlist that I already have manually databinding. I currently get the data, loop through each item, and depending on values in the item, change the css for the individual ListItem.

For example:

foreach (Site mySite in myList)
        {
            ListItem li = new ListItem(mySite.FullAddress, mySite.Id.ToString());
            if (mySite.DisabledFlg)
            {
                li.Attributes.Add("style", "color:#999");
            }
            this.Items.Add(li);
        }

I'm trying to force the text in the listitem to break at certain points. The string that I retrieve from the datasource currently has a "\r\n" everywhere where there should be a line break. This works fine for display in a normal textbox, but it doesn't work on the listitem. I've tried replacing the "\r\n" with a "<br>" but when I do that, it just displays <br> in the listem along with the rest of the text. I've tried wrapping the listitem contents in a "div" with a width attribute, but it also just display the "div" tag literally in the ListItem text. I've also tried adding the following to the ListItem attributes at bind:

                li.Attributes.Add("width", "100px");

But that hasn't resulted in any change either.

I've seen custom drop down list controls that have multiline listitems in them. How do I acheive the same result?

Answer 1

I don't think this is possible. The DropDownList control renders a <select> element and it's just not designed for its child <option> elements to have line breaks.

Another way to achieve the same effect however would be to process your data before binding it to the DropDownList. You could split on the line feeds and just assign the same DataValue to those duplicated items. You would end up with HTML like the following:

<select>
    <option value="A">A</option>
    <option value="A">A.2</option>
    <option value="B">B</option>
</select>

You might also be able to find some fancy Javascript controls or plug-ins that would simulate a dropdown control but allow you more flexibility than the plain select element.

Answer 2

I think you have to add the line break as it's own list item. You can then do some Javascript and/or validation to prevent the user from selecting that "item."