- Home
- Forum
- Xamarin.Forms
- SfComboBox dropdown button clicked event
SfComboBox dropdown button clicked event
Dear Syncfusion Support,
I am using the SfComboBox component many times throughout my project, and found that sometimes the dropdown does not want to open (show items) when the user clicks on the dropdown button. I am looking for a solution, and would like to find out if the dropdown button has a clicked event or something similar I can use to force the dropdown options to open on user click?
The problem is hard to replicate, as it seems to be happening at random times. Therefore, access to dropdown button events could likely solve my problem if the events are accessible. The .xaml for the combobox is as follows
<inputLayout:SfTextInputLayout ContainerBackgroundColor="Transparent"
x:Name="InputLayout">
<combobox:SfComboBox x:Name="Combo" SelectionChanged="Combo_SelectionChanged" />
</inputLayout:SfTextInputLayout>
I am using an ObservableRangeCollection to populate the dropdown items.
I am using Xamarin.Forms verison 5.0.0.1874
Syncfusion version 19.4.0.43
Thank you in advance
Since we are unable to reproduce the reported issue, we would like you to check the issue with the attached sample and let us know if it is reproduced. Else, please revert to us by modifying the sample based on your application and provide the replication procedure or the sample. It will be helpful for us to provide a better solution at the earliest.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxSample_IsOpen1279955399
When you click the dropdown button, check whether the DropDownOpen event is called or not. If it is, set the IsDropdownOpen property to true.
Please check and let us know if you have any concerns.
Regards,
Suganya Sethuraman.
Hi Suganya,
I realized today what was causing the issue. If a user clicks on the dropdown button before the combobox has any items to show (items get populated from a REST service), the combobox will not open the item list, even after the item list has been loaded successfully. The user then needs to re-open the page to reload the combobox before it will show the item list, or the user must start typing in the suggestion box. This is inconvenient for users to do and it would be much better if the dropdown button behavior works as expected all the time.
Also, when the dropdown does not want to open and a user clicks on the dropdown button, the DropDownOpen event is not fired.
Any assistance will be greatly appreciated
Are you asynchronously loading the DataSource of SfComboBox using REST api? Please provide simple issue reproducing sample. This will help us to investigate further and provide better solution at earliest.
Regards,
Suganya Sethuraman.
Hi Suganya,
Here is some sample code of a test project that I created. I could not attach the project, as the file is too large.
MainPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
xmlns:inputLayout="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
x:Class="SFComboBox.MainPage">
<StackLayout Padding="10">
<Button Text="Load Items"
x:Name="LoadButton"
Clicked="LoadButton_Clicked" />
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"/>
</inputLayout:SfTextInputLayout>
<Label x:Name="ItemsCount" />
</StackLayout>
</ContentPage>
MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.CommunityToolkit.ObjectModel;
using Xamarin.Forms;
namespace SFComboBox
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void LoadButton_Clicked(object sender, EventArgs e)
{
ObservableRangeCollection<Item> items = new ObservableRangeCollection<Item>();
List<Item> vs = new List<Item>();
vs.Add(new Item { Value = "1", Description = "Test 1" });
vs.Add(new Item { Value = "2", Description = "Test 2" });
vs.Add(new Item { Value = "3", Description = "Test 3" });
vs.Add(new Item { Value = "4", Description = "Test 4" });
vs.Add(new Item { Value = "5", Description = "Test 5" });
items.AddRange(vs);
ComboBox.DataSource = items;
ItemsCount.Text = items.Count.ToString();
}
}
public class Item
{
public string Value { get; set; }
public string Description { get; set; }
}
}
App.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
x:Class="SFComboBox.App">
<Application.Resources>
<Style TargetType="combobox:SfComboBox">
<Setter Property="AllowFiltering" Value="True" />
<Setter Property="TextHighlightMode" Value="FirstOccurrence" />
<Setter Property="HighlightedTextFontAttributes" Value="Bold" />
<Setter Property="IsEditableMode" Value="True" />
<Setter Property="MaximumDropDownHeight" Value="300" />
<Setter Property="NoResultsFoundText" Value="No Result" />
<Setter Property="SuggestionMode" Value="Contains" />
</Style>
</Application.Resources>
</Application>
The issue can be replicated on Android by clicking on the dropdown button before you click on the Load Items button. If you click on the dropdown button on the combobox and then click the load items button, the suggestionbox will not open on the combobox.
I look forward to hearing from you
We have achieved your requirement by setting IsDropDownOpen is true as shown in the following code snippet,
Code snippet
|
private void LoadButton_Clicked(object sender, EventArgs e)
{
ObservableCollection<Item> items = new ObservableCollection<Item>();
items.Add(new Item { Value = "1", Description = "Test 1" });
items.Add(new Item { Value = "2", Description = "Test 2" });
items.Add(new Item { Value = "3", Description = "Test 3" });
items.Add(new Item { Value = "4", Description = "Test 4" });
items.Add(new Item { Value = "5", Description = "Test 5" });
ComboBox.DataSource = items;
ItemsCount.Text = items.Count.ToString();
ComboBox.IsDropDownOpen = true;
} |
Please have a sample from the below link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxIsOpen1866532297
Please check and let us know if you have any concerns.
Regards,
Suganya Sethuraman.
Thank you for the reply.
I would prefer not to open the dropdown list programmatically, as I am using mvvm architecture and the pages in my project have multiple comboboxes that get loaded at different times. The viewmodels do not use any control specific references (i.e., I do not reference SfComboBox in my viewmodels). I only provided a small sample code to show you how to reproduce the issue, I need a way to fix the issue without programmatically opening the dropdownlist when items are loaded.
I hope this is enough information for you to understand my requirement, and I look forward to hearing from you again.
The IsDropdownOpen API of SfComboBox is the only way to open the dropdown. We handled the IsOpen property in ViewModel and set it to true after updating the DataSource of the SfComboBox in the button click. IsOpen(ViewModel property) is bound to the SfComboBox's IsDropdownOpen API.
Please have a modified sample for your reference.
Please check and let us know if you have any concerns.
Regards,
Suganya Sethuraman.
Hi Suganya,
The provided workaround does not work properly. I spent many hours trying to implement my own solution in a custom control, but did not manage. Could you please report this as an issue and fix it in an upcoming nuget package? The behavior confuses users and affects the user experience quite a lot. I have changed the sample project you provided so that you can see that it is still an issue. To reproduce, on Android, click the dropdown button of all comboboxes before loading any data, then click the button to load. The combobox selectionchange event populates the next combobox. Following this, you can see that the dropdown items are not displayed.
MainPage.xaml
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>
<StackLayout Padding="10">
<Button Text="Load Items"
x:Name="LoadButton"
Clicked="LoadButton_Clicked" />
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox"
IsDropDownOpen="{Binding IsOpen, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
SelectionChanged="ComboBox_SelectionChanged"/>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox2"
IsDropDownOpen="{Binding IsOpen1, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"/>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox3"
IsDropDownOpen="{Binding IsOpen2, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
SelectionChanged="ComboBox3_SelectionChanged"/>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox4"
IsDropDownOpen="{Binding IsOpen3, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"/>
</inputLayout:SfTextInputLayout>
<Label x:Name="ItemsCount" />
</StackLayout>
MainPaige.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void LoadButton_Clicked(object sender, EventArgs e)
{
ObservableCollection<Item> items = new ObservableCollection<Item>();
items.Add(new Item { Value = "1", Description = "Test 1" });
items.Add(new Item { Value = "2", Description = "Test 2" });
items.Add(new Item { Value = "3", Description = "Test 3" });
items.Add(new Item { Value = "4", Description = "Test 4" });
items.Add(new Item { Value = "5", Description = "Test 5" });
ComboBox.DataSource = items;
ItemsCount.Text = items.Count.ToString();
viewModel.IsOpen = true;
}
private void ComboBox_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e)
{
ObservableCollection<Item> items = new ObservableCollection<Item>();
items.Add(new Item { Value = "1", Description = "Test 1" });
items.Add(new Item { Value = "2", Description = "Test 2" });
items.Add(new Item { Value = "3", Description = "Test 3" });
items.Add(new Item { Value = "4", Description = "Test 4" });
items.Add(new Item { Value = "5", Description = "Test 5" });
ComboBox2.DataSource = items;
ComboBox3.DataSource = items;
ItemsCount.Text = items.Count.ToString();
viewModel.IsOpen1 = true;
viewModel.IsOpen2 = true;
}
private void ComboBox3_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e)
{
ObservableCollection<Item> items = new ObservableCollection<Item>();
items.Add(new Item { Value = "1", Description = "Test 1" });
items.Add(new Item { Value = "2", Description = "Test 2" });
items.Add(new Item { Value = "3", Description = "Test 3" });
items.Add(new Item { Value = "4", Description = "Test 4" });
items.Add(new Item { Value = "5", Description = "Test 5" });
ComboBox4.DataSource = items;
ItemsCount.Text = items.Count.ToString();
viewModel.IsOpen3 = true;
}
}
public class Item
{
public string Value { get; set; }
public string Description { get; set; }
}
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChange(string propertyname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
private bool isOpen;
private bool isOpen1;
private bool isOpen2;
private bool isOpen3;
public bool IsOpen
{
get { return isOpen; }
set
{
isOpen = value;
RaisePropertyChange("IsOpen");
}
}
public bool IsOpen1
{
get { return isOpen1; }
set
{
isOpen1 = value;
RaisePropertyChange("IsOpen");
}
}
public bool IsOpen2
{
get { return isOpen2; }
set
{
isOpen2 = value;
RaisePropertyChange("IsOpen");
}
}
public bool IsOpen3
{
get { return isOpen3; }
set
{
isOpen3 = value;
RaisePropertyChange("IsOpen");
}
}
}
I look forward to hearing from you again soon
| public bool IsOpen1
{
get { return isOpen1; }
set
{
isOpen1 = value;
RaisePropertyChange("IsOpen1");
}
}
public bool IsOpen2
{
get { return isOpen2; }
set
{
isOpen2 = value;
RaisePropertyChange("IsOpen2");
}
}
public bool IsOpen3
{
get { return isOpen3; }
set
{
isOpen3 = value;
RaisePropertyChange("IsOpen3");
}
|
Dear support,
I have modified the code to demonstrate the problem in more detail. Please see the code below, in which mvvm pattern is used (no code behind) with IsOpen properties for all comboboxes. To reproduce, run the code and click on the dropdown button of every combobox. Then, click on the load items button. Click on the dropdown button of the first combobox, and it fails to open. When you start to type in the suggestion box, the items appear, and then you can click on the dropdown button again. Continue until last combobox value is selected. I hope this provides enough detail so that you can reproduce the issue.
I look forward to hearing from you.
public class ViewModel : ObservableObject
{
private ObservableRangeCollection<Item> items1;
private ObservableRangeCollection<Item> items2;
private ObservableRangeCollection<Item> items3;
private ObservableRangeCollection<Item> items4;
private bool isOpen;
private bool isOpen1;
private bool isOpen2;
private bool isOpen3;
private bool isOpen4;
public bool IsOpen
{
get { return isOpen; }
set
{
isOpen = value;
OnPropertyChanged();
}
}
public bool IsOpen1
{
get { return isOpen1; }
set
{
isOpen1 = value;
OnPropertyChanged();
}
}
public bool IsOpen2
{
get { return isOpen2; }
set
{
isOpen2 = value;
OnPropertyChanged();
}
}
public bool IsOpen3
{
get { return isOpen3; }
set
{
isOpen3 = value;
OnPropertyChanged();
}
}
public bool IsOpen4
{
get { return isOpen4; }
set
{
isOpen4 = value;
OnPropertyChanged();
}
}
public ObservableRangeCollection<Item> Items1
{
get { return items1; }
set
{
items1 = value;
OnPropertyChanged();
}
}
public ObservableRangeCollection<Item> Items2
{
get { return items2; }
set
{
items2 = value;
OnPropertyChanged();
}
}
public ObservableRangeCollection<Item> Items3
{
get { return items3; }
set
{
items3 = value;
OnPropertyChanged();
}
}
public ObservableRangeCollection<Item> Items4
{
get { return items4; }
set
{
items4 = value;
OnPropertyChanged();
}
}
public ICommand LoadItemsClicked { get; set; }
public ICommand DropDown1Changed { get; set; }
public ICommand DropDown3Changed { get; set; }
public ViewModel()
{
IsOpen1 = true;
IsOpen2 = true;
IsOpen3 = true;
IsOpen4 = true;
Items1 = new ObservableRangeCollection<Item>();
Items2 = new ObservableRangeCollection<Item>();
Items3 = new ObservableRangeCollection<Item>();
Items4 = new ObservableRangeCollection<Item>();
LoadItemsClicked = new Command<object>(LoaditemsButtonClicked);
DropDown1Changed = new Command<object>(DropDown1ComboChanged);
DropDown3Changed = new Command<object>(DropDown3ComboChanged);
}
private void LoaditemsButtonClicked(object sender)
{
List<Item> list = new List<Item>();
list.Add(new Item { Value = "1", Description = "Test 1" });
list.Add(new Item { Value = "2", Description = "Test 2" });
list.Add(new Item { Value = "3", Description = "Test 3" });
list.Add(new Item { Value = "4", Description = "Test 4" });
list.Add(new Item { Value = "5", Description = "Test 5" });
Items1.AddRange(list);
IsOpen1 = true;
}
private void DropDown1ComboChanged(object sender)
{
List<Item> list = new List<Item>();
list.Add(new Item { Value = "1", Description = "Test 1" });
list.Add(new Item { Value = "2", Description = "Test 2" });
list.Add(new Item { Value = "3", Description = "Test 3" });
list.Add(new Item { Value = "4", Description = "Test 4" });
list.Add(new Item { Value = "5", Description = "Test 5" });
Items2.AddRange(list);
IsOpen2 = true;
List<Item> list1 = new List<Item>();
list1.Add(new Item { Value = "1", Description = "Test 1" });
list1.Add(new Item { Value = "2", Description = "Test 2" });
list1.Add(new Item { Value = "3", Description = "Test 3" });
list1.Add(new Item { Value = "4", Description = "Test 4" });
list1.Add(new Item { Value = "5", Description = "Test 5" });
Items3.AddRange(list1);
IsOpen3 = true;
}
private void DropDown3ComboChanged(object sender)
{
List<Item> list = new List<Item>();
list.Add(new Item { Value = "1", Description = "Test 1" });
list.Add(new Item { Value = "2", Description = "Test 2" });
list.Add(new Item { Value = "3", Description = "Test 3" });
list.Add(new Item { Value = "4", Description = "Test 4" });
list.Add(new Item { Value = "5", Description = "Test 5" });
Items4.AddRange(list);
IsOpen4 = true;
}
}
public class Item
{
public string Value { get; set; }
public string Description { get; set; }
}
----------------------------------------------------------------
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
----------------------------------------------------------------
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
xmlns:inputLayout="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
xmlns:local="clr-namespace:SFComboBox" xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="SFComboBox.MainPage">
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>
<StackLayout Padding="10">
<Button Text="Load Items"
x:Name="LoadButton"
Command="{Binding LoadItemsClicked}" />
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox"
IsDropDownOpen="{Binding IsOpen1, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
DataSource="{Binding Items1}">
<combobox:SfComboBox.Behaviors>
<xct:EventToCommandBehavior Command="{Binding DropDown1Changed}" EventName="SelectionChanged" />
</combobox:SfComboBox.Behaviors>
</combobox:SfComboBox>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox2"
IsDropDownOpen="{Binding IsOpen2, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
DataSource="{Binding Items2}"/>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox3"
IsDropDownOpen="{Binding IsOpen3, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
DataSource="{Binding Items3}">
<combobox:SfComboBox.Behaviors>
<xct:EventToCommandBehavior Command="{Binding DropDown3Changed}" EventName="SelectionChanged" />
</combobox:SfComboBox.Behaviors>
</combobox:SfComboBox>
</inputLayout:SfTextInputLayout>
<inputLayout:SfTextInputLayout Hint="Items">
<combobox:SfComboBox x:Name="ComboBox4"
IsDropDownOpen="{Binding IsOpen4, Mode=TwoWay}"
DisplayMemberPath="Description"
AllowFiltering="True"
IsEditableMode="True"
SuggestionMode="Contains"
DataSource="{Binding Items4}"/>
</inputLayout:SfTextInputLayout>
<Label x:Name="ItemsCount" />
</StackLayout>
</ContentPage>
We were able to reproduce the reported issue”IsDropDownOpen does not work properly before loading data in SfComboBox” and we have confirmed this as a bug and logged a defect report. You can track the status of the bug from the below link.
Link: https://www.syncfusion.com/feedback/33171
We will provide a patch for this issue on March 11, 2022. We appreciate your patience until then.
Note: The provided feedback link is private, and you need to log in to view this feedback.
If you have any more specifications/precise replication procedures or a scenario to be tested, you can add it as a comment in the portal.
Regards,
Suganya Sethuraman.
We have fixed reported issue ”IsDropDownOpen does not work properly before loading data in SfComboBox” in Android. Please find custom assembly from the attachment.
Assembly Version: 19.4.0.55
Note: Please refer the below link to apply the custom assembly
https://www.syncfusion.com/kb/8279/how-to-apply-the-custom-assemblies-when-configured-the-project-with-syncfusion-nuget
Currently, we have patch support only for the main and service pack release version, not for the weekly NuGet release. So only provided an assembly with 19.4.0.55 version.
This fix will be included in our volume 1 release which is expected to roll out at the end of March, 2022. Could you please check this fix with your application and let us know, whether the issue is resolved or not.
Regards,
Jeya K.
Hi Jeya K.,
Where do I find the attachment?
Sincerely,
Jano
Hi Jeya,
I have not been able to successfully reference the attached dlls, the project still has an old reference somewhere I am not aware of. Unfortunately I will have to wait for the nuget package release.
Also, thank you for the continued support Syncfusion provides.
Sincerely,
Jano
We have created a custom NuGet package in version 19.4.0.55. Please find the custom NuGet from the below link,
Custom NuGet: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfComboBox_NuGet722059831
Please refer the following link for how to use Custom NuGet
How to install the customer patch NuGet in Windows machine | Miscellaneous - Extension (syncfusion.com)
This fix will be included in our volume 1 release which is expected to roll out at the end of March 2022. Could you please check this fix with your application and let us know, whether the issue is resolved or not.
Regards,
Suganya Sethuraman.
Hi Suganya,
I followed the steps provided and added the patch via nuget manager, but I am unfortunately getting this error:
System.MissingMethodException
Message=Method not found: Xamarin.Forms.View Syncfusion.XForms.ComboBox.SfComboBox.get_LoadMoreTemplate()
Sincerely,
Jano
Attachment: error_a2996290.zip
Sorry for the inconvenience.
We have created a custom NuGet package in version 19.4.0.55. Please find the custom NuGet from the below link,
Custom NuGet: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfComboBox.19.4.0.55-1224000771
Please refer the following link for how to use Custom NuGet
How to install the customer patch NuGet in Windows machine | Miscellaneous - Extension (syncfusion.com)
This fix will be included in our volume 1 release which is expected to roll out at the end of March 2022. Could you please check this fix with your application and let us know, whether the issue is resolved or not.
Regards,
Suganya Sethuraman.
Hi
Jano,
We are glad to announce that our Essential Studio 2022 Volume 1 main release
v20.1.0.47 is rolled out and the fix for the reported issue “IsDropDownOpen
does not work properly before loading data in SfComboBox” is included in
this version v20.1.0.47 which is available for download under the following
link.
https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download
Issue Feedback Link: https://www.syncfusion.com/feedback/33171
We thank you for your support and appreciate your patience in waiting for this
release. Please get in touch with us if you would require any further
assistance.
Regards,
Suganya Sethuraman.
- 19 Replies
- 3 Participants
-
JA Jano
- Feb 4, 2022 11:45 AM UTC
- Apr 5, 2022 09:34 AM UTC
