Naveen's Weblog

Bridge to future

Grouped RadioButton for WPF Datagrid

Posted by codingsense on February 9, 2010


Hi,

One of my friend was having a problem in implementing the radio button in datagrid, if implemented he wanted to know how to group them so that in 2 different columns radio button will be grouped as one. So after few attempts I found the following method and explained him the implementation.

To implement a radio button you have to use the DataGridTemplateColumn, where you can create your custom column for datagrid.

Download Code(5.7Kb)

The radio button was quite easily implemented as the following code




<dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>





After the implementation of the radio button we faced a challenge to group it up and we came with a very beautiful idea of giving a group name to both of them and here is what we did, we gave a groupname as “RadioGroup” to both of the radio button as




<dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="RadioGroup" IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="RadioGroup" IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>





Oops we were again into a problem, now all the cells were grouped together so we could select only one out of whole group.
Think Think Think is what we did, then we got a idea to have a group name that is unique for each row that is created. So we created a property called index which will be unique across each person, and we binded our column with the index, so that for each person instance the index will be same but not for 2 persons in the collection.
And this gave us the final solution of grouped radio button. Here is what we did.




 <dg:DataGridTemplateColumn
					Header="Male">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="{Binding Index}" IsChecked="{Binding Male}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>                
<dg:DataGridTemplateColumn
					Header="Female">                    
<dg:DataGridTemplateColumn.CellTemplate>                        
<DataTemplate>                            
<RadioButton GroupName="{Binding Index}" IsChecked="{Binding Female}" />                        
</DataTemplate>                    
</dg:DataGridTemplateColumn.CellTemplate>                
</dg:DataGridTemplateColumn>




So the main thing that has to be noted is, we should have a property that will remain unique accross the collection. If we have such property just bind it with the groupname and radio button will work absolutely fine.

Hope you found it useful. For any clarification or any better suggestions please revert back.

Happy Learning,
Codingsense 🙂

Advertisements

7 Responses to “Grouped RadioButton for WPF Datagrid”

  1. Santosh said

    Could you tell me how to save those data.(I mean male or female radio button in data base

  2. Santosh said

    Could you tell me how to save those data.
    (I mean male or female radio button in data base

  3. Jigar said

    Very helpful. You saved a lot of my R&D time 🙂

  4. Punit raval said

    Thanks Naveen, it helps me a lot. Good solutions, Saved a lots of my time.

  5. Thanks, I have some like that, but I can add rows to datagrid with information from textbox, and combobox, generating a new row with this information and one radiobutton for each new row, but if I select a radiobutton and then another, the two radiobuttons are selected when just one should be.

    If I load rows from a database I can select just one radiobutton, but if I add rows from values of textbox and combobox its possible select more than one radiobutton, but I don´t like this, I want to select just one.

    Can anyone help please, any idea?

    Excuse me, but I don´t speak English very well. 😦

  6. Helped. Thanks (Y)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s