how to bind Radio buttons in Silverlight datagrid row and read the selected value for each row in Viewmodel

Question

I have a datagrid and each row is having a set of radio buttons in 1 column. I have binded these radio buttons using a listbox datatemplate to generate Radiobuttons on the fly.

Here is the code for template:

<data:DataGrid   x:Name="formTemplate" AutoGenerateColumns="False" GridLinesVisibility="All" HeadersVisibility="All"  ItemsSource="{Binding Path=FormFieldInformation,Mode=TwoWay}"  >
  <data:DataGrid.Columns>
       <data:DataGridTemplateColumn DisplayIndex="1">
              <data:DataGridTemplateColumn.CellTemplate>
                 <DataTemplate>
                      <StackPanel>
                          <RadioButton GroupName="GN1" Content="From" Width="50" 
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                       </StackPanel>
                  </DataTemplate>
               </data:DataGridTemplateColumn.CellTemplate>
       </data:DataGridTemplateColumn>
   <data:DataGrid.Columns>
 </data:DataGrid>

But there are two problems here: 1. I can only select one single radio button among all the radio buttons generated for the whole datagrid. I want to select one radio button per row. 2. How do i get the selected radiobuttons value in ViewModel?

Any suggestions are appreciated in advance.

Thanks.

Leo Leo · Accepted Answer · 2012-05-01T18:37:57

(sorry for my bad english)

1) You need to give an unique GroupName to each RadioButton set. The easiest way I think is to bind the GroupName to a property on the class your are binding the datagrid to. Example, supose you have the class:

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool Radio1IsChecked { get; set; }
    public bool Radio2IsChecked { get; set; }
}

where "Id" is unique, bind it to the GroupName so each row will have a different one.

2) To get the checked value you will have to bind the RadioButton IsChecked to a property on your class. With the above class, it would be something like this:

<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <RadioButton GroupName="{Binding Id}" Content="From" IsChecked="{Binding Radio1IsChecked,Mode=TwoWay}"/>
        <RadioButton GroupName="{Binding Id}" Content="To" IsChecked="{Binding Radio2IsChecked,Mode=TwoWay}"/>
    </StackPanel>
</DataTemplate>

EDIT1

I supose the XAML code you posted is not the actual code you are running, right? Try this on your CellTemplate:

<DataTemplate>
<StackPanel>
    <TextBlock Text="{Binding Name}"/>
    <ItemsControl ItemsSource="{Binding Radios}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <RadioButton GroupName="{Binding GroupName}" Content="{Binding Name}" IsChecked="{Binding IsChecked,Mode=TwoWay}"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

Now your class will have to be something like this:

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Radio> Radios { get; set; }
}


public class Radio
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsChecked { get; set; }
    public string GroupName { get; set; }   
}

Now you can have multiple RadioButtons (just add them to the Item.Radios list).

Does that work for you?

how to bind Radio buttons in Silverlight datagrid row and read the selected value for each row in Viewmodel

1 Answers