Configure GridViewCheckBox as System.Windows.CheckBox

[Fabiana]

Hello support!!

I created my theme, and now I am trying to modify GridViewCheckBoxColumn of RadGridView, but nothing happened. I modify others controls, for example :System.Windows.CheckBox.xaml. And I would like to set GridView checkbox with the same color of System.Windows.CheckBox.xaml. Thanks!



See System.Windows.CheckBox.xaml code:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
                    xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="ControlForeground" Color="#FF00335B" />
<SolidColorBrush x:Key="ControlOuterBorder_Over" Color="#FF77B800" />
<LinearGradientBrush x:Key="ControlInnerBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFBFCFD" Offset="0"/>
        <GradientStop Color="#FFB9C2A9" Offset="1"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="ControlActiveElementBackground_Pressed" Color="White"/>
<SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FFD9D9D9" />
<LinearGradientBrush x:Key="ControlInnerBackground_Disabled" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF8F8F8" Offset="1"/>
        <GradientStop Color="#FFE5E5E5"/>
    </LinearGradientBrush>
<SolidColorBrush x:Key="ControlShapeFill_Disabled" Color="#FFA7A7A7" />
<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF77B800" />
<SolidColorBrush x:Key="ControlBackground" Color="White" />
<SolidColorBrush x:Key="ControlInnerBackground" Color="White"/>
<SolidColorBrush x:Key="ControlShapeFill" Color="#FF00335B" />

    
    <!--  style for CheckBox -->
    <Style  TargetType="CheckBox">
        <Setter Property="Foreground" Value="{StaticResource ControlForeground}" />
       
        <Setter Property="Padding" Value="4 0 0 0" />
       
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="16" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                       
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal" />
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlOuterBorder_Over}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlOuterBorder_Over}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlInnerBackground_Over}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlActiveElementBackground_Pressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlOuterBorder_Disabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlOuterBorder_Disabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlInnerBackground_Disabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlShapeFill_Disabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlShapeFill_Disabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="CheckStates">
                                <vsm:VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unchecked" />
                                <vsm:VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="ValidationStates">
                                <vsm:VisualState x:Name="Valid"/>
                                <vsm:VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationTooltip" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationTooltip" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationTooltip" Storyboard.TargetProperty="IsOpen">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                       
                        <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Border x:Name="OuterBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="1"
                                    Width="14" Height="14"
                                    VerticalAlignment="Center"
                                    Background="{StaticResource ControlBackground}">
                               
                                <Border x:Name="InnerBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="1"
                                        Margin="1"
                                        Background="{StaticResource ControlInnerBackground}" />
                               
                            </Border>
                           
                            <Path x:Name="CheckIcon" Stretch="Fill" Width="8" Height="8" Stroke="{StaticResource ControlShapeFill}"
                                  VerticalAlignment="Center"
                                  Data="M32.192282,77.371554 L34.688632,80.304322 38.863374,72.720928" StrokeThickness="2" Opacity="0"/>
                            <Path x:Name="IndeterminateIcon" Stretch="Fill" Width="8" Height="2" Stroke="{StaticResource ControlShapeFill}" StrokeThickness="2"
                                  VerticalAlignment="Center"
                                  Data="M14.708333,144.5 L20.667,144.5" Opacity="0"/>

                           
                            <telerikChromes:ValidationTooltip x:Name="ValidationTooltip"
                                    Visibility="Collapsed"
                                    Width="14" Height="14" CornerRadius="0"
                                    DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                            </telerikChromes:ValidationTooltip>
                           
                        </Grid>
                        <ContentPresenter Grid.Column="1" x:Name="contentPresenter"
                                Content="{TemplateBinding Content}"
                               
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}" />
                               
                    </Grid>

                   

                </ControlTemplate>
            </Setter.Value>
        </Setter>
       
    </Style>
    

</ResourceDictionary>



