Radio - button group

[Daniel]

Hi,

I would like to get small of radio buttons group asshow in picture?

Thanks,

[Lance | Manager Technical Support]

Hi Daniel,

There is no Telerik UI for MAUI RadioButton at this time.

you could however try to build the same scenario using RadCheckBox => .NET MAUI CheckBox Documentation | Overview | Telerik UI for .NET MAUI

Here are the other relevant articles:

• Setting the Checkbox Size
• Defining the Checked State
• Styling Options of the Checkbox

Button Group

There are no groups, like you might be used to for whatever platform you're trying to modernize (sounds like WinForms?). You will need write your own custom logic to  exclusively select only one checkbox at time.

For example:

// Select the one you want
CheckBox1.IsChecked = true;

// Manually deselect al the others
CheckBox2.IsChecked = false;
CheckBox3.IsChecked = false;

Important!

Please be aware that the native styling will be different on each platform and cannot share a predefined shape.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Daniel]

Hi,

I checked RadioButtonGroup.GroupName in small project and it works , but when I used this scenario it not working

see code and attached screenshot, maybe one control make problem.

            <Grid ColumnDefinitions="*,*, auto">
                <StackLayout  Orientation="Vertical" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" RadioButtonGroup.GroupName="DailyFreqencyRecursEvery" >
                    <Label Text="Daily Frequency" FontSize="Micro" Margin="5"/>
                    <telerik:RadBorder  BorderColor="{DynamicResource PrimaryColor}" BorderThickness="2"  HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="5" Margin="5">
                        <Grid  RowDefinitions="auto, auto" ColumnDefinitions="*,auto" Margin="5">
                            <HorizontalStackLayout Grid.Row="0" Margin="5">
                                <RadioButton x:Name="radioButtonAtOnce"  Margin="5" IsChecked="{Binding IsSelectAtOnce, Mode=TwoWay}"/>
                                <Label Margin="10" Text="Occurs Once At:" />
                                <telerikInput:RadTimePicker x:Name="timePickerAtOnce" Placeholder="Select" Time="{Binding SelectedTimeAtOnce, Mode=TwoWay}" WidthRequest="130" />
                            </HorizontalStackLayout >
                            <HorizontalStackLayout Grid.Row="1" Grid.Column="0" Margin="5" >
                                <RadioButton x:Name="radioButtonRecursEvery"  Margin="5" IsChecked="{Binding IsSelectRecursEvery, Mode=TwoWay}"/>
                                <Label Margin="10" Text="Recurs every:" HorizontalOptions="Center" VerticalOptions="Center" />
                                <telerikInput:RadNumericInput x:Name="numericInputRecursEvery" Value="{Binding SelectRecursEvery , Mode=TwoWay}" Minimum="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="200" Margin="5"/>
                                <telerikInput:RadListPicker  x:Name="timeTypeListPicker" Placeholder="Units" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="35"  WidthRequest="100"
                          ItemsSource="{Binding TimeTypesItem}" 
                          DisplayMemberPath="Value"
                          SelectedItem="{Binding SelectedTimeTypesItem, Mode=TwoWay}" >
                                    <telerikInput:RadListPicker.ItemTemplate>
                                        <DataTemplate>
                                            <Label Text="{Binding Value}"
                         HorizontalTextAlignment="Center"
                         VerticalTextAlignment="Center"/>
                                        </DataTemplate>
                                    </telerikInput:RadListPicker.ItemTemplate>
                                </telerikInput:RadListPicker>
                            </HorizontalStackLayout>
                            <StackLayout Orientation="Horizontal" Grid.Row="1" Grid.Column="1" HorizontalOptions="EndAndExpand"  VerticalOptions="CenterAndExpand" Margin="5,20,0,0"
                                         RadioButtonGroup.GroupName="DailyFreqencySpecificHour">
                                <VerticalStackLayout >
                                    <HorizontalStackLayout >
                                        <RadioButton x:Name="radioButtonSpecificHour" Margin="5"  IsChecked="{Binding IsSelectSpecificHour, Mode=TwoWay}"/>
                                        <Label Margin="10" Text="Specific Hours:" />
                                        <telerikInput:RadTimePicker x:Name="startTimePickerSpecificHours" Placeholder="Start Time" Margin="5" Time="{Binding SelectedStartTimeSpecificHours, Mode=TwoWay}" WidthRequest="130"/>
                                        <telerikInput:RadTimePicker x:Name="endTimePickerSpecificHours" Placeholder="End Time" Margin="5" Time="{Binding SelectedEndTimeSpecificHours, Mode=TwoWay}" WidthRequest="130"/>
                                    </HorizontalStackLayout>
                                    <HorizontalStackLayout >
                                        <RadioButton x:Name="radioButtonAllDay"  Margin="5" IsChecked="{Binding IsSelectAllDay, Mode=TwoWay}"/>
                                        <Label Margin="10" Text="All Day" />
                                    </HorizontalStackLayout >
                                </VerticalStackLayout>
                            </StackLayout>
                        </Grid>
                    </telerik:RadBorder>
                </StackLayout>
                <StackLayout Orientation="Vertical" Grid.Column="2"  HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" RadioButtonGroup.GroupName="Duration">
                    <Label Text="Duration" FontSize="Micro" Margin="5"/>
                    <telerik:RadBorder  BorderColor="{DynamicResource PrimaryColor}" BorderThickness="2"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" CornerRadius="5" Margin="5">
                        <Grid RowSpacing="10" RowDefinitions="auto, auto,auto" ColumnDefinitions="auto,auto" Margin="5">
                            <HorizontalStackLayout Grid.Row="0" Grid.Column="1" Margin="5"  VerticalOptions="CenterAndExpand">
                                <Label Text="Start Date:" Margin="5"   VerticalOptions="CenterAndExpand"/>
                                <telerikInput:RadDatePicker x:Name="datePickerDurationStartDate" Margin="5" Placeholder="Start Date" HeightRequest="35" Date="{Binding SelectedDurationStartDate, Mode=TwoWay}" WidthRequest="130"/>
                            </HorizontalStackLayout>
                            <HorizontalStackLayout Grid.Row="1" Grid.Column="1"  VerticalOptions="CenterAndExpand">
                                <RadioButton x:Name="radioButtonDurationEndAt"  Margin="5" IsChecked="{Binding IsSelectDurationEndAt, Mode=TwoWay}"/>
                                <Label Text="End At:" Margin="5" VerticalOptions="CenterAndExpand"/>
                                <telerikInput:RadDatePicker x:Name="datePickerDurationEndDate" Margin="5" Placeholder="End Date" HeightRequest="35" WidthRequest="130"/>
                            </HorizontalStackLayout>
                            <HorizontalStackLayout Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand">
                                <RadioButton x:Name="radioButtonDurationInfinite" Margin="5" IsChecked="{Binding IsSelectDurationInfinite, Mode=TwoWay}"/>
                                <Label Text="Infinite" Margin="5"   VerticalOptions="CenterAndExpand"/>
                            </HorizontalStackLayout>
                        </Grid>
                    </telerik:RadBorder>
                </StackLayout>
                </Grid>
 

