GridViewCheckBoxColumn - How to change edit mode CheckBox default template

7 posts, 0 answers
  1. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 22 May 2015 Link to this post

    I have followed the following example, where I have replaced the default view only GridViewCheckBoxTemplate with my own, in the resource dictionary:

     http://docs.telerik.com/devtools/silverlight/controls/radgridview/styles-and-templates/columns-styling-checkboxcolumn.html

    This works well, because it automatically fixed all of our grids, without me having to do anything else.  The problem is that I cannot figure out how to do the same for the Check Box in edit mode.  No matter what I try, it always ends up just being the standard CheckBox.

    I have been through all of the documentation and every forum that I can find and nothing is getting me closer to this goal:  I would like to find the place where the Telerik GridViewCheckBoxColumn says that it is going to use CheckBox as it's cell edit template and give the name of a new style I create, which is based on CheckBox but looks like my GridViewCheckBoxTemplate does.  This way everyone who uses GridViewCheckBoxColumn will automatically get this.

    I have been through every piece of documentation and forum thread I can find and nothing is helping me figure out how to deal with the edit mode look from GridViewCheckBoxColumn.  Does anyone have an example I can follow?  I am fairly new to templating and styling, so the more specific the better.

    Here is the code for the control on my screen:

     <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn MinWidth="200"
                                    DataMemberBinding="{Binding Label}"
                                    Header="Medical"
                                    IsReadOnly="True" />
        <telerik:GridViewCheckBoxColumn MinWidth="80"
                                        AutoSelectOnEdit="True"
                                        CellStyle="{StaticResource CenterCheckBox}"
                                        DataMemberBinding="{Binding Answer}"
                                        EditTriggers="CellClick"
                                        Header="Check If Yes"
                                        IsReadOnly="{Binding MedicalSelected.CannotCheckBox}" />
    </telerik:RadGridView.Columns>

    And here is the code from my GridViewCheckBoxTemplate:

     <ControlTemplate x:Key="GridViewCheckBoxTemplate"
                         TargetType="teleriktest:GridViewCheckBox">
            <Grid Width="17"
                  Height="17"
                  Margin="0,0,3,0"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
                <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 Background="#FFEEEEEE"
                                BorderBrush="#FFB9B9B9"
                                BorderThickness="1,1,1,1"
                                CornerRadius="1">
                            <Grid Margin="2">
                                <Path x:Name="IndeterminatePath"
                                      Width="9"
                                      Height="9"
                                      Margin="0"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Data="M14.708333,144.5 L20.667,144.5"
                                      Stretch="Fill"
                                      Stroke="#FF4C4C4C"
                                      StrokeThickness="2.0"
                                      Visibility="Collapsed" />
                                <Path x:Name="CheckedPath"
                                      Margin="0"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144"
                                      Stretch="Fill"
                                      Stroke="#FF4C4C4C"
                                      StrokeThickness="2.0"
                                      Visibility="Collapsed" />
                            </Grid>
                        </Border>
            </Grid>
        </ControlTemplate>
        <Style x:Key="GridViewCheckBoxStyle" 
               TargetType="teleriktest:GridViewCheckBox">
            <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}" />
        </Style>
        <Style TargetType="teleriktest:GridViewCheckBox" 
               BasedOn="{StaticResource GridViewCheckBoxStyle}"/>

     

    What I really would like to do is find the place where the Telerik controls says that it is going to use CheckBox when in edit mode and give it a different Styled CheckBox that I can match the look to the template GridViewCheckBoxStyle above.  This would be ideal fix because it would mean anywhere a GridViewCheckBoxColumn was used, it would automatically use these new templates / styles instead.
    What I really would like to do is find the place where the Telerik controls says that it is going to use CheckBox when in edit mode and give it a different Styled CheckBox that I can match the look to the template GridViewCheckBoxStyle above.  This would be ideal fix because it would mean anywhere a GridViewCheckBoxColumn was used, it would automatically use these new templates / styles instead.
  2. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 25 May 2015 Link to this post

    Hello Stephen,

    This can be achieved through EditorStyle property of GridViewCheckBox column. Note, that GridViewCheckBoxColumn uses GridViewCheckBox in view mode and standard MS CheckBox as its editor. So, for your case you will need to set the TargetType of the predefined ControlTemplate to be CheckBox control.

    I hope this helps.

    Regards,
    Stefan
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
  4. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 26 May 2015 in reply to Stefan X1 Link to this post

    Thanks for your response.  I am pretty new to styles and templates.  Is there any chance you could give me an example?  It would really help me to see the whole thing.  This is what I think I am looking for:

    GridViewCheckBox using a customized template style of MS CheckBox for both the view and edit states?

  5. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 26 May 2015 Link to this post

    Ok, I looked up some other posts and information based on your response and was able to figure out what I needed to do.  I thought you were saying I needed to do something with EditorStyle in a template, but you just meant a property on the grid column in the xaml.

    It would be cool if I we had a way to set that Editor Style in the GridViewCheckBoxColumn template though, so that it was automatically used in all cases, as opposed to each grid needing to have this EditorStyle property set individually.  If you know how to do that, I would appreciate it if you could let me know.

    Right now, this is what I have in my xaml:

    <telerik:GridViewCheckBoxColumn MinWidth="80"
                                                                                        AutoSelectOnEdit="True"
                                                                                        CellStyle="{StaticResource CenterCheckBox}"
                                                                                        DataMemberBinding="{Binding Answer}"
                                                                                        EditorStyle="{StaticResource LargerCheckBox}"
                                                                                        EditTriggers="CellClick"
                                                                                        Header="Check If Yes"
                                                                                        IsReadOnly="{Binding ConductSelected.CannotCheckBox}" />

     

    I am looking to make it so that all GridViewCheckBoxColumns automatically use that EditorStyle by default.

  6. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 27 May 2015 Link to this post

    Hello Stephen,

    In WPF you can define a style implicitly for all editors, but in Silverlight there is no logical tree, so such approach would not be valid. You will have to set the EditorStyle explicitly for each GridViewCheckBoxColumn.

    Best Regards,
    Stefan X1
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  7. Stephen
    Stephen avatar
    21 posts
    Member since:
    Dec 2013

    Posted 27 May 2015 in reply to Stefan X1 Link to this post

    Ok, thank you for letting me know and thanks for the help.
  8. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 27 May 2015 Link to this post

    Hi Stephen,

    Do not hesitate to contact us in case you have any other questions on our controls.

    Best Regards,
    Stefan X1
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner