[Solved] Checkbox alignement in checkbox column.

[Ravi]

Hi There,

I have created a style for CheckboxColumn in which i have placed a image and aligned that in the center of the cell, this style is implicit style, but when i double click on cell to edit the value, then i see a default checkbox which is aligned to right side, i have no problem to have that checkbox, but i want to align that checkbox to center. but i don't know where i can do that. can you please guide me.
Attached a image please check.

Style which i have created is below:

<ControlTemplate x:Key="GridViewCheckBoxTemplateWithIcon" TargetType="telerik:GridViewCheckBox">
        <Grid HorizontalAlignment="Left"  Height="13" VerticalAlignment="Center" Width="13">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CheckStates">
                    <VisualState x:Name="Checked">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedPath">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unchecked"/>
                    <VisualState x:Name="Indeterminate">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="IndeterminatePath">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border>
                <Border>
                    <Border>
                        <Grid Margin="0">
                            <Path x:Name="IndeterminatePath" Data="M14.708333,144.5 L20.667,144.5" HorizontalAlignment="Center" Height="7" Margin="0" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Visibility="Collapsed" VerticalAlignment="Center" Width="7"/>
                            <Path x:Name="CheckedPath1" Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144" HorizontalAlignment="Center" Margin="0" Stretch="Fill" Stroke="#FF8D8D8D" StrokeThickness="1.5" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <Image x:Name="CheckedPath" Source="/Check.png" Visibility="Collapsed"/>
                        </Grid>
                    </Border>
                </Border>
            </Border>
        </Grid>
    </ControlTemplate>
    <Style x:Key="GriViewCheckboxStyle" TargetType="telerik:GridViewCheckBox">
        <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplateWithIcon}"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
    <Style BasedOn="{StaticResource GriViewCheckboxStyle}"
           TargetType="telerik:GridViewCheckBox"/>

Thanks in advance for your precious help.

Regards,
Srinivas.

[Yoan]

Hello Srinivas,

Generally, the default editor of  GridViewCheckBoxColumn is a simple CheckBox. You can center it by handling the PreparingCellForEdit event of RadGridView:

private void clubsGrid_PreparingCellForEdit(object sender, GridViewPreparingCellForEditEventArgs e)
       {
           if (e.Column.UniqueName == "Available")
           {
               var checkBox = e.EditingElement as CheckBox;
               checkBox.Margin = new Thickness(28, 0, 0, 0);
           }
       }

Greetings,
Yoan
the Telerik team

[Ravi]

Hi Yoan,
Thank you for your reply, 

is this possible to set this in the Style, so that everywhere can apply automatically.

Regards,
Srinivas.

[Yoan]

Hi Srinivas,

It seems that I have misunderstood your previous question. 

In order to center the default editor of  GridViewCheckBoxColumn (the CheckBox) you can define a style targeting GridViewCell and set the HorizontalContentAlignment property to "Center". Actually, there is a pixel offset when the GridViewCheckBoxColumn goes into edit mode. For this reason you should specify a different Margin for the CheckBox in edit mode in order to get it work correctly. However, I have prepared a sample project that meets your requirements.

Please, let me know if you need further assistance on this.

Kind regards,
Yoan
the Telerik team