From bb7f9d80f8b27ab055334dcc6efca78c65d94964 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 5 Sep 2025 13:25:38 +0000 Subject: [PATCH 1/4] Added new kb article radtreedatagrid-binding-selecteditems-viewmodel --- ...atagrid-binding-selecteditems-viewmodel.md | 215 ++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md diff --git a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md new file mode 100644 index 00000000..6a0a2c22 --- /dev/null +++ b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md @@ -0,0 +1,215 @@ +--- +title: Binding SelectedItems Coin TreeDataGrid to ViewModel +description: Explains why SelectedItems in RadTreeDataGrid cannot be bound directly in XAML and shows how to use it in the ViewModel. +type: how-to +page_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding +meta_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding +slug: radtreedatagrid-binding-selecteditems-viewmodel +tags: radtreedatagrid, .net maui, selecteditems, binding, xaml, viewmodel +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI TreeDataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I need to bind the `SelectedItems` property of [TreeDataGrid](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview) to a collection property in my `ViewModel`, but I noticed that it is not available for binding in XAML. However, it seems accessible in the code-behind file. Is there a way to bind this collection to the `ViewModel`? + +This knowledge base article also answers the following questions: + +- Why is `SelectedItems` not available for binding in XAML? +- How can I work with `SelectedItems` in the `ViewModel`? +- How can I use `SelectedItems` with collection updates? + +## Solution + +The `SelectedItems` property of the TreeDataGrid is a read-only collection with a private setter, which means it cannot be directly bound in XAML. IntelliSense does not suggest properties with private setters for XAML binding, and therefore, two-way binding is not supported. + +To use `SelectedItems` in your `ViewModel`, follow these steps: + +**1.** Define the TreeDataGrid control: + +```XAML + + + + + + + + + + +``` + +**2.** Define the `ViewModel` and Subscribe to the `CollectionChanged` event of the `SelectedItems` property. This event notifies you when the selection changes. + +```C# +public class MainPageViewModel : NotifyPropertyChangedBase +{ + private ObservableCollection selection; + + public MainPageViewModel() + { + Items = new ObservableCollection(); + Items.Add(new Data("My Projects", 234, "Folder") + { + Children = new ObservableCollection() + { + new Data("Using latest Telerik .NET MAUI controls", 234 ,"Folder") + { + Children = new ObservableCollection() + { + new Data("TreeDataGrid", 6, "File"), + new Data("CollectionView", 6, "File"), + new Data("DataGrid", 54, "File"), + new Data("Scheduler", 12, "File"), + new Data("TreeView", 2, "File"), + new Data("Calendar", 23, "File"), + new Data("RichTextEditor", 0, "File"), + new Data("PdfViewer", 55, "File"), + new Data("ToggleButton", 21, "File"), + new Data("TemplatedButton", 88, "File"), + } + }, + new Data("Blank project", 0, "Folder") + } + }); + Items.Add(new Data("Shared Documents", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("Reports", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("October", 234, "File"), + new Data("November", 0, "File"), + new Data("December", 409, "File") + } + } + } + }); + Items.Add(new Data("Pictures", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("Camera Roll", 231, "Folder") + { + Children = new ObservableCollection() + { + new Data("hello.png", 107, "File"), + new Data("happy_summer.png", 0, "File"), + new Data("avatar.png", 124, "File") + } + }, + new Data("Saved Pictures", 453, "Folder") + { + Children = new ObservableCollection() + { + new Data("vacation.png", 234, "File"), + new Data("november.png", 0, "File"), + new Data("mountains.png", 227, "File") + } + } + } + }); + Items.Add(new Data("Documents", 876, "Folder") + { + Children = new ObservableCollection() + { + new Data("Internal Usage Only", 643, "Folder") + { + Children = new ObservableCollection() + { + new Data("reports.docx", 234, "File"), + new Data("confidential.xlsx", 0, "File"), + new Data("internal_usage.pdf", 409, "File") + } + } + } + }); + } + public ObservableCollection Items { get; set; } + + public ObservableCollection Selection + { + get => this.selection; + set + { + if (this.selection != value) + { + if (this.selection != null) + { + this.selection.CollectionChanged -= SelectedItems_CollectionChanged; + } + + this.selection = value; + Device.StartTimer(TimeSpan.FromMicroseconds(300), () => + { + this.selection.Add(this.Items[0]); + return false; + }); + + this.OnPropertyChanged(); + + if (this.selection != null) + { + this.selection.CollectionChanged += SelectedItems_CollectionChanged; + } + } + } + } + + private void SelectedItems_CollectionChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) + { + if (e.Action == NotifyCollectionChangedAction.Add) + { + // add your logic here + } + else if (e.Action == NotifyCollectionChangedAction.Remove) + { + // add your logic here + } + } +} +``` + +**3.** Define the data model: + +```C# +public class Data +{ + public Data(string name, int size, string type) + { + this.Name = name; + this.Size = size; + this.Type = type; + this.Children = new ObservableCollection(); + } + + public string Name { get; set; } + public int Size { get; set; } + public string Type { get; set; } + public ObservableCollection Children { get; set; } +} +``` + +**4.** Set the binding context: + +```XAML + + + +``` + +## See Also + +- [TreeDataGrid Overview](https://docs.telerik.com/devtools/maui/controls/treedatagrid/overview) From 1b61c08b48e09845af76cda206385154bdabf1a6 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:41:19 +0300 Subject: [PATCH 2/4] Update knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- .../radtreedatagrid-binding-selecteditems-viewmodel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md index 6a0a2c22..593c165f 100644 --- a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md +++ b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md @@ -49,7 +49,7 @@ To use `SelectedItems` in your `ViewModel`, follow these steps: ``` -**2.** Define the `ViewModel` and Subscribe to the `CollectionChanged` event of the `SelectedItems` property. This event notifies you when the selection changes. +**2.** Define the `ViewModel` and subscribe to the `CollectionChanged` event of the `SelectedItems` property. This event notifies you when the selection changes. ```C# public class MainPageViewModel : NotifyPropertyChangedBase From 1184ac24c3007a34f5bdfd5ac768eb3c46a694ec Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:41:48 +0300 Subject: [PATCH 3/4] Update radtreedatagrid-binding-selecteditems-viewmodel.md --- .../radtreedatagrid-binding-selecteditems-viewmodel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md index 593c165f..e2c06d5c 100644 --- a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md +++ b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md @@ -1,5 +1,5 @@ --- -title: Binding SelectedItems Coin TreeDataGrid to ViewModel +title: Binding SelectedItems Collection TreeDataGrid to ViewModel description: Explains why SelectedItems in RadTreeDataGrid cannot be bound directly in XAML and shows how to use it in the ViewModel. type: how-to page_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding From 8edb260a2c27fc7bd6fa0c37396aeb1405e2a964 Mon Sep 17 00:00:00 2001 From: Didi Yordanova <39412212+didiyordanova@users.noreply.github.com> Date: Tue, 9 Sep 2025 16:42:16 +0300 Subject: [PATCH 4/4] Update radtreedatagrid-binding-selecteditems-viewmodel.md --- .../radtreedatagrid-binding-selecteditems-viewmodel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md index e2c06d5c..3213f7bc 100644 --- a/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md +++ b/knowledge-base/radtreedatagrid-binding-selecteditems-viewmodel.md @@ -1,5 +1,5 @@ --- -title: Binding SelectedItems Collection TreeDataGrid to ViewModel +title: Binding TreeDataGrid SelectedItems Collection to ViewModel description: Explains why SelectedItems in RadTreeDataGrid cannot be bound directly in XAML and shows how to use it in the ViewModel. type: how-to page_title: Using SelectedItems in RadTreeDataGrid with ViewModel Binding