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

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

My second problem is changing position of filtertogglebutton in header. In this example project which you shared, position is like Text(which come from the object in the itemsource) and Button. I want to take button to first in the header. how can I do that?


5 Replies 1 reply marked as answer

VS Vijayarasan Sivanandham Syncfusion Team November 11, 2022 08:29 PM UTC

To change the filter position in SfDataGrid can be achieved by customizing the Header style in SfDataGrid.

KB Link: https://www.syncfusion.com/kb/4052/how-to-change-the-position-of-filtertogglebutton-and-sorticon-in-header-cell-of-sfdatagrid

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



KY kivanc yilmaz November 16, 2022 02:44 PM UTC

It solved my question but I am seeing an nullpointer exception when I click the button.  I want to learn how filtertogglebutton is working. It must open the popup screen which is including checkbox filter UI after click the filtertogglebutton. I think the link which you share solved my question about changing position but they forgot the adding action of filtertogglebutton.

Would you share the action of filtertogglebutton. I believe that it will come with click event or checked/unchecked but I don't want to write myself because original function working great before implement this changing position code.



VS Vijayarasan Sivanandham Syncfusion Team November 16, 2022 06:49 PM UTC

We have changed the position of the Filter toggle button placed in the PART_HeaderCellBorder template in GridHeaderCellControl. There is no relation between the filter toggle button clicks with our implementation. Find the difference of filter toggle button position changing code snippet,

XAML code snippet before changing filter position in GridHeaderCellControl :

<Style x:Key="SfDataGridHeaderStyle1" TargetType="{x:Type syncfusion:GridHeaderCellControl}">

    ………………….

    ………………….

    ……………………

                          <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="*"/>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                    <Border x:Name="PART_FilterPopUpPresenter"/>

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

                                        <Grid.ColumnDefinitions>

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

                                            <ColumnDefinition Width="*"/>

                                        </Grid.ColumnDefinitions>

                                        <Path Data="F1 M 753.644,-13.0589 L 753.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.0589 Z" Fill="Gray" HorizontalAlignment="Center" Height="8.138" SnapsToDevicePixels="True" Stretch="Fill" VerticalAlignment="Center" Visibility="{Binding SortDirection, ConverterParameter=Ascending, Converter={StaticResource sortDirectionToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Width="8.938">

                                            <Path.RenderTransform>

                                                <TransformGroup>

                                                    <RotateTransform Angle="0"/>

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

                                                </TransformGroup>

                                            </Path.RenderTransform>

                                        </Path>

                                        <Path Data="F1 M 181.297,177.841 L 181.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.841 Z" Fill="Gray" HorizontalAlignment="Center" Height="8.138" SnapsToDevicePixels="True" Stretch="Fill" VerticalAlignment="Center" Visibility="{Binding SortDirection, ConverterParameter=Decending, Converter={StaticResource sortDirectionToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Width="8.938">

                                            <Path.RenderTransform>

                                                <TransformGroup>

                                                    <RotateTransform Angle="0"/>

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

                                                </TransformGroup>

                                            </Path.RenderTransform>

                                        </Path>

                                        <TextBlock Grid.Column="1" Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="10" Margin="0,-4,0,0" SnapsToDevicePixels="True" Text="{TemplateBinding SortNumber}" VerticalAlignment="Center" Visibility="{TemplateBinding SortNumberVisibility}"/>

                                    </Grid>

                                    <syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton" Grid.Column="2" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" VerticalAlignment="Stretch" Visibility="{TemplateBinding FilterIconVisiblity}"/>

                                </Grid>

                            </Border>

                        

    ………………….

    ………………….

    ……………………

 

</Style>


XAML code snippet after changing filter position in GridHeaderCellControl  :

<Style x:Key="SfDataGridHeaderStyle1" TargetType="{x:Type syncfusion:GridHeaderCellControl}">

    ………………….

    ………………….

    ……………………

                    <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>

 

                            <!--Here just changing the column position of PART_FilterToggleButton-->

                            <syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton" Grid.Column="0" HorizontalAlignment="Stretch" SnapsToDevicePixels="true" VerticalAlignment="Stretch" Visibility="{TemplateBinding FilterIconVisiblity}"/>

 

                           <!--Here just changing the column position of PART_SortButtonPresenter-->

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

                                <Grid.ColumnDefinitions>

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

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Path Data="F1 M 753.644,-13.0589 L 753.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.0589 Z" Fill="Gray" HorizontalAlignment="Center" He

                                    <Path.RenderTransform>

                                        <TransformGroup>

                                            <RotateTransform Angle="0"/>

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

                                        </TransformGroup>

                                    </Path.RenderTransform>

                                </Path>

                                <Path Data="F1 M 181.297,177.841 L 181.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.841 Z" Fill="Gray" HorizontalAlignment="Center" Height="8.13

                                    <Path.RenderTransform>

                                        <TransformGroup>

                                            <RotateTransform Angle="0"/>

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

                                        </TransformGroup>

                                    </Path.RenderTransform>

                                </Path>

                                <TextBlock Grid.Column="1" Foreground="{TemplateBinding Foreground}" TextBlock.FontSize="10" Margin="0,-4,0,0" SnapsToDevicePixels="true" Text="{TemplateBinding SortNumber}" VerticalAlignment="Center" Visibility="{TemplateBinding SortNumberVisibility}"/>

                            </Grid>

                             <!--Here just changing the column position of HeaderText-->

                            <ContentPresenter Focusable="false" Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                            <Border x:Name="PART_FilterPopUpPresenter"/>

                           

    ………………….

    ………………….

    ……………………

 

</Style>


Find the Sample in the attachment. If you still facing the same issue, modify the attached sample based on your scenario.

It will be more helpful for us to check the possibilities to resolve the reported problem.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Attachment: Sample_23047de3.zip

Marked as answer

KY kivanc yilmaz November 17, 2022 11:43 AM UTC

thanks for helping. It solved my problem



VS Vijayarasan Sivanandham Syncfusion Team November 18, 2022 06:22 AM UTC

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you😊.


Loader.
Live Chat Icon For mobile
Up arrow icon