How to create ComboBox + TextBox in a ListView and add entered text as new item in ComboBox

Question

I want to create a ListView in which I need to create a ComboBox in each list view item. That ComboBox should be editable so that it will accept the text and create a new item with entered text. I some what achieved that taking reference of my previous question

Here is the code of MainPage.xaml

<Page.Resources>
    <local:RoleConverter x:Key="RoleConverter" Options="{x:Bind VM.UserRoleList}" RoleEditText="{x:Bind VM.EditText,Mode=OneWay}"/>
</Page.Resources>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView x:Name="DataListView" ItemsSource="{x:Bind UserList}" VerticalAlignment="Center" HorizontalAlignment="Center">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:User">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind username}" Width="150" />
                    <TextBlock Text="{x:Bind fisrt_name}"  Width="150"/>
                    <TextBlock Text="{x:Bind last_name}"  Width="150" />
                    <ComboBox 
                        Width="150"
                        IsEditable="True"
                        IsTextSearchEnabled="True"
                        Text="{Binding ElementName=DataListView, Path=DataContext.EditText, Mode=TwoWay}"
                        DisplayMemberPath="name"
                        SelectedItem="{x:Bind user_role, Mode=TwoWay , Converter={StaticResource RoleConverter}}"
                        ItemsSource="{Binding ElementName=DataListView, Path=DataContext.UserRoleList,Mode=TwoWay}">
                    </ComboBox>
                    <TextBlock Text="{x:Bind user_role.name , Mode=OneWay}"  Width="150"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button Grid.Row="1" Name="submit" Click="submit_Click" Content="click" />
</Grid>

Now the problem is I've set the converter class properties as global so when I enter text in one list item it reflect in other items as well. It should change the text in the row in which it is entered. Here is my the complete source code

Please help ! Thanks

Answer 1

Now the problem is I've set the converter class properties as global so when I enter text in one list item it reflect in other items as well.

The problem is Text bind the same value, if you edit the source, all ComboBoxs Text property will be change as well. For your requirement, you could process in ComboBoxs class. we need custom ComboBox and listen TextSubmitted event. And I have edit your project, please refer the following code.

public class MyComboBox : ComboBox
{
    public MyComboBox()
    {
        this.Loaded += MyComboBox_Loaded;
    }

    private void MyComboBox_Loaded(object sender, RoutedEventArgs e)
    {
        TextSubmitted += MyComboBox_TextSubmitted;
    }

    private void MyComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs args)
    {
        var items = ItemsSource as ObservableCollection<UserRole>;
        if (items.Count > 0)
        {
            if (items.Any<UserRole>(s => s.name == args.Text))
            {
                return;
            }
            else
            {
                var newItem = new UserRole() { id = (items.Count + 1).ToString(), name = args.Text };
                items.Add(newItem);
            }

        }
    }
}

Xaml Code without Converter

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView
        x:Name="DataListView"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        ItemsSource="{x:Bind UserList}"
        >
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:User">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="150" Text="{x:Bind username}" />
                    <TextBlock Width="150" Text="{x:Bind fisrt_name}" />
                    <TextBlock Width="150" Text="{x:Bind last_name}" />
                    <TextBlock Width="150" Text="{x:Bind user_role.name, Mode=OneWay}" />
                    <local:MyComboBox
                        Width="150"
                        DisplayMemberPath="name"
                        IsEditable="True"
                        IsTextSearchEnabled="True"
                        ItemsSource="{Binding ElementName=DataListView, Path=DataContext.UserRoleList, Mode=TwoWay}"
                        SelectedItem="{x:Bind user_role, Mode=TwoWay}"
                        />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Button
        Name="submit"
        Grid.Row="1"
        Click="submit_Click"
        Content="click"
        />
</Grid>