[Solved] GridView with checkbox to select row

[Hector]

I am trying to build a grid row with a checkbox to select/unselect each row.  I have the checkbox in the ControlTemplate bound to the IsSelected of the DataRecord as Mode=TwoWay.  It seems to work, however, after clicking a few times on the checkboxes, the web browser freezes and I have to kill it.  Can someone let me know what I am doing wrong?  Here is part of my code:

<ControlTemplate x:Key="AccountTypesTemplate" TargetType="telerikGV:GridViewRow" >
                    <Border x:Name="rowsContainer" Background="#FF525252" Padding="8,8,8,0" >
                        <Border Background="{StaticResource Office_BlackRowBackground}" x:Name="selectedRow"
                            BorderThickness="1" BorderBrush="#FF000000" >
                            <Grid Width="400">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="30" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="55" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="60" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <CheckBox Grid.Column="0" Grid.Row="0"   Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"
                                    Margin="5,5,5,5" IsChecked="{TemplateBinding  IsSelected}" DataContext="{Binding Mode=TwoWay, Path=DataRecord }" >

                                </CheckBox>

                                <TextBlock Grid.Column="1" Grid.Row="1" Foreground="White" FontWeight="Bold" Margin="0,15,15,0"
                                VerticalAlignment="Top" HorizontalAlignment="Left" Text="Phone:" />
                                <TextBlock Grid.Column="3" Grid.Row="1" Foreground="White" FontWeight="Bold" Margin="0,15,15,0"
                                VerticalAlignment="Top" HorizontalAlignment="Left" Text="Group:" />
                                <!--Cells-->
                                <telerikGV:GridViewCell Grid.Column="1" Grid.Row="0" Foreground="White" FontWeight="Bold" Margin="0,15,15,0"
                                VerticalAlignment="Top" HorizontalAlignment="Left" Value="{Binding Description}" Grid.ColumnSpan="4" />
                                <telerikGV:GridViewCell Grid.Column="2" Grid.Row="1" Foreground="White" FontWeight="Bold" Margin="0,15,15,0"
                                VerticalAlignment="Top" HorizontalAlignment="Left" Value="{Binding Value}" />
                                <telerikGV:GridViewCell Grid.Column="4" Grid.Row="1" Foreground="White" FontWeight="Bold" Margin="0,15,15,0"
                                VerticalAlignment="Top" HorizontalAlignment="Left" Value="{Binding GroupName}" />
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>

                <Style x:Key="rowStyle" TargetType="telerikGV:GridViewRow" >
                    <Setter Property="Template" Value="{StaticResource AccountTypesTemplate}" />
                </Style>
            </Grid.Resources>

<telerikGridView:RadGridView x:Name="gridMultiSelect_accounts" ScrollMode="RealTime" IsReadOnly="True" ShowGroupPanel="False"
                                Width="400" VerticalGridlinesBrush="Transparent" RowStyle="{StaticResource rowStyle}"
                                UseAlternateRowStyle="False" AutoGenerateColumns="True" ShowColumnHeaders="False"
                                MultipleSelect="True" >
                                <telerikGridView:RadGridView.Columns>
                                    <telerikGridView:GridViewDataColumn UniqueName="ValueID" />
                                    <telerikGridView:GridViewDataColumn UniqueName="Value" />
                                    <telerikGridView:GridViewDataColumn UniqueName="ChildControl" />
                                    <telerikGridView:GridViewDataColumn UniqueName="GroupID" />
                                    <telerikGridView:GridViewDataColumn UniqueName="GroupName" />
                                    <telerikGridView:GridViewDataColumn UniqueName="Description" />
                                    <telerikGridView:GridViewDataColumn UniqueName="DefaultValue" />
                                </telerikGridView:RadGridView.Columns>

                            </telerikGridView:RadGridView>

[Milan]

Hello Hector,

I could not reproduce the browser freeze. I am sending you my test application which I used to try to reproduce the problem that you have mentioned. Does your browser freeze when you run my application?

I see that you are using TemplateBinding to sync the IsSelected property but I am afraid that this might not work well - when you change the checked state of the CheckBox control the binding will be destroyed. It might be a better idea to use the Checked/Uncheked events to syncronize the properties.

Regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Hector]

Thanks for your reply.  I did change the binding like you said and it works great.  It is not freezing anymore.  I think the problem was when I was binding.  I removed the binding from the ControlTemplate and added it in the checkbox OnLoaded event method like this:

 

private void CheckBox_Loaded(object sender, RoutedEventArgs e)
        {
            CheckBox checkBox = (CheckBox)sender;

            checkBox.SetBinding(CheckBox.IsCheckedProperty,
                new Binding("IsSelected")
                {
                    Mode = BindingMode.TwoWay,
                    Source = checkBox.ParentOfType<GridViewRow>().Record
                });
        }

Thanks to Vlad for his example! 

Source forum here!