Custom templated combobox with special non templated item - wpf

Question

I have a RadTreeView, in each item there is a RadCombobox with some elements. Now I need to add some "special" item into each combobox. User can click on this item to add new element in combobox:
My current code:
<DataTemplate x:Key="Monitor">
<Grid Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Height="16" Width="16" Source="icons\monitor.png" />
<TextBlock Text="{Binding Name}" Margin="5 0 0 0" Grid.Column="1" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
<!-- PROBLEM IS HERE -->
<telerik:RadComboBox Name="RadComboSchedule"
Grid.Column="2"
Margin="10 0 0 0"
Width="155"
ItemsSource="{Binding Source={StaticResource DataSource}, Path=ScheduleDataSource}"
ItemTemplate="{StaticResource ComboBoxTemplate}"
>
</telerik:RadComboBox>
<Button Name="BtnRemoveMonitor" Grid.Column="3" Style="{StaticResource ButtonListBoxItemStyle}" Template="{StaticResource RemoveButtonTemplate}" />
</Grid>
</DataTemplate>
<HierarchicalDataTemplate x:Key="Group"
ItemTemplate="{StaticResource Monitor}"
ItemsSource="{Binding Monitors}">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</HierarchicalDataTemplate>
<telerik:RadTreeView
Name="RadTreeViewGroups"
Height="auto"
Width="auto"
ItemsSource="{Binding Source={StaticResource DataSource}, Path=GroupsDataSource}"
ItemTemplate="{StaticResource Group}"
>
</telerik:RadTreeView>
So, I have all like at a screenshot without element "Add new item".
Any ideas?
PS It's not a problem to use standard WPF Combobox and TreeView controls.

Answer 1

You can create a new item in the DataSource of the ComboBox which name is "ADD NEW ITEM" and handle when the user select it.
private void SelectItem(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems[0].ToString() == "new")
{
string newItem = "completely new item";
dataSource.Add(newItem);
((ComboBox)sender).SelectedItem = newItem;
}
}
In this question you can see a better example that each item is an instance of a class, so it's easier to handle the "add item" request:
Databound WPF ComboBox with 'New...' item
Edit (about the 'add item' button template):
Based on the example above
Having this class
public class DisplayClass
{
public string Name { get; set; }
public bool IsDummy { get; set; }
}
You bind ComboBox.ItemsSource to an ObservableCollection like this one:
public ObservableCollection<DisplayClass> DataSource { get; set; }
Add that "dummy" item to the collection
DataSource.Add(new DisplayClass { Name = "ADD ITEM", IsDummy = true });
Then you handle the item selection with something like this:
private void SelectItem(object sender, SelectionChangedEventArgs e)
{
var comboBox = (ComboBox)sender;
var selectedItem = comboBox.SelectedItem as DisplayClass;
if (selectedItem != null && selectedItem.IsDummy)
{
//Creating the new item
var newItem = new DisplayClass { Name = comboBox.Items.Count.ToString(), IsDummy = false };
//Adding to the datasource
DataSource.Add(newItem);
//Removing and adding the dummy item from the collection, thus it is always the last on the 'list'
DataSource.Remove(selectedItem);
DataSource.Add(selectedItem);
//Select the new item
comboBox.SelectedItem = newItem;
}
}
To display the items properly, you'll need to change the ComboBox.ItemTemplate, making the image invisible when the item is dummy
<ComboBox ItemsSource="{Binding DataSource}" SelectionChanged="SelectItem">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Width="180" />
<Image HorizontalAlignment="Right" Source="..." MouseLeftButtonUp="DeleteItem">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDummy}" Value="True">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>