Question

I’m working on an older ASP.NET project (not MVC I don’t think) and one of the features they require is to view a description of an item when they hover over that item in a dropdown list. This can be simply done with HTML using the following code and making use of title text:

<select>
    <option value="1" title="Option 1 Desc">Option 1</option>
    <option value="2" title="Option 2 Desc">Option 2</option>
    <option value="3" title="Option 3 Desc">Option 3</option>
</select>

Ok so how do I do this using ASP.NET DropDownList control? I have the following code:

<asp:DropDownList ID="DropDownListLocation" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownListLocation_OnSelectedIndexChanged" CssClass="editorFieldServerControl" ClientIDMode="Static"></asp:DropDownList>

And in the ‘code behind’ page:

private void PopulateFacilityDropdown(List<FacilityAvailableByLocation> facilities, int? selectedID)
{
    DropDownListFacility.DataSource = facilities;
    DropDownListFacility.DataTextField = "FacilityName";
    DropDownListFacility.DataValueField = "FacilityID";
    DropDownListFacility.DataBind();            
    DropDownListFacility.Items.Insert(0, new System.Web.UI.WebControls.ListItem("", ""));                   

    if (selectedID.HasValue && selectedID.Value > 0)
        DropDownListFacility.SelectedIndex = facilities.FindIndex(b => b.FacilityID == selectedID.Value);
        else DropDownListFacility.SelectedIndex = 0;
    }
}

Basically each facility in the list of facilities there has properties for an ID, Name, Description that I can get out. I just want to be able to put a title attribute on each <option> that gets rendered and put the description into it. Either that or be able to add a custom attribute like ‘data-description’ to each <option> tag then I can add the title into each option tag myself using a bit of jQuery which is easy enough.

I miss the days where you could just loop through a list and output the custom dropdown code manually.

Any ideas? Many thanks

Answer 1

You can manually add a title attribute to each list item like this. Give it a shot:

    private void PopulateFacilityDropdown(List<FacilityAvailableByLocation> facilities, int? selectedID)
    {
        DropDownListFacility.DataSource = facilities;
        DropDownListFacility.DataTextField = "FacilityName";
        DropDownListFacility.DataValueField = "FacilityID";
        DropDownListFacility.DataBind();            
        DropDownListFacility.Items.Insert(0, new System.Web.UI.WebControls.ListItem(String.Empty, String.Empty);                   

        foreach (FacilityAvailableByLocation f in facilities)
        {
            DropDownListFacility.Items.FindByValue(f.FacilityID).Attributes.Add("title", f.TitleDescription);
        }

        if (selectedID.HasValue && selectedID.Value > 0)
            DropDownListFacility.SelectedIndex = facilities.FindIndex(b => b.FacilityID == selectedID.Value);
            else DropDownListFacility.SelectedIndex = 0;
        }
    }

f.TitleDescription would be the property you want the title to be.