See GridViewCheckBox.xaml code:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                   
               
               
                    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"    
                    xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
                    xmlns:treelist="clr-namespace:Telerik.Windows.Controls.TreeListView;assembly=Telerik.Windows.Controls.GridView"
                    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" >
    
    
    
    <!-- CHECKBOX -->
    <ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="grid:GridViewCheckBox">
        <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Width="13" Height="13">
           
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="CheckedPath" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="Indeterminate">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="IndeterminatePath" Storyboard.TargetProperty="(UIElement.Visibility)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
           

            <Border BorderBrush="#FF989898" BorderThickness="1,1,1,1">
                <Border BorderBrush="#FFEEEEEE" BorderThickness="1,1,1,1">
                    <Border BorderThickness="1,1,1,1" Background="#FFE0E0E0" BorderBrush="#FFB9B9B9">
                        <Grid Margin="0">
                            <Path x:Name="IndeterminatePath" Visibility="Collapsed" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Data="M14.708333,144.5 L20.667,144.5" Width="7" Height="7" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
                            <Path x:Name="CheckedPath"  Visibility="Collapsed" Stretch="Fill" Stroke="#FF8D8D8D" Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144" StrokeThickness="1.5" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </Border>
            </Border>

        </Grid>
       
    </ControlTemplate>

    <Style
       
        TargetType="grid:GridViewCheckBox">
        <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}" />
    </Style>

    
    
</ResourceDictionary>

[Vanya Pavlova]

Hello Fabiana,

I have created a sample that demonstrates how to restyle GridViewCheckBox-you can modify it as you wish.If you want to apply any additional animations on different states (even they are not defined as it is in standart checkbox for Silverlight) I would like to suggest you to do it in Blend,but also I want to remember you that when you wish to do that be careful with the names of the parts (Borders,Paths...etc.) in GridViewCheckBox-make them to be the same as it is in standard checkbox.
If you have any additional questions please let me know.

All the best,
Vanya Pavlova
the Telerik team

[Fabiana]

Hello Vanya.

I saw your example. I have just 1 question: You added CornerRadius="6". When I executed your example, I saw CornerRadius="6",but when I clicked in some checkbox, come back to original state. The same if I changed the color os check box...When I click, lost my new color... Ho to resolve it?

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="telerik:GridViewCheckBox">
        <Grid HorizontalAlignment="Left" Height="13" VerticalAlignment="Center" Width="13">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedPath">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="Indeterminate">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="IndeterminatePath">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="#FF9FE800" BorderThickness="1" CornerRadius="6">
                <Border BorderBrush="#FF9FE800" BorderThickness="1,1,1,1" CornerRadius="6">
                    <Border BorderBrush="#FF9FE800" BorderThickness="1,1,1,1" Background="#FFE0E0E0" CornerRadius="6">
                        <Grid Margin="0">
                            <Path x:Name="IndeterminatePath" Data="M14.708333,144.5 L20.667,144.5" HorizontalAlignment="Center" Height="7" Margin="0" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Visibility="Collapsed" VerticalAlignment="Center" Width="7"/>
                            <Path x:Name="CheckedPath" Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144" HorizontalAlignment="Center" Margin="0" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Visibility="Collapsed" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </Border>
            </Border>
        </Grid>
    </ControlTemplate>
    <Style TargetType="telerik:GridViewCheckBox">
        <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}"/>
    </Style>


    
</ResourceDictionary>

[Fabiana]

Another question is:

I am using GridViewSelectColumn, and how to set style of this column type, as the same of System.Windows.CheckBox.xaml style.

Thanks!!

[Vanya Pavlova]

Hello Fabiana,

Attached is an example which demonstrates a possible approach for resolution. The origin of the problem  with EditorStyle property of the GridViewCheckBoxColumn. The fix will be available with our latest internal build which is expected later today. Please download it and update your project.

All The Best,
Vanya Pavlova
the Telerik team

[Fabiana]

Hi Vanya !

Thank you for example!! Perfect!

I saw that GridViewSelectColumn in RadGridView was changed, perfect!

But I have just one question:

1) I saw that in CheckBoxResourceDictionary.xaml file you set <Style  TargetType="CheckBox">
And in my theme project I changed System.Windows.CheckBox.xaml, and inside this file, exists : <Style   TargetType="CheckBox"> too.

If GridViewSelectColumn  use TargetType="CheckBox", why System.Windows.CheckBox.xaml theme was not applied to it?

2) Is not GridViewSelectColumn  a System.Windows.CheckBox. control ? If not, why there is no a file in RadControls theme folder to set GridViewSelectColumn  as had to a lot of controls: FrozenColumnsSplitter, GridViewAggregateResultCell,ButtonChrome, ............

