Grouping in Blazor MultiColumn ComboBox Component

23 Sep 20244 minutes to read

The MultiColumn ComboBox supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the GroupByField field in the data table.

In the following sample, the product names are grouped according to their category using the GroupByField field.

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox

<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" Placeholder="Select any product" GroupByField="Category">
</SfMultiColumnComboBox>

@code {

    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Availability { get; set; }
        public string Category { get; set; }
        public double Rating { get; set; }
    }

    private string Value { get; set; } = "Smartphone";

    private List<Product> Products = new List<Product>();

    protected override Task OnInitializedAsync()
    {
        Products = new List<Product>
        {
            new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
            new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
            new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
            new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
            new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
            new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
            new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },
            new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
            new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },
            new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },
            new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },
            new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },
            new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },
            new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },
            new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },
            new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
            new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
            new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }
        };
        return base.OnInitializedAsync();
    }
}