dropdownlist-custom-sorting-order-groups.md

title	description	type	page_title	slug	tags	res_type	ticketid
Custom Sorting Order for Groups in DropDownList	Learn how to apply a custom order to groups in the DropDownList for Blazor.	how-to	How to Set a Custom Grouping Order in Blazor DropDownList	dropdownlist-custom-sorting-order-groups	dropdownlist, blazor, telerik, grouping, custom order	kb	1666981, 1579415

Environment

Product

DropDownList for Blazor, AutoComplete for Blazor, MultiSelect for Blazor, ComboBox for Blazor, MultiColumnComboBox for Blazor

Description

I am using the grouping feature of the DropDownList. My DropDownList model has a nested model as property. The DropDownList GroupField parameter is bound to a property of the nested model. I want the groups to appear in a non-alphabetical, custom order. I can see that there is a feature request to add a sort direction option when grouping. But in the meantime how can I customize the grouping order in the DropDownList?

Solution

To sort the groups in a DropDownList by a custom order, perform a manual sorting operation in the OnRead event handler. Follow these steps:

1. Create a list of strings that represents the values of the group headers. This list will determine the preferred sorting order.
2. Cast the DataSourceResult to AggregateFunctionsGroup.
3. Sort the casted data using the Sort method with a custom comparison function.
4. Pass the sorted data as args.Data.

caption Apply a custom grouping order in the DropDownList

@using Telerik.DataSource.Extensions
@using Telerik.DataSource

<TelerikDropDownList TItem="@Product"
                     TValue="@int"
                     OnRead="@ReadItems"
                     @bind-Value="@SelectedValue"
                     GroupField="ProductCategory.CategoryName"
                     TextField="@nameof(Product.Description)"
                     ValueField="@nameof(Product.ProductId)"
                     DefaultText="Select a Product">
</TelerikDropDownList>

@code {
    private int SelectedValue { get; set; }
    private List<Product> Products = new List<Product>
        {
            new Product { ProductId = 10, Description = "Juliet Jewelery Product", ProductCategory = new ProductCategory { CategoryId = 10, CategoryName = "Jewelery" } },
            new Product { ProductId = 18, Description = "Medical Care Product", ProductCategory = new ProductCategory { CategoryId = 8, CategoryName = "Healthcare" } },
            new Product { ProductId = 19, Description = "QQ Tech Product", ProductCategory = new ProductCategory { CategoryId = 9, CategoryName = "Information Technology" } },
            new Product { ProductId = 10, Description = "Z Jewelery Product", ProductCategory = new ProductCategory { CategoryId = 10, CategoryName = "Jewelery" } },
            new Product { ProductId = 4, Description = "Delta Bond Product", ProductCategory = new ProductCategory { CategoryId = 4, CategoryName = "Defense" } },
            new Product { ProductId = 8, Description = "Health Care Product", ProductCategory = new ProductCategory { CategoryId = 8, CategoryName = "Healthcare" } },
            new Product { ProductId = 9, Description = "Tech Product", ProductCategory = new ProductCategory { CategoryId = 9, CategoryName = "Information Technology" } }
        };

    protected async Task ReadItems(DropDownListReadEventArgs args)
    {
        await Task.Delay(200);

        var preferredOrder = new List<string> { "Healthcare", "Information Technology", "Defense", "Jewelery" };

        var datasourceResult = Products.ToDataSourceResult(args.Request);

        var sortedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList();
        sortedData.Sort((a, b) =>
        {
            int indexA = preferredOrder.IndexOf(a.Key.ToString());
            int indexB = preferredOrder.IndexOf(b.Key.ToString());

            if (indexA >= 0 && indexB >= 0)
            {
                return indexA.CompareTo(indexB);
            }

            if (indexA >= 0) return -1;
            if (indexB >= 0) return 1;
            return a.Key.ToString().CompareTo(b.Key.ToString());
        });

        args.Data = sortedData;
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string Description { get; set; }
        public ProductCategory ProductCategory { get; set; }
    }

    public class ProductCategory
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
    }
}

See Also

• Telerik DropDownList for Blazor - Overview
• OnRead Event in Telerik DropDownList
• Grouping in Telerik DropDownList
• Custom Grouping Order in Grid