Configure GridViewCheckBox as System.Windows.CheckBox

28 posts, 1 answers
  1. Fabiana
    Fabiana avatar
    69 posts
    Member since:
    Oct 2009

    Posted 28 Jul 2010 Link to this post

    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>
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 29 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Fabiana
    Fabiana avatar
    69 posts
    Member since:
    Oct 2009

    Posted 29 Jul 2010 Link to this post

    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>
  5. Fabiana
    Fabiana avatar
    69 posts
    Member since:
    Oct 2009

    Posted 29 Jul 2010 Link to this post

    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!!
  6. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 30 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Fabiana
    Fabiana avatar
    69 posts
    Member since:
    Oct 2009

    Posted 30 Jul 2010 Link to this post

    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!




  8. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 30 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 07 Oct 2010 Link to this post

    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
  10. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 08 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 12 Oct 2010 Link to this post

    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.
  12. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 13 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 14 Oct 2010 Link to this post

    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.
  14. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 18 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  15. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 21 Oct 2010 Link to this post

    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.
  16. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 22 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  17. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 22 Oct 2010 Link to this post

    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.
  18. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 22 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  19. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 22 Oct 2010 Link to this post

    Hello Maya,

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

    Thanks,
    Juliana.
  20. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 22 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  21. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 22 Oct 2010 Link to this post

    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
  22. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 27 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  23. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 27 Oct 2010 Link to this post

    Hello Maya,
    I'll give it a try.
    Thanks,
    Juliana
  24. Tarik
    Tarik avatar
    3 posts
    Member since:
    Dec 2013

    Posted 31 Jan 2014 Link to this post

    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




  25. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 05 Feb 2014 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  26. Tarik
    Tarik avatar
    3 posts
    Member since:
    Dec 2013

    Posted 05 Feb 2014 in reply to Maya Link to this post

    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.  
  27. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 07 Feb 2014 Link to this post

    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

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  28. Tarik
    Tarik avatar
    3 posts
    Member since:
    Dec 2013

    Posted 14 Feb 2014 in reply to Maya Link to this post

    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.
  29. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 19 Feb 2014 Link to this post

    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

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

Back to Top
DevCraft banner