Silverlight single-click checkbox DataGrid columns

01Nov10

The title for this post is a mouthful so let me describe the back story a little bit. In Microsoft Silverlight applications we often use DataGrid controls that are databound with a boolean data field that is represented by a check box. Silverlight provides a built-in column type of DataGridCheckBoxColumn, which will display the underlying boolean data field as a standard CheckBox control inline in the DataGrid cell.

Setting up a DataGrid column using a DataGridCheckBoxColumn looks like this:

<sdk:DataGrid.Columns>
              <sdk:DataGridTextColumn Header="Name" Binding="{Binding Name}" />
             <sdk:DataGridCheckBoxColumn Header="Select" Binding="{Binding Selected}" />
</sdk:DataGrid.Columns>

However the default behavior of a databound cell in a DataGrid is to require a click on the cell itself before we can edit its contents. In the case of text fields this makes a lot of sense. You don’t want to enter edit mode immediately upon selecting a row in the grid. However, in the case of a check box, it is often the case that we’ll want to quickly check off several items in the list. Having to select the cell first means that each selection action requires two clicks in order to change the state of the check box.

The first click on the check box leaves the DataGrid looking like this:

There doesn’t seem to be much out there on forums or blogs about this issue save for this forum posting. One of the commenters has it almost right and a second commenter corrects him, but the resulting code is never provided. I had to fix this in my own application, so here is what I came up with:

           <sdk:DataGridTemplateColumn>
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <CheckBox IsThreeState="False" IsChecked="{Binding Path=Selected, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>

The solution to this problem was out there, but none of the sources described the actual problem well enough to be found easily by searching. Hopefully this post rectifies that situation.

About these ads


4 Responses to “Silverlight single-click checkbox DataGrid columns”

  1. 1 Jonathan Miller

    That worked perfect!

    • 2 newcome

      Glad to hear it. Hopefully you spent less time figuring it out than I did.

  2. Strange, there is no difference, i still have to click my Checkbox 2 times, did you bound your CheckBox to an Bool-Property?

    I’m within an ObservableCollection, so i have to Update the SelectedItem and not just a Prop

  3. 4 R

    1.5 year on, your solution still rocks :).
    Thank you!


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


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: