diff --git a/knowledge-base/dropdownlist-custom-sorting-order-groups.md b/knowledge-base/dropdownlist-custom-sorting-order-groups.md new file mode 100644 index 0000000000..e05eeb2717 --- /dev/null +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -0,0 +1,112 @@ +--- +title: Custom Sorting Order for Groups in DropDownList +description: Learn how to apply a custom order to groups in the DropDownList for Blazor. +type: how-to +page_title: How to Set a Custom Grouping Order in Blazor DropDownList +slug: dropdownlist-custom-sorting-order-groups +tags: dropdownlist, blazor, telerik, grouping, custom order +res_type: kb +ticketid: 1666981, 1579415 +--- + +## Environment + + + + + + + + +
ProductDropDownList for Blazor,
AutoComplete for Blazor,
MultiSelect for Blazor,
ComboBox for Blazor,
MultiColumnComboBox for Blazor
+ +## Description + +I am using the [grouping feature of the DropDownList]({%slug components/dropdownlist/grouping%}). 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]({%slug components/dropdownlist/events%}#onread) 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`]({%slug common-features-data-binding-onread%}#event-argument) to [`AggregateFunctionsGroup`](/blazor-ui/api/Telerik.DataSource.AggregateFunctionsGroup). +3. Sort the casted data using the `Sort` method with a custom comparison function. +4. Pass the sorted data as [`args.Data`]({%slug common-features-data-binding-onread%}#todatasourceresult-method). + +>caption Apply a custom grouping order in the DropDownList +````CSHTML +@using Telerik.DataSource.Extensions +@using Telerik.DataSource + + + + +@code { + private int SelectedValue { get; set; } + private List Products = new List + { + 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 { "Healthcare", "Information Technology", "Defense", "Jewelery" }; + + var datasourceResult = Products.ToDataSourceResult(args.Request); + + var sortedData = datasourceResult.Data.Cast().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]({%slug components/dropdownlist/overview%}) +- [OnRead Event in Telerik DropDownList]({%slug components/dropdownlist/events%}#onread) +- [Grouping in Telerik DropDownList]({%slug components/dropdownlist/grouping%}) +- [Custom Grouping Order in Grid]({%slug grid-custom-grouping-order%}) \ No newline at end of file