Dynamically binding of group key

[Lorenz Becislao]

Greetings to all. Im using sfradiobutton to display variants (which is sizes & sweetness level) and options under these variants. Im populating the stacklayout bindable template using these codes in viewmodel:
     

           _variantsList = new ObservableCollection<Variants>();

     

            ObservableCollection<Options> size_options = new ObservableCollection<Options>();

            size_options.Add(new Options() { Name = "Medium", Price = "+25.00" });

            size_options.Add(new Options() { Name = "Large", Price = "+45.00" });

            size_options.Add(new Options() { Name = "Grande", Price = "+65.00" });

            ObservableCollection<Options> sweetness_options = new ObservableCollection<Options>();

            sweetness_options.Add(new Options() { Name = "25%", Price = "+0.00" });

            sweetness_options.Add(new Options() { Name = "50%", Price = "+0.00" });

            sweetness_options.Add(new Options() { Name = "75%", Price = "+0.00" });

            sweetness_options.Add(new Options() { Name = "100%", Price = "+0.00" });

            _variantsList.Add(new Variants() { Name = "Size", options = size_options, GroupKey = "Size" });

            _variantsList.Add(new Variants() { Name = "Sweetness Level", options = sweetness_options , GroupKey = "Sweetness Level"});

Im displaying the list with these codes:

                    <StackLayout>

                        <Label FontFamily="{StaticResource Montserrat-SemiBold}"

                               Padding="5,0,0,0"

                               FontSize="{DynamicResource MediumSize}"

                               Text="{Binding Name}"

                               TextColor="{DynamicResource Gray-900}" />

                                <StackLayout BindableLayout.ItemsSource="{Binding options}">

                                    <BindableLayout.ItemTemplate>

                                        <DataTemplate>

                                            <Grid>

                                                <Grid.ColumnDefinitions>

                                                    <ColumnDefinition Width="*" />

                                                    <ColumnDefinition Width="*" />

                                                </Grid.ColumnDefinitions>

                                                

                                                 <buttons:SfRadioButton Grid.Column="0"

                                                                        CheckedColor="{DynamicResource PrimaryColor}"

                                                                        HorizontalTextAlignment="Start"

                                                                        Text="{Binding Name}"

                                                                        GroupKey="{Binding GroupKey}"

                                                                        Margin="15,0,0,0"/>

                                                <Label FontFamily="{StaticResource Montserrat-SemiBold}"

                                                       Padding="5,0,0,0"

                                                       Grid.Column="1"

                                                       HorizontalTextAlignment="End"

                                                       FontSize="{DynamicResource MediumSize}"

                                                       Text="{Binding Price}"

                                                       TextColor="{DynamicResource Gray-900}" />

                                            </Grid>

                                        </DataTemplate>     

                                    </BindableLayout.ItemTemplate>

                                </StackLayout>

                    </StackLayout>

My requirement is to only select one choice on each variant. But as you can see from the image, I can select it all. Can someone help me with this? 

[Sridevi Sivakumar]

Hi Lorenz Becislao,

Greetings from Syncfusion.

We have checked the provided code snippet and we would like to let you know that GroupKey property in SfRadioButton is a type of SfRadioGroupKey not a string.  The reason for not grouping is mainly you have bound with the string value as shown in below
  

  _variantsList.Add(new Variants() { Name = "Size", options = size_options, GroupKey = "Size" });  

            _variantsList.Add(new Variants() { Name = "Sweetness Level", options = sweetness_options , GroupKey = "Sweetness Level"});  

It will be resolved by changing that to below code snippet
  

   public class ViewModel1  

    {  

        SfRadioGroupKey sizeKey = new SfRadioGroupKey();  

        SfRadioGroupKey sweetnessLevelKey = new SfRadioGroupKey();  

        private ObservableCollection<Variants> _VariantsList;  

        public ObservableCollection<Variants> VariantsList  

        {  

            get { return _VariantsList; }  

            set { _VariantsList = value; }  

        }  

  

        public ViewModel1()  

        {  

            VariantsList = new ObservableCollection<Variants>();  

  

            ObservableCollection<Options> size_options = new ObservableCollection<Options>();  

            size_options.Add(new Options() { Name = "Medium", Price = "+25.00" });  

            size_options.Add(new Options() { Name = "Large", Price = "+45.00" });  

            size_options.Add(new Options() { Name = "Grande", Price = "+65.00" });  

            ObservableCollection<Options> sweetness_options = new ObservableCollection<Options>();  

            sweetness_options.Add(new Options() { Name = "25%", Price = "+0.00" });  

            sweetness_options.Add(new Options() { Name = "50%", Price = "+0.00" });  

            sweetness_options.Add(new Options() { Name = "75%", Price = "+0.00" });  

            sweetness_options.Add(new Options() { Name = "100%", Price = "+0.00" });  

            VariantsList.Add(new Variants() { Name = "Size", options = size_options, GroupKey = sizeKey });  

            VariantsList.Add(new Variants() { Name = "Sweetness Level", options = sweetness_options, GroupKey = sweetnessLevelKey });  

  

        }  

    }  

But you have populated the collection ` options` to the StackLayout ItemsSource which has template
view of SfRadioButton. But `GroupKey` property from ViewModel is in ` VariantsList`. Hence GroupKey is not in the corresponding BindingContext , it will not be worked.

To resolve that, please use below

Code snippet  

XAML:

        <StackLayout BindableLayout.ItemsSource="{Binding VariantsList}"      

                 VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="550">  

         ...  

                <StackLayout  x:Name="stacklayout"  BindableLayout.ItemsSource="{Binding options}">  

                            <BindableLayout.ItemTemplate>  

                                <DataTemplate>  

                              ..  

                                            <buttons:SfRadioButton Grid.Column="0"    

                                                               HorizontalTextAlignment="Start"  

                                                               Text="{Binding Name}"  

                                                               GroupKey="{Binding Source={x:Reference stacklayout}, Path=BindingContext.GroupKey}"  

                                                               Margin="15,0,0,0"/>  

                               ...  

                </DataTemplate>  

        ...  

        </StackLayout>

  

Link: https://www.syncfusion.com/downloads/support/forum/158793/ze/RadioButton_Sample-1504488197  

 

Regards, 

Sridevi S. 

 

 

 

[Lorenz Becislao]

Greetings.

Thank you for your time in answering my thread. Although I achieved the desired requirements using this as a reference: https://www.syncfusion.com/blogs/post/using-bindable-layouts-with-syncfusion-controls.aspx The code snippet above also gives me the same results. Thank you and have a nice day ahead!!

[Saravanan Madheswaran]

Hi Lorenz, 

 

We are glad that the reported problem resolved at your end. Please let us know, if you have any other queries. 

 

Regards, 

Saravanan