Customising SfDataGrid Filtering PopUp

[kivanc yilmaz]

Hi, I have some problems about filtering popup in sfdatagrid.

I want to remove clearfilter button and search box from this table. 

Also, I want to change checkbox background colour to blue when I select them. 

Also, I want to change background colour  of okay/cancel buttons 

Also, I want to change the background color of the filtering button in the header.

Attachment: image_700a64b3.rar

[Vijayarasan Sivanandham]

Find the responses to your queries below.

Queries	Responses
want to remove clearfilter button from this table.	Your requirement to remove the Clear Filter button in GridFilterControl in SfDataGrid can be achieved by setting the Visibility as Collapsed for PART_ClearFilterButton in the GridFilterControl template. Refer to the below code snippet,   <Style  TargetType="{x:Type syncfusion:GridFilterControl}">             <Setter Property="SortOptionVisibility" Value="Collapsed"/>             <Setter Property="FilterMode" Value="CheckboxFilter" />             <Setter Property="FontSize" Value="14" />             <Setter Property="FontWeight" Value="Normal" />             <Setter Property="Background" Value="White" />             <Setter Property="Foreground" Value="#FF000000" />             <Setter Property="BorderBrush" Value="#FFB2B2B2" />             <Setter Property="BorderThickness" Value="1" />             <Setter Property="Template"> ....……………….. …………………. ………………….                            <Button x:Name="PART_ClearFilterButton"      Visibility="Collapsed"      HorizontalAlignment="Stretch"      VerticalAlignment="Stretch"      HorizontalContentAlignment="Left"      Content="{syncfusion:GridLocalizationResourceExten      FontWeight="{TemplateBinding FontWeight}"      Foreground="{TemplateBinding Foreground}"      IsEnabled="True"      Style="{StaticResource clearFilterBtnStyle}" /> ………………… ………………… ……………….. </Style> UG Link: https://help.syncfusion.com/wpf/datagrid/filtering#collapsing-sort-options-in-gridfiltercontrol
want to remove search box from this table.	Your requirement to remove the search box in GridFilterControl of SfDataGrid can be achieved by setting the SearchOptionVisibility as Collapsed for the CheckboxFilterControl template. Refer to the below code snippet,   <Style TargetType="{x:Type syncfusion:CheckboxFilterControl}"> ....……………….. …………………. ………………….       <Setter Property="SearchOptionVisibility" Value="Collapsed"/> ………………… ………………… ………………..   </Style>
Also, I want to change checkbox background colour to blue when I select them.	Your requirement to change the background color when checking the CheckBox in GridFilterControl can be achieved by customizing the CheckBox style. Refer to the below code snippet,   <Style x:Key="checkboxStyle" TargetType="CheckBox" >     <Style.Triggers>                       <Trigger Property="IsChecked" Value="True">             <Setter Property="Background" Value="SkyBlue" />         </Trigger>     </Style.Triggers> </Style> <DataTemplate x:Key="CheckboxFilterControlItemTemplate">     <CheckBox Margin="4"     HorizontalAlignment="Stretch"     HorizontalContentAlignment="Stretch"     Content="{Binding DisplayText,                     Mode=OneWay}"     Focusable="True"      Style="{StaticResource checkboxStyle}"     syncfusion:VisualContainer.WantsMouseInput="True"     FontFamily="{Binding FontFamily,RelativeSource={RelativeSource Self}}"     FontSize="{Binding FontSize,RelativeSource={RelativeSource Self}}"     FontStretch="{Binding FontStretch,RelativeSource={RelativeSource Self}}"     FontStyle="{Binding FontStyle,RelativeSource={RelativeSource Self}}"     FontWeight="{Binding FontWeight,RelativeSource={RelativeSource Self}}"     Foreground="{Binding Foreground,RelativeSource={RelativeSource Self}}"     IsChecked="{Binding IsSelected,                         Mode=TwoWay}" />   </DataTemplate>
Also, I want to change background colour of okay/cancel buttons	You can change the Background color of the Ok and Cancel buttons in FilterPopup by customizing the PART_OkButton and PART_CancelButton in the GridFilterControl template. Refer to below mentioned code snippet,   <Style  TargetType="{x:Type syncfusion:GridFilterControl}">             <Setter Property="SortOptionVisibility" Value="Collapsed"/>             <Setter Property="FilterMode" Value="CheckboxFilter" />             <Setter Property="FontSize" Value="14" />             <Setter Property="FontWeight" Value="Normal" />             <Setter Property="Background" Value="White" />             <Setter Property="Foreground" Value="#FF000000" />             <Setter Property="BorderBrush" Value="#FFB2B2B2" />             <Setter Property="BorderThickness" Value="1" />             <Setter Property="Template"> ....……………….. …………………. ………………….   <Button x:Name="PART_OkButton"      Width="100"      Margin="5,0,0,0"      HorizontalAlignment="Stretch"      Background="SkyBlue"      BorderBrush="{StaticResource FilterButtonNormalBorder}"      Content="{syncfusion:GridLocalizationResourceExtension ResourceName=OK}"      Foreground="Red"      FontFamily="{TemplateBinding FontFamily}"      FontSize="{TemplateBinding FontSize}"      FontStretch="{TemplateBinding FontWeight}"      FontStyle="{TemplateBinding FontStyle}"      FontWeight="{TemplateBinding FontWeight}"      IsEnabled="False"      Visibility="{Binding ImmediateUpdateColumnFilter,                           RelativeSource={RelativeSource TemplatedParent},                           Converter={StaticResource ResourceKey=boolToVisiblityConverter},                           ConverterParameter=InverseVisiblity}" />  <Button x:Name="PART_CancelButton"      Width="100"      Margin="5,0,0,0"      HorizontalAlignment="Stretch"      Background="SkyBlue"      BorderBrush="{StaticResource FilterButtonNormalBorder}"      FontFamily="{TemplateBinding FontFamily}"      FontSize="{TemplateBinding FontSize}"      FontStretch="{TemplateBinding FontWeight}"      FontStyle="{TemplateBinding FontStyle}"      FontWeight="{TemplateBinding FontWeight}"      Content="{Binding ImmediateUpdateColumnFilter,                        RelativeSource={RelativeSource TemplatedParent},                        Converter={StaticResource resourceNameConverter}}"      Foreground="Red" /> ………………… ………………… ………………..   </Style>
Also, I want to change the background color of the filtering button in the header.	Your requirement to change the background color of the filtering button in SfDataGrid be achieved by overriding the FilterToggleButton style. Refer to the below code snippet,   <!-- Customize the style of Filter icon --> <Style TargetType="syncfusion:FilterToggleButton">                       <Setter Property="Foreground" Value="Red"/> </Style>   UG Link: https://help.syncfusion.com/wpf/datagrid/filtering#appearance-customization KB Link: https://www.syncfusion.com/kb/8184/how-to-customize-the-filtering-and-sorting-icons-in-wpf-datagrid-sfdatagrid https://www.syncfusion.com/kb/2482/how-to-change-the-filtertogglebutton-color-while-filtering

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_816b3719.zip

