Edit this page

Styling GridViewCheckBoxColumn

This topic will show you how to style the GridViewCheckBoxColumn.

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

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

Rad Grid View Styles and Templates Styling Check Box Column 01

In order to modify the visual appearance of a cell in view mode, the ControlTemplate of GridViewCheckBox should be modified.

Example 1: Defining the ControlTemplate of GridViewCheckBox

<ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="grid:GridViewCheckBox">
        ...
</ControlTemplate>

After the needed ControlTemplate is defined, it can be applied using the Template property of GridViewCheckBox.

Example 2: Applying the ControlTemplate to GridViewCheckBox

<Style x:Key="GridViewCheckBoxStyle" TargetType="grid:GridViewCheckBox">
    <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}"/>
</Style>

<Style TargetType="grid:GridViewCheckBox" BasedOn="{StaticResource GridViewCheckBoxStyle}"/>

Styling GridViewCheckBoxColumn in Edit Mode

In order to alter the appearance of the editor of GridViewCheckBoxColumn, a ControlTemplate targeting the CheckBox control should be defined.

Example 3: Defining the ControlTemplate of CheckBox

<ControlTemplate TargetType="CheckBox" x:Key="CheckBoxTemplate">
        ...
</ControlTemplate>

The customized ControlTemplate can be applied as follows.

Example 4: Applying the ControlTemplate to CheckBox

<Style x:Key="CheckBoxStyleGridViewColumn" TargetType="CheckBox">
    <Setter Property="Template" Value="{StaticResource CheckBoxTemplate}"/>
</Style>

<Style TargetType="CheckBox" BasedOn="{StaticResource CheckBoxStyleGridViewColumn}"/>

Applying the Styles to GridViewCheckBoxColumn explicitly

The aforementioned approach implies defining the styles implicitly. If you need to apply the modifications to a particular instance of RadGridView, you can apply these Styles explicitly through the Resources of RadGridView.

Example 5: Opening Resources tag

<telerik:RadGridView.Resources>
    ...
</telerik:RadGridView.Resources>

Centering GridViewCheckBoxColumn

In order to center the CheckBox in GridViewCheckBoxColumn, you can define a style targeting GridViewCell and set the HorizontalContentAlignment property to "Center":

Example 4: Centering the GridViewCheckBoxColumn

<Style x:Key="MyCheckBoxColumnCellStyle" TargetType="telerik:GridViewCell">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>

Now the GridViewCheckBoxColumn will look like:

Figure 2: Centered GridViewCheckBoxColumn

Rad Grid View Styles and Templates Styling Check Box Column 03

However, there is a pixel offset when the GridViewCheckBoxColumn goes into edit mode:

Figure 3: Centered GridViewCheckBoxColumn in edit mode

Rad Grid View Styles and Templates Styling Check Box Column 04

In order to align the default editor of GridViewCheckBoxColumn correctly, you can specify a different Margin for it by handling the PreparingCellForEdit event of RadGridView:

Example 6: Setting the Margin of the Editor GridViewCheckBoxColumn

private void RadGridView_PreparingCellForEdit(object sender, Telerik.Windows.Controls.GridViewPreparingCellForEditEventArgs e)
{
   if (e.Column.UniqueName == "GridViewCheckBoxColumn")
   {
       var checkBox = e.EditingElement as CheckBox;
       checkBox.Margin = new Thickness(4, 0, -3, 0);
   }
}

Here is the result:

Figure 4 GridViewCheckBoxColumn with set margin

Rad Grid View Styles and Templates Styling Check Box Column 05

See Also