Declined
Last Updated: 03 Sep 2025 14:55 by ADMIN
Vivek
Created on: 29 Aug 2025 11:52
Category: ComboBox
Type: Bug Report
1
combobox SelectedItemTemplate working fine in ios but not in android, Kindly provide the fix.
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>
3 comments
ADMIN
Denis
Posted on: 03 Sep 2025 14:55

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!;
        }
    }
    • No SelectedItems.Clear() - we never remove the real selections, so Android keeps its background color for the selection.
    • FindDescendant<RadWrapLayout> - digs into the control to find the token container.
    • SelectionChanged handler - inserts or removes a single bound summary token.
    • label.SetBinding(... "Count") - automatically updates the token text when selections change.
    • layout.Insert(0, selectionToken) - ensures the summary token appears first.

    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.

    Vivek
    Posted on: 01 Sep 2025 09:59

    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.





    ADMIN
    Denis
    Posted on: 01 Sep 2025 09:41

    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:

    • The .NET MAUI version you are using.
    • Whether the issue occurs on a physical device or a simulator and what is the version/model, etc.

    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.