Thanks!

[Vanya Pavlova]

Hi Fabiana,

The GridViewSelectColumn uses a standard System.Windows.CheckBox. I've created two styles and the difference between them is that the style which resides in CheckBoxResourceDictionary2.xaml  is named as CheckBoxEditorStyle and is applied to the EditorStyle property of the GridViewCheckBoxColumn.

The fix will be available with the latest internal build later today.

Sincerely yours,
Vanya Pavlova
the Telerik team

[Juliana]

Hi Team,

The sample works perfectly for all GridViewCheckBoxes. But I need to use something like StyleSelector to apply this style when GridViewCheckBox is checked and leave it standard look when it's not. I tried CellStyleSelector, but it didn't work out. How can I achieve that?

Thanks,
Juliana

[Vanya Pavlova]

Hello Juliana,

Please download our latest internal build and you will easily achieve this effect and the StyleSelector will be applied whenever you change the value in the cell.
 
Sincerely yours,
Vanya Pavlova
the Telerik team

[Juliana]

Hi,

I think I wasn't clear enough. In example there is a style
<Style TargetType="telerik:GridViewCheckBox">
which is applied to all GridViewCheckBoxes in GridViewCheckBoxColumn. I guess it is something like a theme. And I need to modify GridViewCheckBox appearance in a cell depending on conditions. The thing is that I even can't get how to apply this style for the only one cell. How can I achieve this?

LFTHFY,
Juliana.

[Vanya Pavlova]

Hi Juliana,

Please accept my apology for the initial misunderstanding, with my colleague Yavor we have developed and application that changes the Style of GridViewCheckBox based on a property value of the underlying object using DateTemplateSelectors. 

Please see the attached and let me know if you need any further assistance.

Regards,
Vanya Pavlova
the Telerik team

[Juliana]

Hi Vanya,

No need to apologize. Thanks a lot for your help and patience.
As far as I understand, in the sample we step back from GridViewCheckBoxColumns. In this case I have some questions:

1. How can I implement behavior AutoSelectOnEdit="True" , in order not to click twice on cell to change its value? Actually in the sample when a cell is checked(displays GridViewCheckBox by template), I have to click twice. And when the cell is unchecked(displays Checkox), I click only once. But in the first case I have CellEditEnded event fired and in the second - I have not. So the problem is to edit in one click and have CellEditEnded event fired. Is replacing GridViewCheckBox with CheckBox in datatemplate and handling its click event the only one solution in my case?

2. When I click on unchecked cell, it gets checked but loses focus(it goes to the nearest unchecked cell). How can I avoid it?

Thanks a lot,
Juliana.

[Maya]

Hello Juliana,

Basically, if you do not want to click twice on a CheckBox to check/uncheck it, all you need to do is to set the IsReadOnly property of the corresponding column to "True". However, on looking at your requirement, I am not quite sure it will serve your needs. So, in order to provide you with a more appropriate solution, I would need a bit more information about your project. Do you want to handle the CellEditEnded and to implement some custom logic ? What exactly is the behavior you want to achieve ? 

Greetings,
Maya
the Telerik team

[Juliana]

Hello Maya ,

I guess the answer for the first question is "Yes, it's the only one solution". Ok, and what about the second one?

2. When I click on unchecked cell, it gets checked but loses focus(it goes to the nearest unchecked cell). How can I avoid it?
Correction: when I click on checkbox(no matter it is checked or not), focus jumps to the bottom cell.

 <local:MyTemplateSelector x:Key="DisabledCellTemplate">
            <local:MyTemplateSelector.Template1>
                <DataTemplate>
                    <CheckBox Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Married, Mode=TwoWay}"
                              Click="CheckBox_Click"/>
                </DataTemplate>
            </local:MyTemplateSelector.Template1>
            <local:MyTemplateSelector.Template2>
                <DataTemplate>
                    <CheckBox IsChecked="{Binding Married, Mode=TwoWay}"
                              Click="CheckBox_Click_1"/>
                </DataTemplate>
            </local:MyTemplateSelector.Template2>
        </local:MyTemplateSelector>
