Grouping

Organize items into logical groups with headers

Basic Grouping

Group related items together with category headers.

Selected: None
private List<SelectOption<string>> groupedCountries = new()
{
    // North America
    new() { Id = "us", Text = "United States", Group = "North America" },
    new() { Id = "ca", Text = "Canada", Group = "North America" },
    new() { Id = "mx", Text = "Mexico", Group = "North America" },
    
    // Europe
    new() { Id = "uk", Text = "United Kingdom", Group = "Europe" },
    new() { Id = "de", Text = "Germany", Group = "Europe" },
    new() { Id = "fr", Text = "France", Group = "Europe" }
};

Grouped with Search

Search through grouped items - empty groups are automatically hidden.

Try searching for a name - groups with no matches will be hidden

Multiple Groups

Organize products into multiple categories.

Selected: None

Disabled Items in Groups

Some items within groups can be disabled.