How do I save the Radio Button selections on Submit

[Joseph Cigno]

This is XAML. I used MVVM to get the data. There is an Accordion that loads the question as button and the answers as radio buttons displayed when Question button pressed.  How do I grab all the questions and answers from radio buttons selected to save with a Submit button?

      <ContentPage.BindingContext>

        <viewmodels:QuestionAnswersViewModel/>

    </ContentPage.BindingContext>

    <!--<ContentPage.Resources>

        <ResourceDictionary>

            <Style TargetType="RadioButton:SfRadioButton">

                <Setter Property="CheckedColor" Value="LightGreen" />

                <Setter Property="UnCheckedColor" Value="OragneRed" />

                <Setter Property="TextColor" Value="Blue" />

                <Setter Property="FontSize" Value="16" />

                <Setter Property="FontFamily" Value="Arial" />

                <Setter Property="FontAttributes" Value="Bold"/>

                <Setter Property="VisualStateManager.VisualStateGroups">

                    <VisualStateGroupList>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Checked">

                                <VisualState.Setters>

                                    <Setter Property="Background" Value="Red"/>

                                    <Setter Property="CheckedColor" Value="Blue" />

                                    <Setter Property="TextColor" Value="White"/>

                                </VisualState.Setters>

                            </VisualState>

                            <VisualState x:Name="UnChecked">

                                <VisualState.Setters>

                                    <Setter Property="UncheckedColor" Value="Green" />

                                </VisualState.Setters>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateGroupList>

                </Setter>

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>-->

    <ContentPage.Content>

        <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding Source, Mode=TwoWay}" >

            <BindableLayout.ItemTemplate>

                <DataTemplate>

                    <accordion:AccordionItem IsExpanded="{Binding IsExpanded}">

                        <accordion:AccordionItem.Header>

                            <Grid HeightRequest="48">

                                <Label Text="{Binding Question}" Margin="16,14,0,14" CharacterSpacing="0.25" FontFamily="Roboto-Regular" FontSize="14" />

                            </Grid>

                        </accordion:AccordionItem.Header>

                        <accordion:AccordionItem.Content>

                            <buttons:SfRadioGroup x:Name="radioGroup"

                                BindableLayout.ItemsSource="{Binding Answers}">

                                <BindableLayout.ItemTemplate>

                                    <DataTemplate>

                                        <buttons:SfRadioButton

                                          Text="{Binding Answer}" />

                                    </DataTemplate>

                                </BindableLayout.ItemTemplate>

                            </buttons:SfRadioGroup>

                        </accordion:AccordionItem.Content>

                    </accordion:AccordionItem>

                </DataTemplate>

            </BindableLayout.ItemTemplate>

        </accordion:SfAccordion>

    </ContentPage.Content>

</ContentPage>

[Kamalesh Periyasamy]

Hi Joseph Cigno,

 

After reviewing your query, we recommend using the SfRadioGroup's CheckedItem property to retrieve the text from the selected RadioButton using the CheckedChanged event. This approach allows us to capture the selected RadioButton and its associated BindingContext for storing the answer in the ViewModel.

 

We have prepared a sample demonstrating this approach. In the sample, the text from the selected RadioButton and its BindingContext are retrieved when the user selects an option. The selected answer is then displayed using a DisplayAlert.

 

Please find the attached sample for your reference. Kindly review it and let us know if it meets your requirements.

 

Regards,

Kamalesh P

Attachment: RadioButtonSample_d08bc322.zip

[Ella Helga]

1. ViewModel Structure: Ensure your QuestionAnswersViewModel has properties to hold the selected answers. For example, you can create a SelectedAnswer property in your question model.
2. Binding Selected Answers: Bind the SfRadioButton to the  Paper io  SelectedAnswer property of each question. Update your SfRadioButton definition like this:
   xml

   <buttons:SfRadioButton
       Text="{Binding Answer}"
       IsChecked="{Binding SelectedAnswer, Mode=TwoWay}" />
   

3. Submit Command: Implement a command in your ViewModel to handle the submission. This command should iterate through your questions and collect the selected answers.

[Brundha Velusamy]

Hi Ella,

Greetings from Syncfusion support!

We can retrieve the selected answers from the RadioGroup using the SelectedValue property. Additionally, we have updated the sample to handle answer selection through the ViewModel. Please find the updated code snippets below:

Code snippet:

//MainPage.xaml

…

<buttons:SfRadioGroup x:Name="radioGroup" SelectedValue="{Binding SelectedAnswer}"

  BindableLayout.ItemsSource="{Binding Answers}">

    <BindableLayout.ItemTemplate>

        <DataTemplate>

            <buttons:SfRadioButton Value="{Binding .}" Text="{Binding .}" />

        </DataTemplate>

    </BindableLayout.ItemTemplate>

</buttons:SfRadioGroup>
…

Button Text="Submit" Command="{Binding SubmitCommand}"/>

//QuestionAnswersViewModel.cs

…
public ICommand SubmitCommand { get; }
 

 public QuestionAnswersViewModel()

 {

     …

     SubmitCommand = new Command(SubmitAnswers);

 }

 

 private void SubmitAnswers()

 {

     string submittedAnswers = string.Join(Environment.NewLine, Source.Select(q => $"{q.Question}: {q.SelectedAnswer}"));

     Application.Current?.Windows[0].Page?.DisplayAlert("Answer Submitted", submittedAnswers, "OK");

 }

…

We have also attached a sample for your reference. Please review the files and let us know if you need any further assistance.

For more details on the SelectedValue property in SfRadioGroup, please refer to our help documentation.

Grouping in .NET MAUI Radio Button Control | Syncfusion®

Regards,

Brundha V

Attachment: RadioButtonSample_c84d981d.zip