How can I add option groups in ASP.NET drop down list?

Question

I have a requirement of grouping the drop down list options in ASP.NET drop down server control. Do you have any idea to how to approach the issue? I am new to ASP.NET.

Answer 1

I really liked @ScottRFrost's answer above. But, it fell two bricks short of my load as of this writing:

1. It did not persist the groupings across postbacks inside my UpdatePanel and
2. It did not persist the drop down selected value across postbacks.

Here is my extensions to the client side of his answer:

$(document).ready(function () {

    ddlOptionGrouping();

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ddlOptionGrouping);

    function ddlOptionGrouping() {
        /* Add Option Groups to asp:DropdownList */
        var $select = $('#<%= aspDropDownList.ClientID %>');
        var optGroup;
        $('#<%= aspDropDownList.ClientID %> option').each(function () {
            if ($(this).val() == '<') {
                /* Opener */
                optGroup = $('<optGroup>').attr('label', $(this).text());
            } else if ($(this).val() == '>') {
                /* Closer */
                $('</optGroup>').appendTo(optGroup);
                optGroup.appendTo($select);
                optGroup = null;
            } else {
                /* Normal Item */
                let $option = $('<option>' + $(this).text() + '</option>').attr('value', $(this).val());
                if (this.hasAttribute('selected')) {
                    $option.attr('selected', $(this).attr('selected'));
                }
                if (optGroup) {
                    $option.appendTo(optGroup);
                } else {
                    $option.appendTo($select);
                }
            }
            $(this).remove();
        });
    }
});

Answer 2

Here's what I did, with jquery-only, no server side changes:

/* Add Option Groups to Note Dropdown */
var $select = $('#<%= DropDownListIDHere.ClientID %>');
var optGroup;
$('#<%= DropDownListIDHere.ClientID %> option').each(function () {
    if ($(this).val() == '<') {
        /* Opener */
        optGroup = $('<optGroup>').attr('label', $(this).text());
    } else if ($(this).val() == '>') {
        /* Closer */
        $('</optGroup>').appendTo(optGroup);
        optGroup.appendTo($select);
        optGroup = null;
    } else {
        /* Normal Item */
        if (optGroup) {
            $('<option>' + $(this).text() + '</option>').attr('value', $(this).val()).appendTo(optGroup);
        } else {
            $('<option>' + $(this).text() + '</option>').attr('value', $(this).val()).appendTo($select);
        }
    }
    $(this).remove();
});

Then, you just add specific items as openers and closers with value < and > like so:

<asp:ListItem Text="Group 1" Value="<" />
<asp:ListItem Text="Thing 1" Value="1111" />
<asp:ListItem Text="Thing 2" Value="2222" />
<asp:ListItem Text="Thing 3" Value="3333" />
<asp:ListItem Text="Group 1" Value=">" />

Super simple, no new controls needed, only targets the select you want to change, and doesn't require every item to be in an optgroup.

Answer 3

I use this method, which avoids ViewBag and ViewData:

View model:

public class PageViewModel
{
    public int SelectedDropdownItem { get; set; }
    public IEnumerable<SelectListItem> DropdownList { get; set; }
}

Example entity model (for this example):

public class Users
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsAdministrator { get; set; }
    public bool IsDefault { get; set; }
}

Controller:

// Get list for the dropdown (this uses db values)
var userList = db.Users.ToList();

// Define the Groups
var group1 = new SelectListGroup { Name = "Administrators" };
var group2 = new SelectListGroup { Name = "Users" };

// Note - the -1 is needed at the end of this - pre-selected value is determined further down
// Note .OrderBy() determines the order in which the groups are displayed in the dropdown
var dropdownList = new SelectList(userList.Select(item => new SelectListItem
{
    Text = item.Name,
    Value = item.Id,
    // Assign the Group to the item by some appropriate selection method
    Group = item.IsAdministrator ? group1 : group2
}).OrderBy(a => a.Group.Name).ToList(), "Value", "Text", "Group.Name", -1);

// Assign values to ViewModel
var viewModel = new PageViewModel
{
    // Assign the pre-selected dropdown value by appropriate selction method (if needed)
    SelectedDropdownItem = userList.FirstOrDefault(a => a.IsDefault).Id,
    DropdownList =  dropdownList
};

View:

<!-- If needed, change 'null' to "Please select item" -->
@Html.DropDownListFor(a => a.SelectedDropdownItem, Model.DropdownList, null, new { @class = "some-class" })

Hope this helps someone to avoid what happened to me - way too much time spent finding a strongly-typed method.

Answer 4

this little improvement to the client side of mhu's excellent solution also works if there are more than one select tags.

With his version, indeed, each select tag gets filled with one copy of each option tag of each select tag

(in this example, .select2 is the class in common to all the select tags)

function filterUserGroups()
{

    var groups = {};
    $("select option[data-category]").each(function () {
        var sGroup = $.trim($(this).attr("data-category"));
        groups[sGroup] = true;
    });
    $.each(groups, function (c) {

        $(".select2").each(function () {

            $(this).find("option[data-category='" + c + "']").wrapAll('<optgroup label="' + c + '">');

        })

    });

}