Radio Button Column in Datagrid in Silverlight 3


In this article we will see how we can add a Radio Button Column to the DataGrid in Silverlight 3.

Creating the Silverlight Application

Fire up Visual Studio 2008 and create a Silverlight Application, name it as RadioButtonColumn.


Open the solution in Blend 3, to add a DataGrid and required controls.


As above, we have added a DataGrid and A TextBlock and A TextBox to display the selected Employee.

Now we will create an entity, based on that our DataGrid would be populated.

Add a Class and name it as Employee.cs


Our class would look similar to the following:

class Employee
    private string name;
    public string Name
        get { return name; }
        set { name = value; }
    private int age;
    public int Age
        get { return age; }
        set { age = value; }
    private string contact;
    public string Contact
        get { return contact; }
        set { contact = value; }
    private string emailId;
    public string EmailId
        get { return emailId; }
        set { emailId = value; }

Now we would create some Sample Data and populate in the DataGrid.

<Employee> myList;
public MainPage()
    myList = new List<Employee
        new Employee{ Name="Anoj Pillai", Age=24, Contact="1010101010",},
        new Employee{ Name="Arun Gopal V", Age=24, Contact="2020202020",},
        new Employee{ Name="Anulatha H", Age=24, Contact="3030303030",},
        new Employee{ Name="Dhananjay Kumar", Age=24, Contact="4040404040",},
        new Employee{ Name="Dileep Sithara", Age=24, Contact="5050505050",},
        new Employee{ Name="Diptimaya Patra", Age=24, Contact="6060606060",},
        new Employee{ Name="Mubarag Ali R", Age=24, Contact="7070707070",},
        new Employee{ Name="Rajkumar G", Age=24, Contact="8080808080",},
        new Employee{ Name="Suja R", Age=24, Contact="9090909090",},
        new Employee{ Name="Zoran G", Age=24, Contact="91919919191",},
        new Employee{ Name="Jags S", Age=24, Contact="9292929292",},
        new Employee{ Name="David Paul P", Age=24, Contact="9393939393",},
        new Employee{ Name="Kelly S", Age=24, Contact="9494994949494",}
    dgEmployee.ItemsSource = myList;

As you see the sample data is created and the Item Source is set to the List.

Now we would create custom columns for adding RadioButton Column and Other TextColumns.

data:DataGrid x:Name="dgEmployee" Margin="8,30,9,8" Width="420" AutoGenerateColumns="False" >
                <data:DataGridTemplateColumn Header="Select">
                            <RadioButton x:Name="radioSelectEmployee" GroupName="ThisGroup" IsChecked="False" VerticalAlignment="Center"  HorizontalAlignment="Center"/>
                <data:DataGridTextColumn Header="Employee Name" Binding="{Binding Name}" MinWidth="120" Width="SizeToCells" />
                <data:DataGridTextColumn Header="Age" Binding="{Binding Age}" Width="SizeToCells" />
                <data:DataGridTextColumn Header="Contact" Binding="{Binding Contact}" MinWidth="120" Width="SizeToCells" />
                <data:DataGridTextColumn Header="Email Id" Binding="{Binding EmailId}" MinWidth="120" Width="SizeToCells" />

As you see from the above xaml code, all data are bound to the property we have defined in our entity class.

While adding Radio Button you need to take care of one thing, that is you have to set the GroupName property . You can have any name in this field.

You have to set the AutoGenerateColumns value to false otherwise you would see repeated columns in the DataGrid.

Now create an event for Checked for RadioButton.

And add the following code.


Before that create another list for selected items to contain has to be declared Globaly.

<Employee> selectedList = new List<Employee>();
private void radioSelectEmployee_Checked(object sender, RoutedEventArgs e)
    if (this.dgEmployee.SelectedItem is Employee)
    foreach (var item in selectedList)
        txtSelected.Text = item.Name;

That's it now run the application and select any Row by selecting the Radio button and the Employee Name would be displayed in the TextBox.


Hope this article helps.