[kivanc yilmaz]

Hi, thanks for answer. they solved my all questions but I have new questions about these problems. 

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. 

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?

My third question is changing scrollbar style in this popup because I am using fixed size in this popup. And scrollbar is automatically opening if popup have a lot of item. So, it is working okay but I want to change the style of this scrollbar.

My final question is when popup is open, when I choose any checkbox except selectall and save it using okay button. After that when I open this popup again, I am seeing that one checkbox or checkbox icon I don't know what is that inside of this popup but in the left side. It is not clickeable. I am uploading an example image. I want to remove this thing from my popup

Attachment: example_d40ef785.rar

[Vijayarasan Sivanandham]

We have created new threads for each query, and the links are below.

https://www.syncfusion.com/forums/178795/how-to-change-the-filter-toggle-button-in-sfdatagrid

https://www.syncfusion.com/forums/178796/how-to-change-the-position-of-filtertogglebutton-in-header-cell-of-sfdatagrid

https://www.syncfusion.com/forums/178797/how-to-customize-the-scrollbar-style-in-checkboxfiltercontrol-of-sfdatagrid

https://www.syncfusion.com/forums/178798/how-to-remove-checkbox-in-the-left-side-and-disable-the-blankfilter-in

[kivanc yilmaz]

Hi, I have 3 new questions about this topic. So, I want to write here because of I am using your example project. 

1- I have 2 different column and both of them are allowing filtering. So, I have 2 filtertogglebutton in my view. And one of them must be visible all time but other one can change according to the situation. I tried do binding to visibility property of filtertogglebutton but it is affecting all buttons. How can I do that? 

2-It is very similar to first one. I want to add tooltip to these 2 filtertogglebutton. And each one must be different. 

3-When I click the filtertogglebutton, I am seeing a popup for changing filters. I want to affect " PART_OkButton"'s isEnable property. If filter popup has elements inside, it can be isEnable = true but if it has not any element inside, it must be isEnable = false. I tried to do binding but I saw an error about "cannot find the binding value". 

[Vijayarasan Sivanandham]

kivanc Yilmaz,

We have created new threads for each query, and the links are below.

https://www.syncfusion.com/forums/179269/how-to-change-the-visible-of-filtertogglebutton-in-sfdatagrid-from-178541

https://www.syncfusion.com/forums/179270/how-to-show-the-tooltip-for-filtertogglebutton-in-sfdatagrid-from-178541

https://www.syncfusion.com/forums/179271/how-to-customize-the-isenable-property-in-part-okbutton-of-filtertogglebutton-from-178541