We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the position of FilterToggleButton and SortIcon in header cell of SfDataGrid?

Platform: WPF |
Control: SfDataGrid

In SfDataGrid, the AllowFiltering and AllowSorting property allows you to perform filtering and sorting operations on data. You can define the AllowFiltering and AllowSorting property either at SfDataGrid or Column level.

By default, the FilterToggleButton and SortIcon appears at the right of the HeaderText .The following screenshot illustrates the default position of the FilterToggleButton and SortIcon in GridHeaderCellControl.

Filter ToggleButton

Figure 1: Default position of the FilterToggleButton and SortIcon

You can change the above default position to left of the header text by customizing the Header style. The following steps help you to change the position of FilterToggleButton and SortIcon in header cell.

Step 1:

Right-click SfDataGrid in the Visual Studio or Blend Designer view and select Edit Additional Templates -> Edit HeaderStyle-> Edit a Copy.

Editing Header Style

Figure 2: Editing Header Style

Step2:

A new window opens and in that window, mention where you want to define the template and then click OK.

Resource window

Figure 3: Create Style Resource window

The GridHeaderCellControl template is added in the XAML page and you can change the positon of FilterToggleButton, SortIcon and HeaderText in PART_HeaderCellBorder of the control template set as illustrated in the following code example.

XAML

<Window.Resources>
<ResourceDictionary>
<!--Merging the dictionary for resources that is required for customizing this template-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.SfGrid.WPF;component/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="5,3,5,3" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="syncfusion:VisualContainer.WantsMouseInput" Value="True" />
<Setter Property="Template">
<Setter.Value>
<!--ControlTemplate of GridHeaderCellControl-->
<ControlTemplate TargetType="syncfusion:GridHeaderCellControl">
<Grid>
<Border x:Name="PART_HeaderCellBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Grid Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--FilterToggleButton part-->
<syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton"
Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
SnapsToDevicePixels="True"
Visibility="{TemplateBinding FilterIconVisiblity}" />
<!--SortIcon part-->
<Grid Grid.Column="1" SnapsToDevicePixels="True" 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="8.938"
Height="8.138"
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="Gray"
SnapsToDevicePixels="True"
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="8.938"
Height="8.138"
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="Gray"
SnapsToDevicePixels="True"
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}"
SnapsToDevicePixels="True"
Text="{TemplateBinding SortNumber}"
Visibility="{TemplateBinding SortNumberVisibility}" />
</Grid>
<!--HeaderText part-->
<ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Focusable="False" />
<Border x:Name="PART_FilterPopUpPresenter" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>

The following screenshot displays the position change of SortIcon, FilterToggleButton from right to left position of the HeaderText.

SortIcon

Figure 4: After changed the position of FilterToggleButton and SortIcon

Refer to the following sample link for changing the position of the FilterToggleButton and SortIcon on the Header cell in WPF platform.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile