Radio Button Column In 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.

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:

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.

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.

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.

Hope this article helps.

Advertisements