Skip to content

Commit 0daa598

Browse files
vijayarasanvijayarasan
authored
How to edit an item in WinUI TreeView (SfTreeView)?
How to edit an item in WinUI TreeView (SfTreeView)?
1 parent 512fa70 commit 0daa598

File tree

1 file changed

+218
-2
lines changed

1 file changed

+218
-2
lines changed

‎README.md‎

Lines changed: 218 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,218 @@
1-
# How to edit an item in winui treeview?
2-
This example describes how to edit an item in winui treeview.
1+
# How to edit an item in WinUI Treeview?
2+
3+
## About the sample
4+
5+
This example describes how to edit an item in WinUI Treeview.
6+
7+
[WinUI TreeView](https://www.syncfusion.com/winui-controls/treeview) (SfTreeView) provides support for editing and it can be enabled or disabled by using [SfTreeView.AllowEditing](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_AllowEditing) property. You can enter edit mode in a node by pressing **F2** key only. The editing changes in a node will be committed only when user move to next node or pressing **Enter** key.
8+
9+
It is necessary to define [EditTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EditTemplate) / [EditTemplateSelector](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EditTemplateSelector) for bound mode, to enable editing. For UnboundMode, textbox will be loaded in edit mode by default.
10+
11+
``` XML
12+
13+
<treeView:SfTreeView x:Name="treeView"
14+
Width="400"
15+
Height="500"
16+
AllowEditing="True"
17+
AutoExpandMode="AllNodes"
18+
ChildPropertyName="Childs"
19+
BorderBrush="LightGray"
20+
IsAnimationEnabled="True"
21+
BorderThickness="1"
22+
FullRowSelect="True"
23+
ItemsSource="{Binding Nodes1}">
24+
<treeView:SfTreeView.ItemTemplate>
25+
<DataTemplate>
26+
<StackPanel Orientation="Horizontal">
27+
<ContentPresenter Width="20"
28+
Height="20"
29+
HorizontalAlignment="Stretch"
30+
VerticalAlignment="Center"
31+
ContentTemplate="{Binding ImageTemplate}" />
32+
<TextBlock
33+
Margin="5"
34+
VerticalAlignment="Center"
35+
Text="{Binding Header}" />
36+
</StackPanel>
37+
</DataTemplate>
38+
</treeView:SfTreeView.ItemTemplate>
39+
<treeView:SfTreeView.EditTemplate>
40+
<DataTemplate>
41+
<TextBox VerticalAlignment="Center"
42+
Height="{Binding Path=ItemHeight,ElementName=treeView}"
43+
BorderThickness="1"
44+
Text="{Binding Header,Mode=TwoWay}"/>
45+
</DataTemplate>
46+
</treeView:SfTreeView.EditTemplate>
47+
</treeView:SfTreeView>
48+
49+
```
50+
51+
![Shows the editing in SfTreeView](Editing.gif)
52+
53+
## Programmatic Editing
54+
55+
### Begin the editing
56+
57+
WinUI TreeView allows you to edit the node programmatically by calling the [BeginEdit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_BeginEdit_Syncfusion_UI_Xaml_TreeView_TreeViewNode_) method.
58+
59+
``` C#
60+
61+
this.treeView.Loaded += OnLoaded;
62+
63+
private void OnLoaded(object sender, RoutedEventArgs e)
64+
{
65+
this.treeView.BeginEdit(this.treeView.Nodes[0]);
66+
}
67+
68+
```
69+
70+
#### NOTE: [CurrentItem](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_CurrentItem) is set to the node when the BeginEdit is called.
71+
72+
### End the editing
73+
74+
You can call [EndEdit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EndEdit_Syncfusion_UI_Xaml_TreeView_TreeViewNode_) method to programmatically end the editing for specific node.
75+
76+
``` C#
77+
78+
this.treeView.Loaded += OnLoaded;
79+
80+
private void OnLoaded(object sender, RoutedEventArgs e)
81+
{
82+
this.treeView.EndEdit(this.treeView.Nodes[0]);
83+
}
84+
85+
```
86+
87+
## Revert the edited changes while pressing Escape key
88+
89+
WinUI TreeView does not have support for rollback the changes when pressing the **ESC** key while editing the TreeView node. But it supports to rollback the changes when an underlying data object implements the [IEditableObject](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject?view=net-6.0) interface.
90+
91+
The user can take a backup of existing data of a node in the [BeginEdit](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.beginedit?view=net-6.0) method and can change the existing data to the current data in the [CancelEdit](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.canceledit?view=net-6.0) method to rollback the changes.
92+
93+
The below code snippet explains the simple implementation of IEditableObject interface to rollback the changes.
94+
95+
``` C#
96+
97+
public class EditingModel : INotifyPropertyChanged, IEditableObject
98+
{
99+
#region Fields
100+
101+
private string name;
102+
internal EditingModel backUpData;
103+
private EditingModel currentData;
104+
105+
private string header = string.Empty;
106+
private bool isexpanded = true;
107+
private DataTemplate imageTemplate;
108+
private ObservableCollection<EditingModel> childs = null;
109+
110+
#endregion
111+
112+
#region Constructor
113+
114+
public EditingModel()
115+
{
116+
117+
}
118+
119+
public EditingModel(string name):base()
120+
{
121+
Childs = new ObservableCollection<EditingModel>();
122+
this.currentData = new EditingModel();
123+
this.currentData.name = name;
124+
}
125+
126+
#endregion
127+
128+
#region Properties
129+
public string Header
130+
{
131+
get
132+
{
133+
return currentData.name;
134+
}
135+
set
136+
{
137+
currentData.name = value;
138+
this.RaisePropertyChanged("Header");
139+
}
140+
}
141+
142+
public bool IsExpanded
143+
{
144+
get
145+
{
146+
return isexpanded;
147+
}
148+
set
149+
{
150+
isexpanded = value;
151+
this.RaisePropertyChanged("IsExpanded");
152+
}
153+
}
154+
155+
public DataTemplate ImageTemplate
156+
{
157+
get { return imageTemplate; }
158+
set { imageTemplate = value; }
159+
}
160+
161+
public ObservableCollection<EditingModel> Childs
162+
{
163+
get
164+
{
165+
return childs;
166+
}
167+
set
168+
{
169+
childs = value;
170+
this.RaisePropertyChanged("Childs");
171+
}
172+
}
173+
174+
#endregion
175+
176+
#region INotifyPropertyChanged
177+
178+
public event PropertyChangedEventHandler PropertyChanged;
179+
180+
public void RaisePropertyChanged(string _PropertyName)
181+
{
182+
if (PropertyChanged != null)
183+
{
184+
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
185+
}
186+
}
187+
188+
#endregion
189+
190+
#region IEditableObject
191+
192+
public void BeginEdit()
193+
{
194+
backUpData = new EditingModel();
195+
backUpData.name = this.currentData.name;
196+
}
197+
198+
public void EndEdit()
199+
{
200+
201+
}
202+
203+
public void CancelEdit()
204+
{
205+
this.currentData = backUpData;
206+
}
207+
208+
#endregion
209+
}
210+
211+
```
212+
213+
![Shows the revert the edited changes while pressing Escape key in SfTreeView](RevertChanges.gif)
214+
215+
Take a moment to peruse the [WinUI TreeView - Editing](https://help.syncfusion.com/winui/treeview/editing) documentation, where you can find about editing with code examples.
216+
217+
## Requirements to run the demo
218+
Visual Studio 2019 and above versions

0 commit comments

Comments
 (0)