Grouping DropDownList items

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: January 16, 2019

HOW TO 

Grouping of DropDownList similar to RadComboBox - https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/how-to/grouping-items

SOLUTION

Sort the datasource by the GroupBy property(in the example below, the GroupBy property is Country using the Northwind database's Customers table); 

  1. In ItemDataBound event add the GroupBy property as an Attribute to the item;
  2. Create a collection/hashset containing the used GroupBy Properties;
  3. In DataBound event iterate dropdownlist.Items collection 
    4.1. If the item's attribute exists in the used GroupBy properties: 
    4.1.1. Add the property to the collection
    4.1.2. Add a new disabled DropDownList item as demonstrated below
    4.1.3. Increase "i" by 1
  4. Style the disabled item as desired

 

<style>
    .separator{
        font-style:italic;
        border-top:2px solid darkblue;
        border-bottom:1px solid grey;
    }
</style>
<telerik:RadDropDownList ID="RadDropDownList1" runat="server" RenderMode="Lightweight"
    DataSourceID="SqlDataSource1" DataTextField="ContactName" DataValueField="CustomerID"
    OnDataBound="RadDropDownList1_DataBound" OnItemDataBound="RadDropDownList1_ItemDataBound">
</telerik:RadDropDownList>
 
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient"
    SelectCommand="SELECT [CustomerID], [ContactName], [ContactTitle], [CompanyName], [Country] FROM [Customers] order by [Country]"></asp:SqlDataSource>
// Country is our GroupBy property
// Countries is our used GroupBy properties collection
public List<string> Countries = new List<string>();
 
protected void RadDropDownList1_ItemDataBound(object sender, Telerik.Web.UI.DropDownListItemEventArgs e)
{
    var dataitem = e.Item.DataItem as DataRowView;
    if (dataitem != null)
    {
        if (dataitem["Country"] != DBNull.Value)
        {
            var country = dataitem["Country"].ToString();
            e.Item.Attributes.Add("Country", country);
        }
        else
        {
            e.Item.Attributes.Add("Country", "Unknown");
        }
    }
}
 
protected void RadDropDownList1_DataBound(object sender, EventArgs e)
{
    var allItems = RadDropDownList1.Items;
    for (int i = 0; i < RadDropDownList1.Items.Count; i++)
    {
        var item = RadDropDownList1.Items[i];
        var country = item.Attributes["Country"];
        if (!Countries.Contains(country))
        {
            Countries.Add(country);
            var separatorItem = new DropDownListItem() { Text = country, CssClass = "separator", Enabled = false };
            RadDropDownList1.Items.Insert(item.Index, separatorItem);
            i++;
        }
    }
}

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.