From 878667b77abbe2cf7c520ba1b0c15190109f8498 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 10 Oct 2024 14:40:30 +0000 Subject: [PATCH 1/5] Added new kb article dropdownlist-custom-sorting-order-groups --- ...ropdownlist-custom-sorting-order-groups.md | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 knowledge-base/dropdownlist-custom-sorting-order-groups.md 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..76c6540d51 --- /dev/null +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -0,0 +1,116 @@ +--- +title: Custom Sorting Order for Groups in DropDownList +description: Learn how to apply a custom sorting order to groups in the DropDownList for Blazor. +type: how-to +page_title: How to Set a Custom Sorting Order for Groups 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
Version6.2.0
+ +## Description + +I using the [grouping feature of the DropDownList]({%slug components/dropdownlist/grouping%}). My DropDownList model has a nested model. The DropDownList `GroupField` parameter is bound to the nested model property. I want the groups to appear in a non-alphabetical, custom order. How can I customize the group order in the DropDownList? + +## Solution + +To sort 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](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.list-1.sort?view=net-8.0) with a custom comparison function. +4. Pass the sorted data as `args.Data`({%slug common-features-data-binding-onread%}#todatasourceresult-method) . + +>caption Apply a sorting order to groups 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%}) From d351214a8ec2f938874d5eed6f0ed85f8edface8 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Thu, 10 Oct 2024 18:00:09 +0300 Subject: [PATCH 2/5] update kb --- .../dropdownlist-custom-sorting-order-groups.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/knowledge-base/dropdownlist-custom-sorting-order-groups.md b/knowledge-base/dropdownlist-custom-sorting-order-groups.md index 76c6540d51..ff45986ffc 100644 --- a/knowledge-base/dropdownlist-custom-sorting-order-groups.md +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -1,8 +1,8 @@ --- title: Custom Sorting Order for Groups in DropDownList -description: Learn how to apply a custom sorting order to groups in the DropDownList for Blazor. +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 Sorting Order for Groups in Blazor DropDownList +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 @@ -26,18 +26,18 @@ ticketid: 1666981, 1579415 ## Description -I using the [grouping feature of the DropDownList]({%slug components/dropdownlist/grouping%}). My DropDownList model has a nested model. The DropDownList `GroupField` parameter is bound to the nested model property. I want the groups to appear in a non-alphabetical, custom order. How can I customize the group order in the DropDownList? +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. How can I customize the grouping order in the DropDownList? ## Solution -To sort 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: +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](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.list-1.sort?view=net-8.0) with a custom comparison function. -4. Pass the sorted data as `args.Data`({%slug common-features-data-binding-onread%}#todatasourceresult-method) . +4. Pass the sorted data as [`args.Data`]({%slug common-features-data-binding-onread%}#todatasourceresult-method). ->caption Apply a sorting order to groups in the DropDownList +>caption Apply a custom grouping order in the DropDownList ````CSHTML @using Telerik.DataSource.Extensions @using Telerik.DataSource From 2dac7dfb383b3983acfb4ecd2177bef3edcef26c Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:41:32 +0300 Subject: [PATCH 3/5] Update knowledge-base/dropdownlist-custom-sorting-order-groups.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/dropdownlist-custom-sorting-order-groups.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dropdownlist-custom-sorting-order-groups.md b/knowledge-base/dropdownlist-custom-sorting-order-groups.md index ff45986ffc..9f3bb136be 100644 --- a/knowledge-base/dropdownlist-custom-sorting-order-groups.md +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -33,7 +33,7 @@ I am using the [grouping feature of the DropDownList]({%slug components/dropdown 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). +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](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.list-1.sort?view=net-8.0) with a custom comparison function. 4. Pass the sorted data as [`args.Data`]({%slug common-features-data-binding-onread%}#todatasourceresult-method). From 8ee1cf0ae8b49b58eb5a6f4169b6438d72d6461a Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Mon, 14 Oct 2024 15:52:01 +0300 Subject: [PATCH 4/5] change external reference --- knowledge-base/dropdownlist-custom-sorting-order-groups.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dropdownlist-custom-sorting-order-groups.md b/knowledge-base/dropdownlist-custom-sorting-order-groups.md index 9f3bb136be..66d9ba01bb 100644 --- a/knowledge-base/dropdownlist-custom-sorting-order-groups.md +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -34,7 +34,7 @@ To sort the groups in a DropDownList by a custom order, perform a manual sorting 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](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.list-1.sort?view=net-8.0) with a custom comparison function. +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 From acc635c9e48d9d396d70a28500c5464e1b256466 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Wed, 16 Oct 2024 09:35:32 +0300 Subject: [PATCH 5/5] update after review --- ...ropdownlist-custom-sorting-order-groups.md | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/knowledge-base/dropdownlist-custom-sorting-order-groups.md b/knowledge-base/dropdownlist-custom-sorting-order-groups.md index 66d9ba01bb..e05eeb2717 100644 --- a/knowledge-base/dropdownlist-custom-sorting-order-groups.md +++ b/knowledge-base/dropdownlist-custom-sorting-order-groups.md @@ -12,21 +12,17 @@ ticketid: 1666981, 1579415 ## Environment - - - - - - - - - - + + + + + +
ProductDropDownList for Blazor
Version6.2.0
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. How can I customize the grouping order in the DropDownList? +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 @@ -113,4 +109,4 @@ To sort the groups in a DropDownList by a custom order, perform a manual sorting - [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%}) +- [Custom Grouping Order in Grid]({%slug grid-custom-grouping-order%}) \ No newline at end of file