Skip to content

Update README.md #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 9, 2025
Merged

Update README.md #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 117 additions & 119 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# How to edit an item in WinUI Treeview?
# How to edit an item in WinUI Treeview (SfTreeView)?

## About the sample

Expand All @@ -12,41 +12,40 @@ It is necessary to define [EditTemplate](https://help.syncfusion.com/cr/winui/Sy

``` XML

<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
AllowEditing="True"
AutoExpandMode="AllNodes"
ChildPropertyName="Childs"
BorderBrush="LightGray"
IsAnimationEnabled="True"
BorderThickness="1"
FullRowSelect="True"
ItemsSource="{Binding Nodes1}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Width="20"
Height="20"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ContentTemplate="{Binding ImageTemplate}" />
<TextBlock
Margin="5"
VerticalAlignment="Center"
Text="{Binding Header}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
<treeView:SfTreeView.EditTemplate>
<DataTemplate>
<TextBox VerticalAlignment="Center"
Height="{Binding Path=ItemHeight,ElementName=treeView}"
BorderThickness="1"
Text="{Binding Header,Mode=TwoWay}"/>
</DataTemplate>
</treeView:SfTreeView.EditTemplate>
</treeView:SfTreeView>
<treeView:SfTreeView x:Name="treeView"
Width="400"
Height="500"
AllowEditing="True"
AutoExpandMode="AllNodes"
ChildPropertyName="Childs"
BorderBrush="LightGray"
IsAnimationEnabled="True"
BorderThickness="1"
FullRowSelect="True"
ItemsSource="{Binding Nodes1}">
<treeView:SfTreeView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Width="20"
Height="20"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
ContentTemplate="{Binding ImageTemplate}" />
<TextBlock Margin="5"
VerticalAlignment="Center"
Text="{Binding Header}" />
</StackPanel>
</DataTemplate>
</treeView:SfTreeView.ItemTemplate>
<treeView:SfTreeView.EditTemplate>
<DataTemplate>
<TextBox VerticalAlignment="Center"
Height="{Binding Path=ItemHeight,ElementName=treeView}"
BorderThickness="1"
Text="{Binding Header,Mode=TwoWay}"/>
</DataTemplate>
</treeView:SfTreeView.EditTemplate>
</treeView:SfTreeView>

```

Expand Down Expand Up @@ -111,119 +110,118 @@ The user can take a backup of existing data of a node in the [BeginEdit](https:/
The below code snippet explains the simple implementation of IEditableObject interface to rollback the changes.

``` C#

public class EditingModel : INotifyPropertyChanged, IEditableObject
{
#region Fields
#region Fields

private string name;
internal EditingModel backUpData;
private EditingModel currentData;
private string name;
internal EditingModel backUpData;
private EditingModel currentData;

private string header = string.Empty;
private bool isexpanded = true;
private DataTemplate imageTemplate;
private ObservableCollection<EditingModel> childs = null;
private string header = string.Empty;
private bool isexpanded = true;
private DataTemplate imageTemplate;
private ObservableCollection<EditingModel> childs = null;

#endregion
#endregion

#region Constructor
#region Constructor

public EditingModel()
{

}
public EditingModel()
{

public EditingModel(string name):base()
{
Childs = new ObservableCollection<EditingModel>();
this.currentData = new EditingModel();
this.currentData.name = name;
}
}

#endregion
public EditingModel(string name) : base()
{
Childs = new ObservableCollection<EditingModel>();
this.currentData = new EditingModel();
this.currentData.name = name;
}

#region Properties
public string Header
#endregion

#region Properties
public string Header
{
get
{
return currentData.name;
}
set
{
get
{
return currentData.name;
}
set
{
currentData.name = value;
this.RaisePropertyChanged("Header");
}
currentData.name = value;
this.RaisePropertyChanged("Header");
}
}

public bool IsExpanded
public bool IsExpanded
{
get
{
get
{
return isexpanded;
}
set
{
isexpanded = value;
this.RaisePropertyChanged("IsExpanded");
}
return isexpanded;
}

public DataTemplate ImageTemplate
set
{
get { return imageTemplate; }
set { imageTemplate = value; }
isexpanded = value;
this.RaisePropertyChanged("IsExpanded");
}
}

public ObservableCollection<EditingModel> Childs
public DataTemplate ImageTemplate
{
get { return imageTemplate; }
set { imageTemplate = value; }
}

public ObservableCollection<EditingModel> Childs
{
get
{
return childs;
}
set
{
get
{
return childs;
}
set
{
childs = value;
this.RaisePropertyChanged("Childs");
}
childs = value;
this.RaisePropertyChanged("Childs");
}
}

#endregion
#endregion

#region INotifyPropertyChanged
#region INotifyPropertyChanged

public event PropertyChangedEventHandler PropertyChanged;
public event PropertyChangedEventHandler PropertyChanged;

public void RaisePropertyChanged(string _PropertyName)
public void RaisePropertyChanged(string _PropertyName)
{
if (PropertyChanged != null)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
}
PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
}
}

#endregion
#endregion

#region IEditableObject
#region IEditableObject

public void BeginEdit()
{
backUpData = new EditingModel();
backUpData.name = this.currentData.name;
}

public void EndEdit()
{

}
public void BeginEdit()
{
backUpData = new EditingModel();
backUpData.name = this.currentData.name;
}

public void CancelEdit()
{
this.currentData = backUpData;
}

#endregion
public void EndEdit()
{

}

public void CancelEdit()
{
this.currentData = backUpData;
}

#endregion
}

```
Expand Down