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

Customising SfDataGrid Filtering PopUp

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

3 Replies 1 reply marked as answer

VS Vijayarasan Sivanandham Syncfusion Team November 1, 2022 12:18 PM

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

Marked as answer

KY kivanc yilmaz November 10, 2022 02:27 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon