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 filter toggle button in SfDataGrid

Query 1:

So, I want to change filtertogglebutton's icon in my project. How can I do that? I think If I can change the path of this button, it will solve my problem but I don't know how to do that. 


1 Reply 1 reply marked as answer

VS Vijayarasan Sivanandham Syncfusion Team November 11, 2022 03:25 PM

Your requirement to change the filter toggle button's icon in SfDataGrid can be achieved by changing the Path in the Filtered and UnFiltered visual states in FilterToggleButton. Refer to the below code snippet,

  <!-- Customize the style of Filter icon -->

 <Style  TargetType="{x:Type syncfusion:FilterToggleButton}">

....………………..

………………….

………………….

                          <VisualStateGroup x:Name="FilterStates">

                              <VisualState x:Name="Filtered">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data">

                                          <DiscreteObjectKeyFrame KeyTime="0">

                                              <DiscreteObjectKeyFrame.Value>

                                                  <Geometry>F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21</Geometry>

                                              </DiscreteObjectKeyFrame.Value>

                                          </DiscreteObjectKeyFrame>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="UnFiltered">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data">

                                          <DiscreteObjectKeyFrame KeyTime="0">

                                              <DiscreteObjectKeyFrame.Value>

                                                  <Geometry>F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21</Geometry>

                                              </DiscreteObjectKeyFrame.Value>

                                          </DiscreteObjectKeyFrame>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                          </VisualStateGroup>

                      </VisualStateManager.VisualStateGroups>

                      <Border Width="{TemplateBinding Width}"

                          Height="{TemplateBinding Height}"

                          Background="{TemplateBinding Background}"

                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">

                          <Path Name="PART_FilterToggleButtonIndicator"

                            Margin="3"

                            Data="F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21"

                            Fill="{TemplateBinding Foreground}"

                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

                            Stretch="Fill" />

                      </Border>

....………………..

………………….

………………….

  </Style>


Find the sample in the attachment.


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


Attachment: Sample_e877a6f0.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon