Using latest telerik version with .net9. Following is applying and showing perfect background color of
selected items but its not working in android.
Kindly provide the fix
<telerik:RadComboBox.SelectedItemTemplate>
<DataTemplate>
<telerik:RadBorder BackgroundColor="#CACACA">
<VerticalStackLayout>
<Label Text="{Binding EmailId}"
FontSize="16"
FontAttributes="Bold"
Padding="18,14"
TextColor="{StaticResource SharkColor}"/>
</VerticalStackLayout>
</telerik:RadBorder>
</DataTemplate>
</telerik:RadComboBox.SelectedItemTemplate>
Hi Vivek,
Thanks for clarifying the requirement.
The goal is for the RadComboBox to display a single summary token (for example "n user(s) selected.") even when multiple items are chosen, while maintaining consistent behavior across iOS and Android.
I checked the available API of the ComboBox control and I can suggest an approach you can use to achieve the scenario. Here are the steps you need to follow:
1. Create a custom RadComboBox subclass:
We will subclass RadComboBox so we can inject a summary token into the token layout without clearing the actual SelectedItem.
public class MyComboBox : RadComboBox
{
private ContentView selectionToken;
private RadWrapLayout layout;
private bool isInitialized;
public MyComboBox()
{
this.Loaded += (_, _) => this.Initialize();
}
protected override void OnHandlerChanged()
{
base.OnHandlerChanged();
this.Dispatcher.Dispatch(this.Initialize);
}
private void Initialize()
{
if (this.isInitialized)
{
return;
}
this.layout = FindDescendant<RadWrapLayout>(this);
if (this.layout == null)
{
return;
}
this.SelectionChanged += this.MyComboBox_SelectionChanged;
this.isInitialized = true;
}
private void MyComboBox_SelectionChanged(object sender, ComboBoxSelectionChangedEventArgs e)
{
if (this.layout == null)
{
return;
}
int count = SelectedItems.Count;
if (count > 0)
{
if (this.selectionToken == null)
{
var label = new Label
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
};
label.SetBinding(Label.TextProperty, new Binding("Count")
{
Source = SelectedItems,
StringFormat = "{0} selected"
});
this.selectionToken = new ContentView { Content = label };
}
if (!this.layout.Contains(this.selectionToken))
{
this.layout.Insert(0, this.selectionToken);
}
}
else if (this.layout.Contains(this.selectionToken))
{
this.layout.Remove(this.selectionToken);
}
}
private static T FindDescendant<T>(Element parent) where T : Element
{
if (parent is T match) return match;
if (parent is IElementController controller)
{
foreach (var child in controller.LogicalChildren)
{
var result = FindDescendant<T>(child);
if (result != null)
{
return result;
}
}
}
return null!;
}
}2. Define a TokenTemplate in XAML:
Hide the default token template:
<local:MyComboBox x:Name="comboBox"
ItemsSource="{Binding Items}"
SelectionMode="Multiple"
IsEditable="True"
DisplayMemberPath="EmailId"
AutomationId="comboSelectedItemMultiple"
WidthRequest="200">
<local:MyComboBox.TokenTemplate>
<DataTemplate>
<!-- hide the token view -->
<ContentView IsVisible="False">
</ContentView>
</DataTemplate>
</local:MyComboBox.TokenTemplate>
<local:MyComboBox.SelectedItemTemplate>
<DataTemplate>
<telerik:RadBorder BackgroundColor="#CACACA">
<VerticalStackLayout>
<Label Text="{Binding EmailId}"
FontSize="16"
FontAttributes="Bold"
Padding="18, 14"
TextColor="{StaticResource SharkColor}"/>
</VerticalStackLayout>
</telerik:RadBorder>
</DataTemplate>
</local:MyComboBox.SelectedItemTemplate>
</local:MyComboBox>A sample project and screenshots from various devices demonstrating the final result on my end have been attached for reference. Testing on both iOS and Android should confirm consistent behavior and visual appearance.
I have changed the item status to Declined as we do not consider the initially described behavior as an issue, rather than a custom implementation for achieving the requested scenario.
Regards,
Denis
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
I have also tried and sorry for the confusion but its working fine in android as well.But the problem is I want to display a single token even user select multiple items from the list. So for that purpose I am using
private void Rad_OnSelectionChanged(object sender, ComboBoxSelectionChangedEventArgs e)
{
var combo = (RadComboBox)sender;
var count = combo.SelectedItems.Count();
if (count > 0)
{
var newUsers = e.AddedItems.OfType<ClientUser>().ToList();
foreach (var user in newUsers)
{
_selectedUsers.Add(user);
}
foreach (var removed in e.RemovedItems.OfType<ClientUser>())
{
_selectedUsers.Remove(removed);
}
ProductDetailsViewModel.SelectedUserIds = _selectedUsers;
. combo.SelectedItems.Clear();if (_selectedUsers.Any())
{
combo.SelectedItems.Add($"{_selectedUsers.Count} user(s) selected");
}
}
As I need to display a single token as $"{_selectedUsers.Count} user(s) selected"
,
TO display this I have to clear selecteditems combo.SelectedItems.Clear();
because of this android not showing SelectedItemTemplate 's background color but ios is working fine.
Kindly provide me a solution for this.
Hello Vivek,
Thank you for the information.
I tested the scenario and on my side the background color appears to be rendering correctly. I've attached both a screenshot and the corresponding project for your review.
To assist further, could you please provide the following details:
If possible, please modify the attached project so that it reproduces the issue. This will help us further research the case. Before sending it back, kindly delete the bin, obj folders. Then archive the project and attach it here.
Thank you for your cooperation.
Regards,
Denis
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.