Telerik blogs

I just wrote a simple application that demonstrates how to databind a treeview to a dummy data source and edit its items in a UserControl, placed in a RadWindow. You could see my other blog posts for examples with web service binding and upgrade the application to suit your needs.

To accomplish the requirements, we need to add a property that will contain the edited data item on the UserControl. When the selection in the TreeView changes, we will update that property with the new selection and then open the RadWindow. The UserControl will create a copy of the data item in order to allow us to cancel the edit operation. This copy will be later merged with the original data item when the user clicks on the OK/Apply buttons.

The application contains a Page with a RadTreeView inside:

<telerikNavigation:RadTreeView x:Name="DataItemsTreeView" 
ItemTemplate="{StaticResource TreeTemplate}"
IsExpandOnSingleClickEnabled="True" ItemsSource="{StaticResource AllItems}"

SelectionChanged="RadTreeView_SelectionChanged" />

 

The TreeTemplate is declared as:

<telerik:HierarchicalDataTemplate x:Key="TreeTemplate" ItemsSource="{Binding Children}"> 
<
TextBlock Text="{Binding Text}" ToolTipService.ToolTip="{Binding Description}" />
</telerik:HierarchicalDataTemplate>

 

Add a RadWindow control with the UserControl that will be used to edit our data items:

<telerikNavigation:RadWindow x:Name="PropertiesWindow"> 
<local:PropertiesWindowControl x:Name="PropertiesWindowControl" />
</telerikNavigation:RadWindow>

The RadTreeView_SelectionChanged method just sets a property on the PropertiesWindowControl UserControl and opens the PropertiesWindow:

private void RadTreeView_SelectionChanged(object sender, 
Telerik.Windows.Controls.SelectionChangedEventArgs e)
{
PropertiesWindowControl.DataItem = DataItemsTreeView.SelectedItem as DataItem;
PropertiesWindow.Show();
}

The PropertiesWindowControl has the following XAML:

<UserControl x:Class="PassingDataThroughRadWindow.PropertiesWindowControl" 
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
StackPanel x:Name="LayoutRoot" Background="White">
<
TextBox Text="{Binding Text, Mode=TwoWay}" />
<
TextBox Text="{Binding Description, Mode=TwoWay}" />
<
StackPanel Orientation="Horizontal">
<
Button Content="Apply" Click="Apply_Click" />
<
Button Content="OK" Click="OK_Click" />
<
Button Content="Cancel" Click="Cancel_Click" />
</
StackPanel>
</
StackPanel>
</
UserControl>

 

The magic is inside the DataItem property and the ApplyChanges method:

public DataItem DataItem
{
get
{
return this.dataItem;
}
set
{
if (this.dataItem != value)
{
this.dataItem = value;
this.DataContext = this.dataItem.Clone();
}
}
}

private void ApplyChanges()
{
(this.DataContext as DataItem).CopyTo(this.DataItem);
}

 

When the DataItem property is set, we set the DataContext of the UserControl to a copy of its value. The ApplyChanges method copies the changes made to the DataContext back to the original data item. We will invoke this method in OK_Click and Apply_Click. The Cancel_Click just closes RadWindow without applying the changes.

To close our parent RadWindow we will need a reference to it, that can be obtained using the static method RadWindow.GetParentRadWindow(), which searches the visual tree for a RadWindow object:

private void Hide()
{
RadWindow parentWindow = RadWindow.GetParentRadWindow(this);
parentWindow.Hide();
}

 

And that's all. You could download the application from here:


About the Author

Valeri Hristov

Team Lead,
Platform Team

Comments

Comments are disabled in preview mode.