From 9b867107b9b5e4d631780922a833600f1da42622 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 5 Feb 2025 07:51:58 +0000 Subject: [PATCH 1/7] Added new kb article bind-sortdescriptors-collectionview-net-maui --- ...sortdescriptors-collectionview-net-maui.md | 216 ++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 knowledge-base/bind-sortdescriptors-collectionview-net-maui.md diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md new file mode 100644 index 00000000..23d1127a --- /dev/null +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -0,0 +1,216 @@ +--- +title: Binding SortDescriptors in CollectionView for .NET MAUI +description: Learn how to use data binding with CollectionView SortDescriptors in .NET MAUI applications. +type: how-to +page_title: How to Bind SortDescriptors in .NET MAUI CollectionView +slug: bind-sortdescriptors-collectionview-net-maui +tags: collectionview, sortdescriptors, databinding, .net maui, observablecollection +res_type: kb +ticketid: 1677846 +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 9.0.0 | Telerik UI for .NET MAUI ColelctionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +In my application, I want to use data binding to bind to an ObservableCollection of sort descriptors. + +This knowledge base article also answers the following questions: +- How to dynamically sort items in a CollectionView using SortDescriptors in .NET MAUI? +- How to bind SortDescriptors to a ViewModel property in .NET MAUI? +- How to update CollectionView sorting based on user input in .NET MAUI? + +## Solution + +To bind the `SortDescriptors` collection in a `CollectionView` to a property in the ViewModel, follow these steps: + +1. Define the `CollectionView` in XAML and bind the `SortDescriptors` and `ItemsSource` to the ViewModel properties. + +```xml + + + + + + + + + + + + + + +``` + +2. In the ViewModel, create properties for sorting and managing data. Implement logic to update sort descriptors based on user input. + +```csharp +public class ViewModel : NotifyPropertyChangedBase +{ + private bool isSortByName; + private bool isSortByAge; + + private ObservableCollection sortDescriptors; + + public ViewModel() + { + this.Items = GetData(); + } + + private static ObservableCollection GetData() + { + var items = new ObservableCollection(); + + items.Add(new Person { Name = "Tom", Age = 41 }); + items.Add(new Person { Name = "Anna", Age = 32 }); + items.Add(new Person { Name = "Peter", Age = 28 }); + items.Add(new Person { Name = "Teodor", Age = 39 }); + items.Add(new Person { Name = "Lorenzo", Age = 25 }); + items.Add(new Person { Name = "Andrea", Age = 33 }); + items.Add(new Person { Name = "Martin", Age = 36 }); + items.Add(new Person { Name = "Alexander", Age = 29 }); + items.Add(new Person { Name = "Maria", Age = 22 }); + items.Add(new Person { Name = "Elena", Age = 27 }); + items.Add(new Person { Name = "Stefano", Age = 44 }); + items.Add(new Person { Name = "Jake", Age = 31 }); + items.Add(new Person { Name = "Leon", Age = 28 }); + + return items; + } + public bool IsSortByName + { + get => this.isSortByName; + set => this.UpdateValue(ref this.isSortByName, value); + } + + public bool IsSortByAge + { + get => this.isSortByAge; + set => this.UpdateValue(ref this.isSortByAge, value); + } + + public ObservableCollection Items { get; set; } + + public ObservableCollection SortDescriptors + { + get + { + return this.sortDescriptors; + } + set + { + ObservableCollection oldValue = this.sortDescriptors; + + if (this.UpdateValue(ref this.sortDescriptors, value)) + { + this.OnSortDescriptorsChanged(oldValue); + } + } + } + + + protected override void OnPropertyChanged([CallerMemberName] string propertyName = null) + { + base.OnPropertyChanged(propertyName); + + this.UpdateCorrespondingDescriptor(propertyName); + } + + private void OnSortDescriptorsChanged(ObservableCollection oldValue) + { + if (oldValue != null) + { + oldValue.CollectionChanged -= this.SortDescriptors_CollectionChanged; + } + + if (this.sortDescriptors != null) + { + this.sortDescriptors.CollectionChanged += SortDescriptors_CollectionChanged; + } + + this.UpdateFlags(); + } + + private void SortDescriptors_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) + { + this.UpdateFlags(); + } + + private void UpdateCorrespondingDescriptor(string propertyName) + { + if (propertyName == nameof(this.IsSortByName)) + { + this.EnsureDescriptor(nameof(Person.Name), this.IsSortByName); + } + else if (propertyName == nameof(this.IsSortByAge)) + { + this.EnsureDescriptor(nameof(Person.Age), this.IsSortByAge); + } + } + + private void EnsureDescriptor(string propertyName, bool include) + { + ObservableCollection descriptors = this.SortDescriptors; + + if (descriptors == null) + { + return; + } + + SortDescriptorBase descriptor = this.TryGetDescriptor(propertyName); + + if (include) + { + if (descriptor == null) + { + descriptors.Add(new PropertySortDescriptor { PropertyName = propertyName }); + } + } + else + { + if (descriptor != null) + { + descriptors.Remove(descriptor); + } + } + } + + private void UpdateFlags() + { + this.IsSortByName = this.TryGetDescriptor(nameof(Person.Name)) != null; + this.IsSortByAge = this.TryGetDescriptor(nameof(Person.Age)) != null; + } + + private SortDescriptorBase TryGetDescriptor(string propertyName) + { + SortDescriptorBase descriptor = this.sortDescriptors?.FirstOrDefault(d => (d as PropertySortDescriptor)?.PropertyName == propertyName); + return descriptor; + } +} +public class Person +{ + public string Name { get; set; } + public int Age { get; set; } +} + +``` + +3. Ensure that property change notifications are properly propagated, and the `SortDescriptors` collection is updated accordingly when switches are toggled. + +This approach allows for dynamic sorting of items in the `CollectionView` based on user input, by binding `SortDescriptors` to a collection managed in the ViewModel. + +## See Also + +- [CollectionView Overview in .NET MAUI]({%slug collectionview-overview%}) +- [Data Binding in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/xaml/fundamentals/mvvm?view=net-maui-9.0) +- [Implementing Model-View-ViewModel (MVVM) in .NET MAUI](https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm) From 54abd1d13ddbf6fdc68f6c415c47a81cb9fd7832 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Wed, 5 Feb 2025 17:05:08 +0200 Subject: [PATCH 2/7] Update bind-sortdescriptors-collectionview-net-maui.md --- .../bind-sortdescriptors-collectionview-net-maui.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index 23d1127a..3862390a 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -13,7 +13,7 @@ ticketid: 1677846 | Version | Product | Author | | --- | --- | ---- | -| 9.0.0 | Telerik UI for .NET MAUI ColelctionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | +| 9.0.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | ## Description @@ -28,7 +28,7 @@ This knowledge base article also answers the following questions: To bind the `SortDescriptors` collection in a `CollectionView` to a property in the ViewModel, follow these steps: -1. Define the `CollectionView` in XAML and bind the `SortDescriptors` and `ItemsSource` to the ViewModel properties. +1. Define the CollectionView in XAML and bind the `SortDescriptors` and `ItemsSource` to the `ViewModel` properties. ```xml @@ -52,7 +52,7 @@ To bind the `SortDescriptors` collection in a `CollectionView` to a property in ``` -2. In the ViewModel, create properties for sorting and managing data. Implement logic to update sort descriptors based on user input. +2. In the `ViewModel`, create properties for sorting and managing data. Implement logic to update the sort descriptors based on the user input. ```csharp public class ViewModel : NotifyPropertyChangedBase From 1f2f917ed0e4697adfd6e994682babafc441575a Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 08:49:13 +0200 Subject: [PATCH 3/7] Update knowledge-base/bind-sortdescriptors-collectionview-net-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/bind-sortdescriptors-collectionview-net-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index 3862390a..01a86e47 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -17,7 +17,7 @@ ticketid: 1677846 ## Description -In my application, I want to use data binding to bind to an ObservableCollection of sort descriptors. +In my application, I want to use data binding to bind to an `ObservableCollection` of sort descriptors. This knowledge base article also answers the following questions: - How to dynamically sort items in a CollectionView using SortDescriptors in .NET MAUI? From e02f0c6f462eff10ea3a00f81b38a3666a940563 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 08:49:20 +0200 Subject: [PATCH 4/7] Update knowledge-base/bind-sortdescriptors-collectionview-net-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/bind-sortdescriptors-collectionview-net-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index 01a86e47..38b29d1a 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -20,7 +20,7 @@ ticketid: 1677846 In my application, I want to use data binding to bind to an `ObservableCollection` of sort descriptors. This knowledge base article also answers the following questions: -- How to dynamically sort items in a CollectionView using SortDescriptors in .NET MAUI? +- How to dynamically sort items in a CollectionView using `SortDescriptors` in .NET MAUI? - How to bind SortDescriptors to a ViewModel property in .NET MAUI? - How to update CollectionView sorting based on user input in .NET MAUI? From 0b72c18382d6be1d418944db09a665a8ca75067f Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 08:49:26 +0200 Subject: [PATCH 5/7] Update knowledge-base/bind-sortdescriptors-collectionview-net-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/bind-sortdescriptors-collectionview-net-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index 38b29d1a..13adc016 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -26,7 +26,7 @@ This knowledge base article also answers the following questions: ## Solution -To bind the `SortDescriptors` collection in a `CollectionView` to a property in the ViewModel, follow these steps: +To bind the `SortDescriptors` collection in a CollectionView to a property in the view model, follow these steps: 1. Define the CollectionView in XAML and bind the `SortDescriptors` and `ItemsSource` to the `ViewModel` properties. From 9cdcae7776a8f0e73d1192d027874fc0e37a0913 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 08:49:30 +0200 Subject: [PATCH 6/7] Update knowledge-base/bind-sortdescriptors-collectionview-net-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/bind-sortdescriptors-collectionview-net-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index 13adc016..d055ef3a 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -207,7 +207,7 @@ public class Person 3. Ensure that property change notifications are properly propagated, and the `SortDescriptors` collection is updated accordingly when switches are toggled. -This approach allows for dynamic sorting of items in the `CollectionView` based on user input, by binding `SortDescriptors` to a collection managed in the ViewModel. +This approach allows for dynamic sorting of items in the CollectionView based on user input, by binding `SortDescriptors` to a collection managed in the view model. ## See Also From 844c59e7c820e32e67599059a61b01c26ad51d1b Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Thu, 6 Feb 2025 08:49:36 +0200 Subject: [PATCH 7/7] Update knowledge-base/bind-sortdescriptors-collectionview-net-maui.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/bind-sortdescriptors-collectionview-net-maui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md index d055ef3a..ca30f222 100644 --- a/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md +++ b/knowledge-base/bind-sortdescriptors-collectionview-net-maui.md @@ -21,7 +21,7 @@ In my application, I want to use data binding to bind to an `ObservableCollectio This knowledge base article also answers the following questions: - How to dynamically sort items in a CollectionView using `SortDescriptors` in .NET MAUI? -- How to bind SortDescriptors to a ViewModel property in .NET MAUI? +- How to bind `SortDescriptors` to a view model property in .NET MAUI? - How to update CollectionView sorting based on user input in .NET MAUI? ## Solution