Custom templated combobox with special non templated item

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>