CheckBoxColumn change style..

[Sean]

Hello is there any way to make the checkbox appear darker, bold in side the gridview? I am not sure the property to edit.

<Style x:Key="CheckBoxColumn" TargetType="{x:Type telerik:GridViewCell}">
               <Setter Property="FontWeight" Value="Bold"/>
           </Style>



<telerik:GridViewCheckBoxColumn EditorStyle="{StaticResource CheckBoxColumn}"  Header="Eligibility" IsReadOnly="True" DataMemberBinding="{Binding Verified}">
                                   <telerik:GridViewCheckBoxColumn.CellStyle>
                                       <Style TargetType="telerik:GridViewCell">
                                           <Setter Property="Background" Value="{Binding VerificationStatus, Converter={StaticResource MyConverter2}}" />
                                       </Style>
                                   </telerik:GridViewCheckBoxColumn.CellStyle>
                               </telerik:GridViewCheckBoxColumn>

The above code did not do it.

Thanks,
S

[Vanya Pavlova]

Hello Sean,

 

The standard GridViewCheckBoxColumn uses a GridViewCheckBox and the standard CheckBox control as its editor. If you want to bold the content of a CheckBox you may predefine the CellTemplate for a standard column and manually set the FontWeight of the CheckBox:

<telerik:RadGridView  Margin="40,40,168,90" AutoGenerateColumns="False" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Property2}">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox  telerik:StyleManager.Theme="Office_Black" FontWeight="Bold" Content="{Binding Property2}" IsChecked="{Binding Property2}"/>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>

                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

As an alternative you may also define a style targeted at a GridViewCell and manipulate its appearance from there:

<Window.Resources>
    <Style x:Key="ss" TargetType="telerik:GridViewCell">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <telerik:RadGridView  Margin="40,40,168,90" AutoGenerateColumns="False" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn CellStyle="{StaticResource ss}" DataMemberBinding="{Binding Property2}">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox  telerik:StyleManager.Theme="Office_Black" Content="{Binding Property2}" IsChecked="{Binding Property2}"/>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>

                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
    </Grid>
</Window>

Furthermore the recommended approach to a apply a style based on underlying property value is through StyleSelectors, please check our online demos for further reference. 

Kind regards,
Vanya Pavlova
the Telerik team

[Sean]

I did something like this originally but it was impossible to prevent the user from clicking the contents of the checkbox in the column. Is that possible to do? When I did something similar to this they were able to check the checkbox still:

<telerik:GridViewDataColumn Header="Confirmed" IsReadOnly="True">
                                 <telerik:GridViewDataColumn.CellTemplate>
                                     <DataTemplate>
                                         <CheckBox telerik:StyleManager.Theme="Office_Black" FontWeight="Bold" Content="{Binding ConfirmedStatus}" IsChecked="{Binding ConfirmedStatus}"/>
                                     </DataTemplate>
                             </telerik:GridViewDataColumn.CellTemplate>
                                 <telerik:GridViewDataColumn.CellStyle>
                                     <Style TargetType="telerik:GridViewCell">
                                         <Setter Property="Background" Value="{Binding ConfirmedStatus, Converter={StaticResource ConStatConverter}}" />
                                     </Style>
                                 </telerik:GridViewDataColumn.CellStyle>
                             </telerik:GridViewDataColumn>

[Vanya Pavlova]

Hi Sean,

 

You may use a GridViewCheckBoxColumn instead that will listen for the IsReadOnlyBinding property and will become non-editable if it is set to "True":

<telerik:GridViewCheckBoxColumn DataMemberBinding="{Binding Property2}" IsReadOnlyBinding="{Binding Property2}"/>

 

Best wishes,
Vanya Pavlova
the Telerik team

[Sean]

I tried that but the checkbox still appears "grayed-out". Is there a way around this?

Thanks,

Sean

[Vanya Pavlova]

Hello Sean,

 

GridViewCheckBox is gray-colored by design when the cell is not in Edit mode. You may change this through edit the template of a GridViewCheckBox and predefine the brushes which are used by default.
In this way you may configure it to meet up your personal requirements.

All the best,
Vanya Pavlova
the Telerik team

[Paul]

I think there is a bug in this. If AutoSelectOnEdit is true then the checkbox is designed to be set/unset with a single click, therefore it should not be gray.

[Dinko | Tech Support Engineer]

This behavior is by design. The CheckBox will be gray in none-edit mode nevertheless of the AutoSelectOnEdit property. The difference here is that the CheckBox can be check/uncheck with a single click. 

[Alwin]

Hi Vanya,

I have this GridViewCheckBox column type and I want to collapse just the Checkbox control for some of the rows, based on some derived from other columns in grid.

Now, I used the CellStyleSelector of GridViewCheckBoxColumn, for my Style selector  that I created I am not able to set the TargetType as GridViewCheckBox, it fails saying the type does not match with type of element 'GridViewCell'.

I assume that CellStyleSelector will apply only to GridViewCell, what style selector should I use to apply to the GridViewCheckBox only?

Please see the attachment for implemented code and error.