FrozenColumnCount affect style

[Okba Hosni]

Hi SyncFusion team,

I used SfDatagrid, I made styles for header and cells, that works great. I want to froze the first 3 columns, when I added the property FrozenColumnCount="3", my cells and header styles were affected (it add a right and a bottom border for each cell on the third column).

How can I keep my defined style when using FrozenColumnCount property.

Thanks

[Srinivasan Vasu]

Hi Okba, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your query and you can keep the defined style for FrozenColumnCell while using FronzenColumnCount property by editing the control template of the GridCell like the below code example. You have to done the same for GridHeaderCellControl style in SfDataGrid.  

 

Please refer the below code example. 

 

XAML 

   <Style TargetType="syncfusion:GridCell"> 

            <Setter Property="Background" Value="Transparent" /> 

            <Setter Property="BorderBrush" Value="Gray" /> 

            <Setter Property="BorderThickness" Value="0,0,1,1" /> 

            <Setter Property="Padding" Value="0,0,0,0" /> 

            <Setter Property="VerticalContentAlignment" Value="Center"/> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="syncfusion:GridCell"> 

                        <Grid> 

                            <VisualStateManager.VisualStateGroups> 

                                <VisualStateGroup x:Name="IndicationStates"> 

                                    <VisualState x:Name="HasError"> 

                                        <Storyboard> 

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width"> 

                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" /> 

                                                <EasingDoubleKeyFrame KeyTime="0" Value="10" /> 

                                            </DoubleAnimationUsingKeyFrames> 

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> 

                                                <DiscreteObjectKeyFrame KeyTime="0"> 

                                                    <DiscreteObjectKeyFrame.Value> 

                                                        <Visibility>Visible</Visibility> 

                                                    </DiscreteObjectKeyFrame.Value> 

                                                </DiscreteObjectKeyFrame> 

                                            </ObjectAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

 

                                    <VisualState x:Name="NoError"> 

                                        <Storyboard BeginTime="0"> 

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width"> 

                                                <EasingDoubleKeyFrame KeyTime="0" Value="1" /> 

                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" /> 

                                            </DoubleAnimationUsingKeyFrames> 

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> 

                                                <DiscreteObjectKeyFrame KeyTime="0"> 

                                                    <DiscreteObjectKeyFrame.Value> 

                                                        <Visibility>Collapsed</Visibility> 

                                                    </DiscreteObjectKeyFrame.Value> 

                                                </DiscreteObjectKeyFrame> 

                                            </ObjectAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                </VisualStateGroup> 

                                <VisualStateGroup x:Name="BorderStates"> 

                                    <VisualState x:Name="NormalCell"/> 

                                    <VisualState x:Name="FrozenColumnCell"> 

                                        <Storyboard BeginTime="0"> 

                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_GridCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="0,0,1,1"/> 

                                            </ObjectAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                    <VisualState x:Name="FooterColumnCell"> 

                                        <Storyboard BeginTime="0"> 

                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_GridCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="1,0,1,1"/> 

                                            </ObjectAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                    <VisualState x:Name="BeforeFooterColumnCell"> 

                                        <Storyboard BeginTime="0"> 

                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_GridCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                                <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="0,0,0,1"/> 

                                            </ObjectAnimationUsingKeyFrames> 

                                        </Storyboard> 

                                    </VisualState> 

                                </VisualStateGroup> 

                            </VisualStateManager.VisualStateGroups> 

                            <Border Background="{TemplateBinding CellSelectionBrush}" 

                                Visibility="{TemplateBinding SelectionBorderVisibility}" /> 

                            <Border x:Name="PART_GridCellBorder" 

                                Background="{TemplateBinding Background}" 

                                BorderBrush="{TemplateBinding BorderBrush}" 

                                BorderThickness="{TemplateBinding BorderThickness}"> 

                                <Grid> 

                                    <ContentPresenter Margin="{TemplateBinding Padding}" 

                                                  FontFamily="{TemplateBinding FontFamily}" 

                                                  FontSize="{TemplateBinding FontSize}" 

                                                  Foreground="{TemplateBinding Foreground}" /> 

                                </Grid> 

                            </Border> 

                            <Border Margin="0,0,0,0" 

                                Background="Transparent" 

                                BorderBrush="{TemplateBinding CurrentCellBorderBrush}" 

                                BorderThickness="{TemplateBinding CurrentCellBorderThickness}" 

                                IsHitTestVisible="False" 

                                Visibility="{TemplateBinding CurrentCellBorderVisibility}" /> 

                            <Border x:Name="PART_InValidCellBorder" 

                                Width="10" 

                                Height="10" 

                                HorizontalAlignment="Right" 

                                Visibility="Collapsed" 

                                VerticalAlignment="Top"> 

                                <ToolTipService.ToolTip> 

 

                                    <ToolTip Background="#FFDB000C" 

                                         Placement="Right" 

                                         Tag="{TemplateBinding ErrorMessage}" 

                                         Template="{StaticResource ValidationToolTipTemplate}" /> 

 

                                </ToolTipService.ToolTip> 

                                <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z" 

                                  Fill="Red" 

                                  Stretch="Fill" /> 

                            </Border> 

                        </Grid> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

 

 

 

