How can I customise font style of the advanced filter control?

[ArvinZJC]

Hi,

In my project, I use MaterialLight theme and want to customise the font family and font size in the advanced filter control of the data grid. I have the following code.

But it takes no effect. How can I customise these properties' values with MaterialLight theme applied?

I notice that in SfDataGrid.xaml the font family is defined as "FontFamily="{StaticResource MaterialLight.ThemeFontFamily}"". Is it possible for me to change the default font family of the theme?

Regards,

Arvin

[Vijayarasan Sivanandham]

Hi ArvinZJC,

Thank you for contacting Syncfusion support.

Your requirement can be achieved by customize the GridFilterControl in SfDataGrid. Please refer the below code snippet,

Code Snippet for Advance Filter in SfDataGrid: 

<Window.Resources> 

        <Style TargetType="syncfusion:AdvancedFilterControl"> 

            <Setter Property="CanGenerateUniqueItems" Value="False" /> 

        </Style> 

        <Style x:Key="filterControlStyle" TargetType="syncfusion:GridFilterControl"> 

            <Setter Property="FilterMode" Value="AdvancedFilter" /> 

            <Setter Property="FontSize" Value="15" /> 

            <Setter Property="FontFamily" Value="Arial Black" />            

        </Style>        

    </Window.Resources> 

 

<syncfusion:SfDataGrid x:Name="sfGrid"                                      

                                       AllowFiltering="True" 

                                       AutoGenerateColumns="False" 

                                       FilterPopupStyle="{StaticResource filterControlStyle}" 

                                       ColumnSizer="Star"                                                                             

                                       ItemsSource="{Binding EmployeeDetails}" > 

 

Screen shot for your reference,



 

Code Snippet for default Filter: 

<Window.Resources>         

        <Style x:Key="filterControlStyle" TargetType="syncfusion:GridFilterControl"> 

            <Setter Property="FilterMode" Value="Both" /> 

            <Setter Property="FontSize" Value="15" /> 

            <Setter Property="FontFamily" Value="Arial Black" /> 

            <Setter Property="CheckboxFilterStyle"> 

                <Setter.Value> 

                    <Style TargetType="syncfusion:CheckboxFilterControl"> 

                        <Setter Property="Background" Value="Red"/> 

                        <Setter Property="ItemTemplate"> 

                            <Setter.Value> 

                                <DataTemplate> 

                                    <CheckBox Margin="4" 

            HorizontalAlignment="Stretch" 

            HorizontalContentAlignment="Stretch" 

            Content="{Binding DisplayText, 

                            Mode=OneWay}" 

            Focusable="False" 

            FontFamily="Arial Black" 

            FontSize="15" 

            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> 

                            </Setter.Value> 

                        </Setter> 

                    </Style> 

                </Setter.Value> 

            </Setter> 

        </Style>        

</Window.Resources>

<syncfusion:SfDataGrid x:Name="sfGrid"                                      

                                       AllowFiltering="True" 

                                       AutoGenerateColumns="False" 

                                       FilterPopupStyle="{StaticResource filterControlStyle}" 

                                       ColumnSizer="Star"                                                                             

                                       ItemsSource="{Binding EmployeeDetails}" > 

Screen shot for your reference,

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/156722/ze/Sample-2014472515 

UG Link: https://help.syncfusion.com/wpf/datagrid/filtering?cs-save-lang=1&cs-lang=xaml#customize-the-filterpopup-size-using-gridfiltercontrol-style

We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 

[ArvinZJC]

Hi Vijayarasan,

Thanks for your reply! Unfortunately, I actually already tried this way in my NET Core WPF project, but strangely it takes no effect. In order to keep the entire appearance of the Material Light theme (as you see combo boxes and some other places in your screenshots are in Metro theme I think), my part of code is as follows:

<Grid.Resources>

                    <ResourceDictionary>

                        <ResourceDictionary.MergedDictionaries>

                            <ResourceDictionary Source="/Syncfusion.Themes.MaterialLight.WPF;component/SfDataGrid/SfDataGrid.xaml" />

                        </ResourceDictionary.MergedDictionaries>

                        <Style BasedOn="{StaticResource SyncfusionAdvancedFilterControlStyle}" TargetType="syncfusion:AdvancedFilterControl">

                            <Setter Property="CanGenerateUniqueItems" Value="False" />

                        </Style>

                        <Style x:Key="GridFilterPopupStyle"

                               BasedOn="{StaticResource SyncfusionGridFilterControlStyle}"

                               TargetType="syncfusion:GridFilterControl">

                            <Setter Property="FilterMode" Value="AdvancedFilter" />

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" />

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" />

                        </Style>

...

                    </ResourceDictionary>

                </Grid.Resources>

All columns use number filters. If I delete "BasedOn=...", it basically works, but the theme of some controls like the combo box will not be MaterialLight. Could you help me to sort out the problem?

Regards,

Arvin

[Vijayarasan Sivanandham]

Hi ArvinZJC,

Thanks for the update. 

 