<telerik:RadGridView x:Name="radGrid" Margin="32,30,31,164" Grid.Row="1" AutoGenerateColumns="False"
                             RowEditEnded="radGrid_RowEditEnded" CellEditEnded="radGrid_CellEditEnded">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="FirstName" DataMemberBinding="{Binding FirstName}"/>
                <telerik:GridViewDataColumn Header="LastName" DataMemberBinding="{Binding LastName}"/>
                <telerik:GridViewDataColumn  Header="Married"
                                            EditTriggers="None"
                                             UniqueName="col1" DataMemberBinding="{Binding Married, Mode=TwoWay}"
                                             CellTemplateSelector="{StaticResource DisabledCellTemplate}"
                                             />
                <telerik:GridViewDataColumn Header="Age" DataMemberBinding="{Binding Age}"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

Thanks,
Juliana.

[Maya]

Hi Juliana,

Unfortunately, I was not able to reproduce the issue you described. What version of RadControls do you use ? Do you perform some additional steps or you just click on a CheckBox and the focus jumps to the end ? 

Regards,
Maya
the Telerik team

[Juliana]

Hi Maya,

You are right, there is no problem with 2010.1.603.1040 version. Even selected item is set correctly.  But I use  2010.2.1008.1040 and have to set selected item in code behind, like

               radGrid.SetIsSelected((e.OriginalSource as CheckBox).DataContext, true);

 I also tried 2010.2.924.1040  and had the same problem. It seems like it works well with Q1 but not with Q2.

Thanks,
Juliana.

[Maya]

Hello Juliana,

Setting the selected item using SetIsSelected in not a recommended approach as this method is not meant 
to be used directly from the code behind. Instead, you can use the SelectedItem property of the RadGridView. The row corresponding to a particular CheckBox can be found with the extension method ParentOfType<GridViewRow>() in your case. 

 

Kind regards,
Maya
the Telerik team

[Juliana]

Hello Maya,

Ok, thanks I'll take it into account. Could you reproduce my issue? Any guidance?

Thanks,
Juliana.

[Maya]

Hi Juliana,

Unfortunately, I was not able to. Please try to change the logic for setting the selected item and tell me if it changes the undesired behavior of loosing the focus. Do you do anything specific for getting this behavior or you just click on a CheckBox ? Do you reproduce the issue in the sample project attached previously ?
 

Kind regards,
Maya
the Telerik team

[Juliana]

Hi Maya,
I don't do anything specific. Steps to reproduce:
1. set Template1 property of DisabledCellTemplate as
 <CheckBox Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Married, Mode=TwoWay}"/>
2. modify Template2 property of DisabledCellTemplate as
<CheckBox IsChecked="{Binding Married, Mode=TwoWay}"/>
3. set AutoGenerateColumns="False" in radGrid
4. declare Married column as
  <telerik:GridViewDataColumn  Header="Married" EditTriggers="None"
                                             UniqueName="col1" DataMemberBinding="{Binding Married,Mode=TwoWay}"
                                             CellTemplateSelector="{StaticResource DisabledCellTemplate}"
                                            />
5 modify Employee class to implement INotifyPropertyChanged
public class Employee: INotifyPropertyChanged
    {
        public string FirstName
        {
            get;
            set;
        }
        public string LastName
        {
            get;
            set;
        }
        public int Age
        {
            get;
            set;
        }
        private bool _isMarried;
        public bool Married
        {
            get
            {
                return _isMarried;
            }
            set
            {
                _isMarried = value;
                NotifyPropertyChanged("Married");
            }
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// Fires PropertyChangedEvent for the specified property.
        /// </summary>
        /// <param name="propertyName">Name of the property.</param>
        protected void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion

    }
6. Run project and it works perfectly.
7. Change dlls version to 2010.2.924.1040 and this is the place where it stops working correctly.(without my logic of setting selected item).  I just click on a CheckBox(not on a cell with it but right on it) in any row. As a result, the first row remains to be selected and focus jumps down (see the picture attached)

Thanks,
Juliana

[Maya]

Hello Juliana,

Indeed, you are quite correct and following the steps you described I was able to reproduce the issue. The only suitable workaround for the moment is to set the IsTabStop property to "False":

<local:MyTemplateSelector x:Key="DisabledCellTemplate">
    <local:MyTemplateSelector.Template1>
        <DataTemplate>
            <CheckBox IsTabStop="False" Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Married, Mode=TwoWay}"/>
        </DataTemplate>
    </local:MyTemplateSelector.Template1>
    <local:MyTemplateSelector.Template2>
        <DataTemplate>
            <CheckBox IsTabStop="False" IsChecked="{Binding Married, Mode=TwoWay}"/>
        </DataTemplate>
    </local:MyTemplateSelector.Template2>
</local:MyTemplateSelector>

I hope it is suitable solution for your application.
 

Kind regards,
Maya
the Telerik team

[Juliana]

Hello Maya,
I'll give it a try.
Thanks,
Juliana

[Tarik]

Hi,

i am trying to implement this setting into my project, and when i run my project it gives me an exception that says:  "Cannot animate the 'Visibility' property on a 'System.Windows.Shapes.Path' using a 'System.Whindows.Media.Animation.ObjectAnimationUsingKeyFrames'. For more details check inner exception"

I believe this is coming from the <--Storyboard.TargetProperty="(UIElement.Visibility)"--> in this little snippet :

<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="IndeterminatePath">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>

How do I get around this so that I can set the background colors on these checkboxes.  Attached is my Xaml  Thanks

[Maya]

Hi Tarik,

You can try something like:

<ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0"
                                                                        Storyboard.TargetName="IndeterminatePath"
                                                                        Storyboard.TargetProperty="(UIElement.Visibility)">
                                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                                        <DiscreteObjectKeyFrame.Value>
                                                                                <Visibility>Visible</Visibility>
                                                                        </DiscreteObjectKeyFrame.Value>
                                                                </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>

Can you verify whether this works correctly on your side ? 

Regards,
Maya
Telerik

[Tarik]

Maya,

its working  but now my checkboxes look like this.  See picture.  All I want is to have it look like the regular windows checkboxes..white background and regular checks.

Can you help with that, or tell me which part of the setttings does that?

Thanks.  

[Maya]

Hi Tarik,

Could you take a look at this article ? Does it help you to style the check box in the way you want ? 

Regards,
Maya
Telerik

[Tarik]

Hi,

This article is good but it would be better if it was a bit more comprehensive.  For example this bit here:

<Style x:Key="CheckBoxStyle" TargetType="telerik:GridViewCheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:GridViewCheckBox">
.
.
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:GridViewCheckBox" BasedOn="{StaticResource CheckBoxStyle}" />

What is the content of the things that go in the <ControlTemplate> ?  I have been looking for it but cant seem to find out what plugs in there.  Thanks.

[Vanya Pavlova]

Hello Tarik,


GridViewCheckBox is an element, that emulates the behavior of a CheckBox and it is specially designed for RadGridView. It provides its own elements, the control template contains a Grid container with Path elements that appear in its Checked/Intederminate states.
You may find below the full template against Office_Black theme:

<ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="grid:GridViewCheckBox">
        <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Width="13" Height="13">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0"
                                        Storyboard.TargetName="CheckedPath"
                                        Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="Indeterminate">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0"
                                        Storyboard.TargetName="IndeterminatePath"
                                        Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            <Border BorderBrush="#FF989898" BorderThickness="1 1 1 1">
                <Border BorderBrush="#FFEEEEEE" BorderThickness="1 1 1 1">
                    <Border BorderThickness="1 1 1 1" Background="#FFE0E0E0" BorderBrush="#FFB9B9B9">
                        <Grid Margin="0">
                            <Path x:Name="IndeterminatePath" Visibility="Collapsed" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Data="M14.708333,144.5 L20.667,144.5" Width="7" Height="7" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
                            <Path x:Name="CheckedPath"  Visibility="Collapsed" Stretch="Fill" Stroke="#FF8D8D8D" Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144" StrokeThickness="1.5" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </Border>
            </Border>
        </Grid>
    </ControlTemplate>
    <Style x:Key="GridViewCheckBoxStyle" TargetType="grid:GridViewCheckBox">
        <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}" />
    </Style><Style TargetType="grid:GridViewCheckBox" BasedOn="{StaticResource GridViewCheckBoxStyle}"/>

We ship our themes as separate projects and you may find all styles for each theme under the Themes folder of your personal installation.
 

Regards,
Vanya Pavlova
Telerik