To edit the ControlTemplate of GridCell and GridHeaderCellControl please refer the below UG Link 

 

UG Link: http://help.syncfusion.com/wpf/sfdatagrid/styles-and-templates#editing-datagrid-elements-style-in-visual-studio-designer 

 

 

Regards,
Srinivasan 

[Okba Hosni]

Hi SyncFusion Team,

Thanks, that works for the CellStyle. However, when I want to edit the Header style, I don't find the "Edit a copy" enabled. Is that beceause I use the trial version?

You can find attached a screenshot of what I find when I choose" Edit additional Template"

Regards,

Attachment: EditTemplate_7f0e864a.zip

[Srinivasan Vasu]

Hi Okba, 

 

Please ignore our previous update. 

 

In Winrt, it is not possible to edit the header template by using VisualStudio Designer. Please use the below template for GridHeaderCellControl. 

 

XAML 

 

   <Style TargetType="syncfusion:GridHeaderCellControl"> 

        <Setter Property="Background" Value="Transparent" /> 

        <Setter Property="BorderBrush" Value="Gray" /> 

        <Setter Property="BorderThickness" Value="0,0,1,1" /> 

        <Setter Property="HorizontalContentAlignment" Value="Left" /> 

        <Setter Property="Padding" Value="5,3,5,3" /> 

        <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}" /> 

        <Setter Property="FontWeight" Value="SemiBold" /> 

        <Setter Property="UseLayoutRounding" Value="False"/> 

        <Setter Property="Template"> 

            <Setter.Value> 

                <ControlTemplate TargetType=" syncfusion:GridHeaderCellControl"> 

                    <Grid> 

                        <VisualStateManager.VisualStateGroups> 

                            <VisualStateGroup x:Name="HiddenColumnsResizingStates"> 

 

                                <VisualState x:Name="LastColumnHidden"> 

                                    <Storyboard> 

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderCellBorder" Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,3,1" /> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

 

                                <VisualState x:Name="HiddenState"> 

                                    <Storyboard> 

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderCellBorder" Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="3,0,3,1" /> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

 

                                <VisualState x:Name="PreviousColumnHidden"> 

                                    <Storyboard> 

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_HeaderCellBorder" Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="3,0,1,1" /> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

 

                                <!--VisualState name changed from Normal to NormalState as Normal state is used for providing MouseOver effect--> 

                                <VisualState x:Name="NormalState" /> 

                            </VisualStateGroup> 

                            <VisualStateGroup x:Name="CommonStates"> 

                                <VisualState x:Name="PointerOver" /> 

                                <VisualState x:Name="Normal" /> 

                            </VisualStateGroup> 

                            <VisualStateGroup x:Name="BorderStates"> 

                                <VisualState x:Name="NormalCell"/> 

                                <VisualState x:Name="FrozenColumnCell"> 

                                    <Storyboard BeginTime="0"> 

                                        <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="0,0,1,1"/> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

                                <VisualState x:Name="FooterColumnCell"> 

                                    <Storyboard BeginTime="0"> 

                                        <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_FooterCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="1,0,1,1"/> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

                                <VisualState x:Name="BeforeFooterColumnCell"> 

                                    <Storyboard BeginTime="0"> 

                                        <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_FooterCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="0,0,0,1"/> 

                                        </ObjectAnimationUsingKeyFrames> 

                                        <ObjectAnimationUsingKeyFrames BeginTime="0" 

                                                                          Duration="1" 

                                                                          Storyboard.TargetName="PART_HeaderCellBorder" 

                                                                          Storyboard.TargetProperty="BorderThickness"> 

                                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                                     Value="0,0,0,1"/> 

                                        </ObjectAnimationUsingKeyFrames> 

                                    </Storyboard> 

                                </VisualState> 

                            </VisualStateGroup> 

                        </VisualStateManager.VisualStateGroups> 

                        <Border x:Name="PART_FooterCellBorder" 

                                Background="{TemplateBinding Background}" 

                                BorderBrush="{TemplateBinding BorderBrush}"/> 

                        <Border x:Name="PART_HeaderCellBorder" 

                                Background="{TemplateBinding Background}" 

                                BorderBrush="{TemplateBinding BorderBrush}" 

                                BorderThickness="{TemplateBinding BorderThickness}"> 

 

                            <Grid Margin="{TemplateBinding Padding}"> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="*" /> 

                                    <ColumnDefinition Width="Auto" /> 

                                    <ColumnDefinition Width="Auto" /> 

                                </Grid.ColumnDefinitions> 

 

                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 

                                                  VerticalAlignment="Center" 

                                                  FontFamily="{TemplateBinding FontFamily}" 

                                                  FontSize="{TemplateBinding FontSize}" 

                                                  FontWeight="{TemplateBinding FontWeight}" /> 

                                <Grid Grid.Column="1" x:Name="PART_SortButtonPresenter"> 

                                    <Grid.ColumnDefinitions> 

                                        <ColumnDefinition Width="0" MinWidth="{Binding Path=SortDirection, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource sortDirectionToWidthConverter}}" /> 

                                        <ColumnDefinition Width="*" /> 

                                    </Grid.ColumnDefinitions> 

                                    <Path Width="10.84" 

                                          Height="9.87" 

                                          HorizontalAlignment="Center" 

                                          VerticalAlignment="Center" 

                                          Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z" 

                                          Fill="{StaticResource ApplicationForegroundThemeBrush}" 

                                          Stretch="Fill" 

                                          Visibility="{Binding Path=SortDirection, 

                                                               RelativeSource={RelativeSource TemplatedParent}, 

                                                               ConverterParameter=Ascending, 

                                                               Converter={StaticResource sortDirectionToVisibilityConverter}}"> 

                                        <Path.RenderTransform> 

                                            <TransformGroup> 

                                                <TransformGroup.Children> 

                                                    <RotateTransform Angle="0" /> 

                                                    <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                                </TransformGroup.Children> 

                                            </TransformGroup> 

                                        </Path.RenderTransform> 

                                    </Path> 

 

                                    <Path Width="10.84" 

                                          Height="9.87" 

                                          HorizontalAlignment="Center" 

                                          VerticalAlignment="Center" 

                                          Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z" 

                                          Fill="{StaticResource ApplicationForegroundThemeBrush}" 

                                          Stretch="Fill" 

                                          Visibility="{Binding Path=SortDirection, 

                                                               RelativeSource={RelativeSource TemplatedParent}, 

                                                               ConverterParameter=Decending, 

                                                               Converter={StaticResource sortDirectionToVisibilityConverter}}"> 

                                        <Path.RenderTransform> 

                                            <TransformGroup> 

                                                <TransformGroup.Children> 

                                                    <RotateTransform Angle="0" /> 

                                                    <ScaleTransform ScaleX="1" ScaleY="1" /> 

                                                </TransformGroup.Children> 

                                            </TransformGroup> 

                                        </Path.RenderTransform> 

                                    </Path> 

                                    <TextBlock Grid.Column="1" 

                                               Margin="0,-4,0,0" 

                                               VerticalAlignment="Center" 

                                               FontSize="10" 

                                               Foreground="{TemplateBinding Foreground}" 

                                               Text="{TemplateBinding SortNumber}" 

                                               Visibility="{TemplateBinding SortNumberVisibility}" /> 

                                </Grid> 

                                <local:FilterToggleButton x:Name="PART_FilterToggleButton" 

                                                          Grid.Column="2" 

                                                          Width="28" 

                                                          Height="28" 

                                                          HorizontalAlignment="Stretch" 

                                                          VerticalAlignment="Stretch" 

                                                          IsTabStop="False" 

                                                          Visibility="{TemplateBinding FilterIconVisiblity}" /> 

                                <Border x:Name="PART_FilterPopUpPresenter" /> 

                            </Grid> 

                        </Border> 

                    </Grid> 

                </ControlTemplate> 

            </Setter.Value> 

        </Setter> 

    </Style> 

 

 

 

Regards, 

Srinivasan 

 

[Okba Hosni]

Hi,

Ok, thanks, that does the work.

[Elavarasan M]

Hi Okba, 

Thanks for your update. 

Regards, 

Elavarasan M