[Lance | Manager Technical Support]

RadioButton is a Microsoft control. If GroupName is not working, you can open an Issue on GitHub and ask for help on Microsoft Q&A/StackOverflow.

Please don't forget that .NET MAUI this is still a preview and lots of things are still not working correctly.

• Whenever you run into a problem, I highly recommend searching the currently known issues first - https://github.com/dotnet/maui/issues 
• You can also check the development status of controls here https://github.com/dotnet/maui/wiki/Status 

 

[Daniel]

I open bug:

https://github.com/dotnet/maui/issues/5393

 

[Lance | Manager Technical Support]

Hi Daniel,

To be honest, that Issue will likely get closed immediately and you will not get a reply. This is because of some missing critical information that the bug report asked you for... where you only pasted in a link that creates another new GitHub Issue (instead of the information Microsoft had asked you for).

Additionally, the selection for what version of MAUI you're using is incorrect. From what I can tell, you're still using preview13 (you selected preview14).

Professional Bug Report - Tips

Preparing a good bug report takes some effort on your part. If you want that engineer to put effort into solving your problem, you also need to put in at least the amount of effort it take to properly explain the problem.

Let me share some tips on how to open an Issue report in a way that you will get meaningful answers. These tips work on any bug reporting system, not just GitHub.

1. Always include the relevant code that the engineer needs to reproduce the issue

You can't just say "x isn't working" or paste a link to another location. You need to give that other person all the code they need to see the issue, but not all your custom stuff. Only include the code that is problematic.

In the case of the RadioButton bug report, you should give them an example with RadioButtons that can be used immediately:

2. Explain in exact detail, how to replicate the problem

In addition to the code, you'll want to provide exact steps to take to replciate the issue. This is because there are so many different ways you can implement the code, or there might be different platforms or versions of that platform. You need to be precise.

For example, with the RadioButton problem, you can write steps like this:

1. Setup
   • Add the code to a new .NET MAUI project, using preview13
   • Set Android API 31 as the target platform
2. Step To Replicate
   1. Deploy the project to Android emulator
   2. Click any of the RadioButtons
   3. Click a different RadioButton
   4. => Observe: The originally selected RadioButton is still selected

That will give the investigating engineer a way to see what you're reporting exactly.

although it may take a little effort preparing this information, it will always save you time in the long run because the investigating engineer doesn't need to keep asking you additional questions about the setup (or just close your issue entirely)

 

[Daniel]

Ok.

I tested in small project is works.

but in complex layout is not working as group

I read Microsoft documnent how to use it.

[Lance | Manager Technical Support]

Okay, that's a good start to understanding a situation when you see the problem... but you need to show Microsoft how to replicate it.

Just pasting a link to our current forum thread and essentially say, "go look at this other conversation I'm having and find the code for yourself" is not good enough. Especially when explicitly asked you not to use a link to a 3rd party forum.

What's best is to just build them a runnable demo project that replicates the problem and give them that project. Remove any code that isn't necessary (i.e., remove the Telerik stuff and any other pages that adds unneeded complexity)

The fastest way to do this is:

1. Open Visual Studio
2. Select File > New Project > .NET MAUI project
3. Put the complex layout on MainPage
4. run the project and make sure the problem is occurring

When that is done:

1. Close Visual Studio
2. Option project's folder in File Explorer
3. Delete the bin and obj folders (this will decrease ZIP size from 100s of MB down to <1MB)
4. ZIP up the entire folder

Share that ZIP file along with the bug report and explain how to run it (see my last reply for tips).

[Daniel]

I test your sample it work. but when I add rad controls I get this results: