RadComboBox issues

2 Answers 47 Views
ComboBox
Scofield
Top achievements
Rank 1
Iron
Iron
Scofield asked on 27 Jun 2022, 09:04 AM | edited on 27 Jun 2022, 12:58 PM

ENV: Maui workload 6.0.312 with Telerik UI for .NET MAUI 1.0.1

#1: Dose RadComboBox the support insert a icon as placeholder and input validation as below in the future roadmap?

#2 the bordercolor doesn't work (tried in TelerikSample app as well), what do I miss for this bordercolor setting?

also tried the Maui workload 6.0.400 with Telerik UI for .NET MAUI 2.0.0
<telerik:RadComboBox SelectionMode="Multiple" IsEditable="True" BorderColor="Green" BorderThickness="3"
                     DropDownBorderColor="Blue"
                     DropDownBorderThickness="2"
                     DropDownCornerRadius="5"
                     DropDownBackgroundColor="LightBlue">
                <telerik:RadComboBox.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>USA</x:String>
                        <x:String>Uganda</x:String>
                        <x:String>Ukraine</x:String>
                        <x:String>Canada</x:String>
                        <x:String>France</x:String>
                        <x:String>Italy</x:String>
                        <x:String>United Kingdom</x:String>
                        <x:String>China</x:String>
                        <x:String>Japan</x:String>
                    </x:Array>
                </telerik:RadComboBox.ItemsSource>
            </telerik:RadComboBox>

2 Answers, 1 is accepted

Sort by
0
Antoan
Telerik team
answered on 28 Jun 2022, 05:20 PM

Greetings Scofield,

Thank you for the provided code snippet.

Let me go straight to the questions.

  • Does the ComboBox Placeholder support icons? - The answer is no, as the Placeholder is of type String it does not support icons.

  • Does the ComboBox support input validation ? - Currently we do not have input validation for the ComboBox, I have logged a Feature Request on your behalf for that. You can follow the item on our public feedback portal and be notified when its status changes from the following link:
    https://feedback.telerik.com/maui/1570738-radcombobox-input-validation-support 

  • The bordercolor doesn't work. - Indeed, after some research and testing I reproduced the issue, it seems that the BorderColor is not applied to the border, I have logged a bug on the matter on your behalf. You can follow the item from the following link: https://feedback.telerik.com/maui/1570733-radcombobox-bordercolor-does-not-apply-a-color 

In addition to change the border color without using BorderColor I would suggest going with BorderBrush as it does a similar job. Finally, I have updated your Telerik points for reporting the issue.

Regards,
Antoan
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/.

Scofield
Top achievements
Rank 1
Iron
Iron
commented on 29 Jun 2022, 12:28 PM

Thanks for your supports, Antoan! Btw, do we support the visual states in RadComboBox like button state: pressed/hover/rest/focused/active/disable


<Button Text="Click me!"
        ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="0.8" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Button>

Antoan
Telerik team
commented on 30 Jun 2022, 12:29 PM

Hello Scofield, 

Indeed our ComboBox does support some of the visual states, we have support for focused, normal and disabled. However we do not support pressed, hover, active and rest as those are typical for the Button and differ from the concept of the ComboBox. If you are in need of any of those four, could you elaborate in what scenario you would like to use them, so we may have a better understanding of your needs.

Regards,
Antoan
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.

Scofield
Top achievements
Rank 1
Iron
Iron
commented on 01 Jul 2022, 02:04 AM

Good to know that and do you have any sample code of visual states like focused, normal and disabled?  for the rest of the state, I just take Button as example,  and we understand that those are typical for the Button and differ from the concept of the ComboBox, 

 

Antoan
Telerik team
commented on 04 Jul 2022, 01:56 PM

Hi Scofield,

We do not have sample code for the visual states of the ComboBox in our sample apps, but I built something for you. You can try the following code to see the Focused, Normal and Disabled states:

 

<telerik:RadComboBox x:Name="boundEditalbeCombo" AutomationId="boundEditalbeCombo"
                             ItemsSource="{Binding People}"
                             DisplayMemberPath="FullName"
                             SearchTextPath="FullName"
                             IsEnabled="False"
                             Placeholder="Bound Editalbe Combo"
                             IsEditable="True">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="FontSize" Value="36" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="FontSize" Value="22" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Pink" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </telerik:RadComboBox>

 

