Styling GridViewCheckBoxColumn

This topic will show you how to style the GridViewCheckBoxColumn.

The cells of RadGridView have two different elements for their current state - when in view mode and in edit mode. By default, the GridViewCheckBoxColumn uses a GridViewCheckBox when in view mode and the standard CheckBox control as its editor. The GridViewCheckBox is an element that emulates the behavior of a CheckBox and is especially designed for RadGridView to improve its performance.

In order to style the whole cell rather than the GridViewCheckBox element only, you can set the CellStyle property of the GridViewCheckBoxColumn. You can find more information in the Styling Cells topic.

Styling GridViewCheckBoxColumn in View Mode

Figure 1: Default look of GridViewCheckBox

Telerik Silverlight DataGrid Styles and Templates Styling CheckBoxColumn 01

In order to modify the visual appearance of a cell when in view mode you need to create an appropriate style targeting the GridViewCheckBox element. You can also edit its control template if you wish to apply further customizations.

Example 2: Applying the style to the GridViewCheckBox

<ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="grid:GridViewCheckBox"> 
    <!-- the default template for the theme --> 
</ControlTemplate> 
 
<!-- If you're using the NoXaml binaries you need to set the BasedOn property of the two styles to the GridViewCellStyle and GridViewCheckBoxStyle static resources -->  
<Style TargetType="telerik:GridViewCell"> 
    <Style.Resources> 
        <Style TargetType="telerik:GridViewCheckBox"> 
            <Setter Property="Background" Value="Red" /> 
            <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}"/> 
        </Style> 
    </Style.Resources> 
</Style> 

If you want to apply this style only to a particular column, you can assign it an x:Key value and set the CellStyle property of the respective column.

Styling GridViewCheckBoxColumn in Edit Mode

In order to alter the appearance of the editor of GridViewCheckBoxColumn, you need to create an appropriate style targeting the CheckBox control.

Example 3: Applying the style to the CheckBox

<ControlTemplate TargetType="CheckBox" x:Key="CheckBoxTemplate"> 
    <!-- the default template for the theme --> 
</ControlTemplate> 
 
<!-- If you're using the NoXaml binaries you need to set the BasedOn property of the style to the CheckBoxStyle static resources -->  
<Style x:Key="MyCheckBoxStyle" TargetType="CheckBox"> 
    <Setter Property="Background" Value="Red" /> 
    <Setter Property="Template" Value="{StaticResource CheckBoxTemplate}"/> 
</Style> 

You then need to set this style as the EditorStyle property of the columns you wish to affect.

Example 4: Applying the style to the CheckBox

<telerik:GridViewCheckBoxColumn EditorStyle="{StaticResource MyCheckBoxStyle}" /> 

See Also

In this article