Provide a way to show just the highlighted searched results in the ComboBox.
I would like the ComboBox to be able to handle hierarchical data sources by rendering TreeView, with checkboxes, in the dropdown.
For inspiration, see Kendo UI DropDownTree https://demos.telerik.com/kendo-ui/dropdowntree/checkboxes
if you have the following setup, more than one ComboBox controls:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<telerikInput:RadComboBox Grid.Row="0"
ItemsSource="{Binding Items}"
DisplayMemberPath="Name"
SearchTextPath="Name"
SearchMode="Contains"
Placeholder="select a response..."
FontSize="12"
x:Name="popup1"
SelectionMode="Single"
HorizontalOptions="FillAndExpand"
HighlightTextColor="DarkOrange"
IsDropDownClosedOnSelection="True"
IsEditable="True">
</telerikInput:RadComboBox>
<telerikInput:RadComboBox ItemsSource="{Binding Items}"
DisplayMemberPath="Population"
Grid.Row="1" x:Name="popup2"
SearchTextPath="Population"
SearchMode="Contains"
Placeholder="select an employee..."
FontSize="12"
SelectionMode="Single"
HorizontalOptions="FillAndExpand"
HighlightTextColor="DarkOrange"
IsDropDownClosedOnSelection="True"
IsEditable="True">
</telerikInput:RadComboBox>
</Grid>
and when the user clicks on the first/second control but did not select an item and clicks on another combo, the entry steals focus and cannot close the dwop/down or navigate away.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<telerikInput:RadComboBox BackgroundColor="Yellow" Padding="0"
Margin="0"
Grid.Column="2" x:Name="combo"
Grid.Row="0"/>
</Grid>Workaround:
set higher grid row height: 60 or above, or using Auto row height.
When using Xamarin.UITest for testing an app page containing RadComboBox, attempts to scroll the dropdown fail due to the popup for the dropdown disappearing whenever the popup created by RadComboBox is accessed by the testing framework other than a direct query by Id. (This includes in the Xamarin.UITest REPL with its "tree" command.) This prevents us from completing our automated test suite, which requires that we are able to compare all the items in the dropdown after various operations, as well as being able to scroll through the list to select particular items in it.
Attached is a simple reproduction, with an XF application for iOS and Android using RadComboBox, and a test library project which is able to perform scrolling of the dropdown popup on Android but not iOS.
Hi Team,
Please consider adding Open/Closed event for the comboBox's popup. The validation for this is I need to perform validation if a user closes the popup without making a selection.
SelectionChanged doesn't work here, because user never selected anything. Focus events are very finnicky because of the platform differences and input modalities.
The only sane options is to add an official PopupClosed event (and you don't even need custom EventArgs).
Thank you!
Bobby
Workaround
For now, I am using reflection+ nonPublic|Instance BindingFields to get a reference to the private RadPopup field of the RadComboBox. With that reference, I am subscribing to PropertyChanged and watching for value changes of the IsOpen property.
It goes without saying, this is a very resource intensive and unofficial approach.
public partial class MainPage : ContentPage
{
private RadPopup internalPopup;
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
var popup = typeof(RadComboBox).GetField("popup", BindingFlags.NonPublic | BindingFlags.Instance)?.GetValue(ComboBox1);
if (popup is RadPopup p1)
{
internalPopup = p1;
internalPopup.PropertyChanged += InternalPopup_PropertyChanged;
}
}
private void InternalPopup_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName != nameof(RadPopup.IsOpen))
return;
if (internalPopup.IsOpen)
{
// Popup was opened
}
else
{
// Popup was closed
}
}
protected override void OnDisappearing()
{
if (internalPopup != null)
internalPopup.PropertyChanged -= InternalPopup_PropertyChanged;
base.OnDisappearing();
}
}
MultiLine DisplayText is Doubling the Height on specific android devices and emulators:
DOES HAPPEN:
Galaxy S22 Ultra
Emulator Pixel 2 R 11.0
Emulator: Pixel3A android 11 api 30
DOES NOT HAPPEN:
Galaxy S22
Emulator Android 8 xh_dpi_4_65in
For example when setting the following code in App.xaml resources
<Style TargetType="telerikInput:RadComboBox">
<Setter Property="DropDownBorderColor" Value="Red"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="SearchMode" Value="Contains"/>
<Setter Property="Placeholder" Value="rwfrfre"/>
<Setter Property="PlaceholderColor" Value="Yellow"/>
<Setter Property="DisplayMemberPath" Value="Population"/>
<Setter Property="SearchTextPath" Value="Name"/>
</Style>
null ref exception is thrown for DisplayMemberPath and SearchTextPath.
When setting the style inside the page where the control is defined, it works as expected.
I would like to make the dropdown appear to the right of the ComboBox instead of showing up below the ComboBox.
Provide an API for changing the DropDown position. For example, the DropDown could be visualized above or under the input control - similar to AutoCompleteView control.
When setting dropdown thickness, the dropdown width changes:
Drop-down freezes when double tap (using the track pad), or double click in the combo at a very bottom of the control.
The drop-down cannot be closed and the combo cannot be used