How to change the position in the header cell of the WinRT DataGrid?
In SfDataGrid, the AllowFiltering and AllowSorting properties allow you to perform filtering and sorting operations on data. You can define the AllowFiltering and AllowSorting properties either at the SfDataGrid or Column level.
By default, the FilterToggleButton and SortIcon appear at the right position of the Header. You can change this position to the left of the Header by customizing the ControlTemplate of the GridHeaderCellControl.
The following screenshot illustrates the default position of the FilterToggleButton and SortIcon in the GridHeaderCellControl.
Figure 1 : Default position of the FilterToggleButton and SortIcon
You can change the above default position of the FilterToggleButton and SortIcon to the left of the Header as shown in the following code example.
XAML
<Page.Resources>
<ResourceDictionary>
<!--Merging the dictionary for resources that is required for customizing this template-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:/Syncfusion.SfGrid.WinRT/Control/Themes/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--style of the GridHeaderCellControl-->
<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="10,3,10,3" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="SemiBold" />
<!--ControlTemplate of GridHeaderCellControl-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:GridHeaderCellControl">
<Grid>
<Border x:Name="PART_HeaderCellBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--FilterToggleButton part-->
<syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton"
Grid.Column="0"
Width="28"
Height="28"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsTabStop="False"
Visibility="{TemplateBinding FilterIconVisiblity}" />
<!--SortIcon part-->
<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>
<!--HeaderText part-->
<ContentPresenter Margin="{TemplateBinding Padding}" Grid.Column="2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" />
<Border x:Name="PART_FilterPopUpPresenter" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Page.Resources>
The above code snippet is applicable only for WinRT. For other platforms refer respective samples.
In the above code example, the position of the FilterToggleButton and SortIcon is changed from the right to left position of the Header as shown in the following screenshot.
Figure 2 : After changed the position of FilterToggleButton and SortIcon
Sample Link:
