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.



Introduction

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.

1.gif

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

2.gif

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

3.gif

Our class would look similar to the following:

public
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.

List
<Employee> myList;
public MainPage()
{
    InitializeComponent();
    myList = new List<Employee
    {
        new Employee{ Name="Anoj Pillai", Age=24, Contact="1010101010", EmailId=pillaianoj@some.com},
        new Employee{ Name="Arun Gopal V", Age=24, Contact="2020202020", EmailId=vgopalarun@some.com},
        new Employee{ Name="Anulatha H", Age=24, Contact="3030303030", EmailId=hanulatha@some.com},
        new Employee{ Name="Dhananjay Kumar", Age=24, Contact="4040404040", EmailId=kumardhananjay@some.com},
        new Employee{ Name="Dileep Sithara", Age=24, Contact="5050505050", EmailId=sithara@some.com},
        new Employee{ Name="Diptimaya Patra", Age=24, Contact="6060606060", EmailId=patradiptimaya@some.com},
        new Employee{ Name="Mubarag Ali R", Age=24, Contact="7070707070", EmailId=ralimubarag@some.com},
        new Employee{ Name="Rajkumar G", Age=24, Contact="8080808080", EmailId=grajkumar@some.com},
        new Employee{ Name="Suja R", Age=24, Contact="9090909090", EmailId=rsuja@some.com},
        new Employee{ Name="Zoran G", Age=24, Contact="91919919191", EmailId=gzoran@some.com},
        new Employee{ Name="Jags S", Age=24, Contact="9292929292", EmailId=sjags@some.com},
        new Employee{ Name="David Paul P", Age=24, Contact="9393939393", EmailId=ppdavid@some.com},
        new Employee{ Name="Kelly S", Age=24, Contact="9494994949494", EmailId=skelly@some.com}
    };
    dgEmployee.ItemsSource = myList;
}

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

4.gif
 
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:DataGrid.Columns>
                <data:DataGridTemplateColumn Header="Select">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <RadioButton x:Name="radioSelectEmployee" GroupName="ThisGroup" IsChecked="False" VerticalAlignment="Center"  HorizontalAlignment="Center"/>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
                <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" />
            </data:DataGrid.Columns>
</data:DataGrid>

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.

5.gif

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

List
<Employee> selectedList = new List<Employee>();
private void radioSelectEmployee_Checked(object sender, RoutedEventArgs e)
{
    selectedList.Clear();
    if (this.dgEmployee.SelectedItem is Employee)
    {
        selectedList.Add(((Employee)this.dgEmployee.SelectedItem));
    }
    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.

6.gif

Hope this article helps.