ComboBox display value disappear when I select an option

1 Answer 776 Views
ComboBox
Allen
Top achievements
Rank 1
Iron
Iron
Allen asked on 13 Sep 2022, 09:13 AM

Hey Team, 

I have a question want to ask for advice. I'm using a comboBox to do a research functionality。

First I initialed my drop down list with a collection of data. Then I defined SelectionChanged event(convert to command) which updated drop down list options.

When I choice an option, it fired SelectionChanged event. and updated drop down list. after that I saw the selected option didn't show on the TextBox. 

I want to know is there a way to show my selected option in Text Box(ComboBox)?

When I debug SelectionChanged event, I found it fired twice.

I attached my example project if you want to take a look.

 

Thanks

Allen  

1 Answer, 1 is accepted

Sort by
0
Alex
Telerik team
answered on 14 Sep 2022, 09:53 AM

Hi Allen,

Thank you for the provided sample app.

The SelectionChanged event is fired twice because in OnSelectCommand the ItemsSource has been reset. 

Resetting the ItemsSource on the other hand affects the SelectedItem and that's the reason why no item is displayed as selected.

My suggestion is to manipulate the ItemsSource collection without resetting it through its API. 

Keep in mind that SelectionChanged event provides ComboBoxSelectionChangedEventArgs which contains the added/removed items that can be used to manipulate the ItemsSource collection.

Solution Suggestion:

The EventToCommandBehavior class has a property called EventArgsConverter which can be used to obtain the arguments in your command as a parameter.

1. Your converter should inherit from ICommunityToolkitValueConverter and in the Convert method you can check if the passed arguments are from the correct type before returning them.

 

    public class SelectionChangedEventArgsConverter : ICommunityToolkitValueConverter
    {
        public Type FromType => throw new NotImplementedException();

        public Type ToType => throw new NotImplementedException();

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var selectionChangedEventArgs = value as ComboBoxSelectionChangedEventArgs;
            if (selectionChangedEventArgs == null)
            {
                throw new ArgumentException("Expected value to be of type ComboBoxSelectionChangedEventArgs", nameof(value));
            }

            return selectionChangedEventArgs;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

 

2. Declare the converter in XAML and pass it as a static resource to the EventArgsConverter property.

 

    <ContentPage.Resources>
        <local:SelectionChangedEventArgsConverter x:Key="SelectionChangedEventArgsConverter" />
    </ContentPage.Resources>

    <toolKit:EventToCommandBehavior Command="{Binding OnSelectCommand}"
                                                              EventName="SelectionChanged"
                                                              EventArgsConverter="{StaticResource SelectionChangedEventArgsConverter}" />

 

3. Finally in your view model class, you have to add a parameter of type object to the action that is used by the command, where the arguments will be passed.

 

        [ICommand]
        public void OnSelect(object args)
        {
            //Example 1: Your custom logic for ItemsSource collection manipulation
            this.Items.Add(new City { Name = "Test City", Population = 8888888 });

            //Example 2: Your custom logic for ItemsSource collection manipulation by using the arguments
            var args = arg as ComboBoxSelectionChangedEventArgs;
            var addedItems = args.AddedItems.FirstOrDefault();
        }

Please note that how to use the event to command behavior is a general knowledge. And the toolkit you use is a third party-library and it requires custom implementation development.

I hope the provided information was helpful, let me know if you need further help.

Regards,
Alex
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Allen
Top achievements
Rank 1
Iron
Iron
commented on 14 Sep 2022, 10:02 AM

Thanks for your detail clarify. I will try it on my side. 
Tags
ComboBox
Asked by
Allen
Top achievements
Rank 1
Iron
Iron
Answers by
Alex
Telerik team
Share this question
or