We could able to reproduce your reported issue “customized font style of the advanced filter control not applied when Material Theme used in SfDataGrid” from our end. Currently, we are checking the feasibility to fix this issue from our end. We will validate and update you details on August 13, 2020. 

 

We appreciate your patience until then. 

 

Regards, 

Vijayarasan S 

 

[Vijayarasan Sivanandham]

Hi ArvinZJC,

Thank you for your patience. 

Currently material theme does not have support to change the font family for controls. Can you please confirm whether you need to change the filter control's font family alone or SfDataGrid's entire elements font family? If you want to change the font family of filter control alone, please let us know the exact use case. Because, UI will be displayed as unique comparing to DataGrid and FilterControl. If you provide the details, we will look onto that and check the possibility to provide the support.

Regards,
Vijayarasan S 

[ArvinZJC]

Hi Vijayarasan,

I have customised each cell including those in column headers and stacked headers by using a specified font family and font size. What I actually want is that the advanced filter control can have a uniform style. That is why I also want to change the font family and font size of the advanced filter control. As you know, I fail. Certainly, it has nothing to do with the functionality, but I believe that using the same style can make it look more comfortable.

Regards,

Arvin

P.S.

<Grid.Resources>

                    <ResourceDictionary>

                        <ResourceDictionary.MergedDictionaries>

                            <ResourceDictionary Source="/Syncfusion.Themes.MaterialLight.WPF;component/SfDataGrid/SfDataGrid.xaml" />

                        </ResourceDictionary.MergedDictionaries>

                        <Style BasedOn="{StaticResource SyncfusionAdvancedFilterControlStyle}" TargetType="syncfusion:AdvancedFilterControl">

                            <Setter Property="CanGenerateUniqueItems" Value="False" />

                        </Style>

                        <Style BasedOn="{StaticResource SyncfusionGridStackedHeaderCellControlStyle}" TargetType="syncfusion:GridStackedHeaderCellControl">

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" />

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" />

                        </Style>

                        <Style BasedOn="{StaticResource WPFToolTipStyle}" TargetType="ToolTip">

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" />

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" />

                        </Style>

                        <Style x:Key="GridCellStyle"

                               BasedOn="{StaticResource SyncfusionGridCellStyle}"

                               TargetType="syncfusion:GridCell">

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" />

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" />

                        </Style>

                        <Style x:Key="GridFilterPopupStyle"

                               BasedOn="{StaticResource SyncfusionGridFilterControlStyle}"

                               TargetType="syncfusion:GridFilterControl">

                            <Setter Property="FilterMode" Value="AdvancedFilter" />

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" /> (no effects)

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" /> (no effects)

                        </Style>

                        <Style x:Key="GridHeaderStyle"

                               BasedOn="{StaticResource SyncfusionGridHeaderCellControlStyle}"

                               TargetType="syncfusion:GridHeaderCellControl">

                            <Setter Property="FontFamily" Value="{Binding GlobalFontFamily, Source={StaticResource StyleProperties}}" />

                            <Setter Property="FontSize" Value="{Binding PrimaryTextFontSize, Source={StaticResource StyleProperties}}" />

                        </Style>

                    </ResourceDictionary>

                </Grid.Resources>

[Vijayarasan Sivanandham]

Hi ArvinZJC,


Thanks you for the update.


We are currently working on your requirement of “customized font style of the advanced filter control not applied when Material Theme used in SfDataGrid” and we need two more business days to validate this. We will update you with further details on August 18, 2020.

We appreciate your patience until then.  

Regards, 

Vijayarasan S

[Vijayarasan Sivanandham]

Hi ArvinZJC,

Sorry for the inconvenience caused.

Currently, SfDataGrid does not have a support for applying customized font family in Advance Filter Control when theme applied. We are checking the feasibility to achieve your requirement and we will update you with further details on August 20, 2020.

We appreciate your patience until then.  

Regards, 

Vijayarasan S

[Vijayarasan Sivanandham]

Hi ArvinZJC, 

 

Thank you for your patience.

Currently, SfDataGrid does not have a support for customized FontSize and FontFamily for AdvanceFilterControl when theme applied. We have analyzed and considered your requirmenet of “Provide the support to customized FontSize and FontFamily for whole application when Theme applied” in SfDataGrid and logged feature request for the same. We will implement this feature in any of our upcoming release. 

 

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then. 

 

Thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts.  

 

We will update the feedback link for this feature on 24^th August 2020. 

 

Regards,
Vijayarasan S 

[Vijayarasan Sivanandham]

Hi ArvinZJC,

Thank you for your patience.

As we mentioned earlier, we will implement this feature “Provide the support to customized FontSize and FontFamily for whole application when Theme applied” in any of our upcoming release. We will let you know when this feature is implemented. We appreciate your patience until then.

You can also communicate with us regarding the open features any time using our Feature Report page.

Feedback link:  https://www.syncfusion.com/feedback/17227/provide-support-to-customize-the-fontsize-and-fontfamily-based-on-theme-applied

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count. 

Regards,
Vijayarasan S