This is a migrated thread and some comments may be shown as answers.

GridViewCheckBoxColumn - How to change edit mode CheckBox default template

6 Answers 505 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 22 May 2015, 07:23 PM

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.

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 25 May 2015, 08:39 AM
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
0
Stephen
Top achievements
Rank 1
answered on 26 May 2015, 12:27 PM

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?

0
Stephen
Top achievements
Rank 1
answered on 26 May 2015, 01:19 PM

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.

0
Stefan
Telerik team
answered on 27 May 2015, 09:06 AM
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
0
Stephen
Top achievements
Rank 1
answered on 27 May 2015, 11:53 AM
Ok, thank you for letting me know and thanks for the help.
0
Stefan
Telerik team
answered on 27 May 2015, 01:00 PM
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
Tags
GridView
Asked by
Stephen
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or