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
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/.
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>
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.
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,
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/.
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?
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.
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"/>
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>
Mac OS 12.4
Windows 10
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
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
Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.