Skip to content

Commit b1e2061

Browse files
LakshminatarajanLakshminatarajan
authored
Merge pull request #3569 from syncfusion-content/TreeView_EmptyView
977149: Added UG for Support to Empty View in .Net MAUI TreeView
2 parents 1c26529 + 7fd4276 commit b1e2061

File tree

4 files changed

+163
-1
lines changed

4 files changed

+163
-1
lines changed

‎MAUI/TreeView/Images/empty-view/maui-treeview-empty-view.gif‎

294 KB
Loading

‎MAUI/TreeView/empty-view.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
layout: post
3+
title: EmptyView in .NET MAUI TreeView Control | Syncfusion
4+
description: Learn here about EmptyView support in Syncfusion .NET MAUI TreeView (SfTreeView) Control and more about it.
5+
platform: MAUI
6+
control: SfTreeView
7+
documentation: ug
8+
---
9+
10+
# Empty view in .NET MAUI TreeView (SfTreeView)
11+
12+
The `SfTreeView` control allows you to display and customize the empty view content when no data is available. The `EmptyView` property can be set to either a string or a view, and it will be displayed when the `ItemsSource` is empty or null, or the `Nodes` collection is empty. `EmptyViewTemplate` is used to customize the appearance of `EmptyView`.
13+
14+
## Display a string when TreeView has no items
15+
16+
The `EmptyView` property in `SfTreeView` can be set to a string, which will be displayed when no items are present in the tree view.
17+
18+
{% tabs %}
19+
{% highlight xaml hl_lines="3" %}
20+
<syncfusion:SfTreeView x:Name="treeView"
21+
ItemsSource="{Binding Items}"
22+
EmptyView="No Items">
23+
</syncfusion:SfTreeView>
24+
</ContentPage>
25+
{% endhighlight %}
26+
{% highlight c# hl_lines="3" %}
27+
SfTreeView treeView = new SfTreeView();
28+
treeView.ItemsSource = viewModel.Items;
29+
treeView.EmptyView = "No Items";
30+
{% endhighlight %}
31+
{% endtabs %}
32+
33+
## Display views when TreeView has no items
34+
35+
The `SfTreeView` control uses the `EmptyView` property to display a custom view when the tree view has no items.
36+
37+
{% tabs %}
38+
{% highlight xaml hl_lines="3" %}
39+
<syncfusion:SfTreeView x:Name="treeView"
40+
ItemsSource="{Binding Items}">
41+
<syncfusion:SfTreeView.EmptyView>
42+
<Border Padding="10" Stroke="Purple" StrokeThickness="2" HorizontalOptions="Center" VerticalOptions="Center">
43+
<Border.StrokeShape>
44+
<RoundRectangle CornerRadius="6"/>
45+
</Border.StrokeShape>
46+
<Label Text="No Items Found"
47+
HorizontalTextAlignment="Center"
48+
VerticalTextAlignment="Center"
49+
FontSize="16" FontAttributes="Bold" TextColor="Blue"/>
50+
</Border>
51+
</syncfusion:SfTreeView.EmptyView>
52+
</syncfusion:SfTreeView>
53+
</ContentPage>
54+
{% endhighlight %}
55+
{% highlight c# hl_lines="3" %}
56+
SfTreeView treeView = new SfTreeView();
57+
treeView.ItemsSource = viewModel.Items;
58+
treeView.EmptyView = new Border
59+
{
60+
Padding = 10,
61+
Stroke = Colors.Purple,
62+
StrokeThickness = 2,
63+
HorizontalOptions = LayoutOptions.Center,
64+
VerticalOptions = LayoutOptions.Center,
65+
StrokeShape = new RoundRectangle { CornerRadius = 6 },
66+
Content = new Label
67+
{
68+
Text = "No Items Found",
69+
HorizontalTextAlignment = TextAlignment.Center,
70+
VerticalTextAlignment = TextAlignment.Center,
71+
FontSize = 16,
72+
FontAttributes = FontAttributes.Bold,
73+
TextColor = Colors.Blue
74+
}
75+
};
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
N> The view displayed by the `EmptyView` can be a single view or a view that includes multiple child views.
80+
81+
![EmptyView in .NET MAUI TreeView](images/empty-view/maui-treeview-empty-view.gif)
82+
83+
## Empty view customization
84+
85+
The `SfTreeView` control allows you to fully customize the empty view appearance by using the `EmptyViewTemplate` property. This property lets you define a custom view and style for the `EmptyView`.
86+
87+
{% tabs %}
88+
{% highlight xaml hl_lines="14" %}
89+
<Grid RowDefinitions="Auto,*">
90+
<SearchBar x:Name="filterText"
91+
Placeholder="Search here"
92+
TextChanged="filterText_TextChanged" />
93+
<syncfusion:SfTreeView x:Name="treeView"
94+
ItemsSource="{Binding FilteredFolders}"
95+
AutoExpandMode="AllNodesExpanded"
96+
NotificationSubscriptionMode="CollectionChange"
97+
Grid.Row="1">
98+
<syncfusion:SfTreeView.EmptyView>
99+
<local:FilterItem Filter="{Binding Source={x:Reference filterText}, Path=Text}" />
100+
</syncfusion:SfTreeView.EmptyView>
101+
102+
<syncfusion:SfTreeView.EmptyViewTemplate>
103+
<DataTemplate>
104+
<Border>
105+
....
106+
</Border>
107+
</DataTemplate>
108+
</syncfusion:SfTreeView.EmptyViewTemplate>
109+
</syncfusion:SfTreeView>
110+
</Grid>
111+
112+
{% endhighlight %}
113+
{% highlight c# hl_lines="34" %}
114+
115+
var grid = new Grid();
116+
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
117+
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
118+
119+
var filterText = new SearchBar
120+
{
121+
Placeholder = "Search here"
122+
};
123+
filterText.TextChanged += FilterText_TextChanged;
124+
125+
// Add SearchBar to Grid (Row 0)
126+
grid.Children.Add(filterText);
127+
Grid.SetRow(filterText, 0);
128+
129+
var treeView = new SfTreeView
130+
{
131+
ItemsSource = viewModel.FilteredFolders,
132+
AutoExpandMode = AutoExpandMode.AllNodesExpanded,
133+
NotificationSubscriptionMode = NotificationSubscriptionMode.CollectionChange
134+
};
135+
136+
Grid.SetRow(treeView, 1);
137+
grid.Children.Add(treeView);
138+
139+
var filterItem = new FilterItem();
140+
filterItem.SetBinding(FilterItem.FilterProperty, new Binding
141+
{
142+
Source = filterText,
143+
Path = "Text"
144+
});
145+
treeView.EmptyView = filterItem;
146+
147+
// Define the EmptyViewTemplate
148+
treeView.EmptyViewTemplate = new DataTemplate(() =>
149+
{
150+
return new Border
151+
{
152+
...
153+
};
154+
});
155+
156+
{% endhighlight %}
157+
{% endtabs %}
158+
159+
N>
160+
* The `EmptyViewTemplate` will only be applied when the `EmptyView` property is explicitly defined. If `EmptyView` is not set, the template will not be displayed.
161+
* `EmptyView` can be set to custom data model and the appearance of the `EmptyView` can be customized by using the `EmptyViewTemplate`.

‎MAUI/TreeView/sorting.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ N> It is mandatory to specify the `PropertyName` of `SortDescriptor` in programm
6868
Custom sorting can be applied by assigning a comparer to the `SortDescriptor.Comparer` property and the comparer will be added to the `SortDescriptors` collection.
6969

7070
{% tabs %}
71-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4 9" %}
71+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="9 10" %}
7272
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
7373
xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView">
7474
<ContentPage.Resources>

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1379,6 +1379,7 @@
13791379
<li><a href="/maui/TreeView/sorting">Sorting</a></li>
13801380
<li><a href="/maui/TreeView/mvvm">MVVM</a></li>
13811381
<li><a href="/maui/TreeView/load-on-demand">Load on Demand</a></li>
1382+
<li><a href="/maui/TreeView/empty-view">Empty View</a></li>
13821383
<li><a href="/maui/TreeView/item-height-customization">Item Height Customization</a></li>
13831384
<li><a href="/maui/TreeView/right-to-left">Right to left</a></li> </ul>
13841385
</li>

0 commit comments

Comments
 (0)