Editing in WPF TreeView (SfTreeView)
18 Dec 2020 / 4 minutes to read
The TreeView provides support for editing and it can be enabled or disabled by using 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.
It is necessary to define EditTemplate / EditTemplateSelector for bound mode, to enable editing. For UnboundMode, textbox will be loaded in edit mode by default.
<syncfusion:SfTreeView x:Name="sfTreeView"
ItemsSource="{Binding Items}"
ChildPropertyName="Files"
AutoExpandMode="RootNodes"
AllowEditing="True"
>
<syncfusion:SfTreeView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
</DataTemplate>
</syncfusion:SfTreeView.ItemTemplate>
<syncfusion:SfTreeView.EditTemplate>
<DataTemplate>
<TextBox Text="{Binding Name}"
VerticalContentAlignment="Center"
Margin="-4,0,-4,0"
Height="{Binding ItemHeight,ElementName=sfTreeView}" />
</DataTemplate>
</syncfusion:SfTreeView.EditTemplate>
</syncfusion:SfTreeView>
sfTreeView.AllowEditing = true;
Programmatic Editing
Begin the editing
The TreeView allows you to edit the node programmatically by calling the BeginEdit method.
this.sfTreeView.Loaded += TreeView_Loaded;
private void TreeView_Loaded(object sender, RoutedEventArgs e)
{
this.sfTreeView.BeginEdit(this.sfTreeView.Nodes[0]);
}
NOTE
CurrentItem is set to the node when the BeginEdit is called.
End the editing
You can call EndEdit method to programmatically end the editing for specific node.
this.sfTreeView.Loaded += TreeView_Loaded;
private void TreeView_Loaded(object sender, RoutedEventArgs e)
{
this.sfTreeView.EndEdit(this.sfTreeView.Nodes[0]);
}
Events
ItemBeginEdit Event
The ItemBeginEdit event occurs when the node enters edit mode. The TreeViewItemBeginEditEventArgs has the following members which provides information about the ItemBeginEdit
event.
- Node : Gets the TreeViewNode which is being edited.
You can cancel the editing of certain nodes using custom logic within this event by setting TreeViewItemBeginEditEventArgs.Cancel
as true.
sfTreeView.ItemBeginEdit += TreeView_ItemBeginEdit;
private void TreeView_ItemBeginEdit(object sender, TreeViewItemBeginEditEventArgs e)
{
if (e.Node.Content == "Grains")
e.Cancel = true;
}
ItemEndEdit Event
The ItemEndEdit event occurs when the node leaves the edit mode. The TreeViewItemEndEditEventArgs has the following members which provides information about the ItemEndEdit
event.
- Node : Gets the TreeViewNode which is being edited.
You can cancel the editing from being ended for certain nodes using custom logic within this event by setting TreeViewItemEndEditEventArgs.Cancel
as true.
sfTreeView.ItemEndEdit += TreeView_ItemEndEdit;
private void TreeView_ItemEndEdit(object sender, TreeViewItemEndEditEventArgs e)
{
if (e.Node.Content == "Cereals")
e.Cancel = true;
}