Currently the code is set to show the "Disabled" visual state. If you want to see how Focused works just set "IsEnabled" to True.

I hope this gives some clarity on how to use the visual states of the ComboBox.

Regards,
Antoan
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/.

Scofield
Top achievements
Rank 1
Iron
Iron
commented on 13 Jul 2022, 12:53 PM | edited

Hey Antoan,

I just try Focused state in my local and find some small issues:

1. the mouse disappeared

2. the [Search] placeholder go to the bottom a little bit

Btw, can we hide the dropdown button?

Antoan
Telerik team
commented on 15 Jul 2022, 05:15 AM

Hi Scofield,

Thank you for the providing feedback.

I have just tested the focused state of the ComboBox and I do not seem to experience the same result. For testing purposes I have used the following code:

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                                 DisplayMemberPath="Population"
                                 Placeholder="Search">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Focused">
                            <VisualState.Setters>
                                <Setter Property="BorderBrush" Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </telerik:RadComboBox>

The result is as follows:

Before being focused:

After focused state is activated:

I believe there might be a different part of the code rather than the focused state that makes the ComboBox behave in such a way. Could you send a code snippet of the ComboBox together with the Layout in which it is declared so we can investigate further.

I am looking forward to your reply.

Regards,
Antoan
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.

Scofield
Top achievements
Rank 1
Iron
Iron
commented on 18 Jul 2022, 02:05 PM | edited

I think the "BorderThickness" cause this issue in windows... btw, it works good in MacOS 

Note: tried this one in both

 ENV: Maui workload 6.0.312 with Telerik UI for .NET MAUI 1.0.1

ENV: Maui workload 6.0.408 with Telerik UI for .NET MAUI 2.1.0

<VisualState Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="BorderThickness" Value="4"/>

Didi
Telerik team
commented on 19 Jul 2022, 02:01 PM

Hi Schofield,

Please send me the complete page definition where the ComboBox is placed as I cannot reproduce the issue with the BorderThickness and Label text. 

Here is the setup I use:

<VerticalStackLayout WidthRequest="300" HorizontalOptions="Center">
    <telerik:RadComboBox ItemsSource="{Binding Items}" IsEditable="True" Placeholder="Select value"
                            DisplayMemberPath="Population">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="BorderThickness" Value="4"/>
                        <Setter Property="BorderBrush" Value="Blue"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BorderThickness" Value="2"/>
                        <Setter Property="BorderBrush" Value="Red"/>

                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </telerik:RadComboBox>
</VerticalStackLayout>

 

Scofield
Top achievements
Rank 1
Iron
Iron
commented on 20 Jul 2022, 02:19 PM

will do it tomorrow and one quick question: what was the telerik lib version and OS (Win/Mac) you have?
Didi
Telerik team
commented on 20 Jul 2022, 02:54 PM

Telerik .NET MAUI 2.1.0 version, 
Mac OS 12.4
Windows 10 
Scofield
Top achievements
Rank 1
Iron
Iron
commented on 27 Jul 2022, 03:20 AM

Hi Didi,

I used Telerik Sample app to have a try, I think the root cause should be the whole combox size changed a lot after we change "BorderThickness"  

Telerik .NET MAUI 2.1.0 version, 
Windows 10 with MAUI workload 408

0
Antoan
Telerik team
answered on 29 Jul 2022, 01:52 PM

Hello Scofield,

Thank you for the provided information.

I have gone over the previous replies and noticed that the ComboBox from your project looks smaller than the default size. Have you set a HeightRequest to it ? If you have this may be the source of the issue, usually the border would expand beyond the control, but setting a HeightRequest to the Control prevents it from expanding outside the ComboBox, making the border to expand inwards.

This isn't a bug, but in fact the expected behavior as the elements of the control shouldn't go over the Height and Width the control has been set to.

I hope this gives some clarity on the behavior of the border.

Regards,
Antoan
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
ComboBox
Asked by
Scofield
Top achievements
Rank 1
Iron
Iron
Answers by
Antoan
Telerik team
Share this question
or