This is a migrated thread and some comments may be shown as answers.

FilterRow below ColumnHeader

13 Answers 260 Views

GridView

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 17 Jan 2013, 08:41 AM

Hi,

The control is called FieldFilterControl. Here is its template:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView"

xmlns:treelist="clr-namespace:Telerik.Windows.Controls.TreeListView"

xmlns:input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

xmlns:controls="clr-namespace:Telerik.Windows.Controls"

>

<grid:FilterOperatorConverter x:Key="FilterOperatorConverter" />

<SolidColorBrush x:Key="GridView_FilterIconOuterBorder" Color="Black" />

<SolidColorBrush x:Key="GridView_FilterIconTopBorder" Color="White" />

<LinearGradientBrush x:Key="GridView_FilterIconBackground" EndPoint="0,0.5" StartPoint="1,0.5">

<GradientStop Color="#FF353535" Offset="0"/>

<GradientStop Color="White" Offset="0.8"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="GridView_FilterIconBackground_Filtered" EndPoint="0,0.5" StartPoint="1,0.5">

<GradientStop Color="#FFFF7300" Offset="0"/>

<GradientStop Color="#FFFFF400" Offset="0.8"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="GridView_FilterIconInnerBorder" Color="#FF5B5B5B" />

<telerik:Office_BlackTheme x:Key="Theme" />

<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484" />

<DataTemplate x:Key="FilterOperatorItemTemplate">

<TextBlock Text="{Binding Converter={StaticResource FilterOperatorConverter}}" />

</DataTemplate>

<Style x:Key="FieldFilterDropDownButtonStyle" TargetType="telerik:RadDropDownButton">

<Setter Property="IsOpen" Value="false"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="3"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadDropDownButton">

<Grid>

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Popup x:Name="DropDownPopup">

<ContentPresenter x:Name="DropDownPopupContent" ContentTemplate="{TemplateBinding DropDownContentTemplate}" Content="{TemplateBinding DropDownContent}" DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="FieldFilterControlTemplate" TargetType="grid:FieldFilterControl">

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid x:Name="PART_MainGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<ContentControl x:Name="PART_FilterEditorContentControl"

Grid.Column="0"

IsEnabled="{Binding EditorIsEnabled}"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch" Margin="2 1 0 2"/>

<telerik:RadDropDownButton x:Name="PART_DropDownButton"

Grid.Column="1"

KeepOpen="False" Style="{StaticResource FieldFilterDropDownButtonStyle}"

DropDownIndicatorVisibility="Collapsed">

<Border Cursor="Hand" Background="Transparent" Padding="3 0 0 0">

<Grid Width="12" Height="13" Cursor="Hand">

<Path Fill="{StaticResource GridView_FilterIconOuterBorder}" Stretch="Fill" Margin="0 1 0 0" Data=

"M5,9 L6,9 6,10 5,10 z M4,4 L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5 z M7.9850001,3 L8.985,3 8.985,4 8,4 8,5 8,6 8,7 8,8 8,9 8,10 8,11 7.9999997,12 6.9999998,12 6.9999998,11 6,11 6,10 6.9999999,10 6.9999999,9 6.9999999,8 6.9999999,7 6.9999999,6 6.9999999,5 6.9999999,4 7.9850001,4 z M3,3 L4,3 4,4 3,4 z M9,2 L10,2 10,3 9,3 z M2,2 L3,2 3,3 2,3 z M7.9999999,0 L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1 z M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6.9999998,0 7.9999997,0 7.9999997,1 6.9999998,1 6,1 5,1 4,1 3,1 2,1 2,2 1,2 1,1 0,1 z"

/>

<Path Fill="{StaticResource GridView_FilterIconTopBorder}" Stretch="Fill" Margin="2 1 2 0" VerticalAlignment="Top" Height="1" Data=

"M0,0 L1,0 2,0 3.0000002,0 4.0000002,0 5.0000001,0 5.9850001,0 6.0000001,0 6.9850001,0 7.9850001,0 7.9850001,1 6.9850001,1 6.0000001,1 5.9850001,1 5.0000001,1 4.0000002,1 3.0000002,1 2,1 1,1 0,1 z"

/>

<Path Fill="{StaticResource GridView_FilterIconBackground}" Stretch="Fill" Margin="3 2 3 3" Data=

"M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6,1 5,1 4.985,1 4.985,2 4,2 4,3 4,4 4,5 4,6 4,7 4,8 3,8 3,7 2,7 2,6 2,5 2,4 2,3 2,2 1,2 1,1 0,1 z"

/>

<Path Fill="{StaticResource GridView_FilterIconBackground_Filtered}" Visibility="{Binding FunnelFillVisibility}" Stretch="Fill" Margin="3,2,3,3" Data=

"M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6,1 5,1 4.985,1 4.985,2 4,2 4,3 4,4 4,5 4,6 4,7 4,8 3,8 3,7 2,7 2,6 2,5 2,4 2,3 2,2 1,2 1,1 0,1 z"

/>

<Path Fill="{StaticResource GridView_FilterIconInnerBorder}" Stretch="Fill" Margin="0 0 0 1" Data=

"M5,9 L6,9 6,10 5,10 z M4,4 L5,4 5,5 5,6 5,7 5,8 5,9 4,9 4,8 4,7 4,6 4,5 z M7.9850001,3 L8.985,3 8.985,4 8,4 8,5 8,6 8,7 8,8 8,9 8,10 8,11 7.9999997,12 6.9999998,12 6.9999998,11 6,11 6,10 6.9999999,10 6.9999999,9 6.9999999,8 6.9999999,7 6.9999999,6 6.9999999,5 6.9999999,4 7.9850001,4 z M3,3 L4,3 4,4 3,4 z M9,2 L10,2 10,3 9,3 z M2,2 L3,2 3,3 2,3 z M7.9999999,0 L9,0 10,0 11,0 12,0 12,1 11,1 11,2 10,2 10,1 9,1 7.9999999,1 z M0,0 L1,0 2,0 3,0 4,0 5,0 6,0 6.9999998,0 7.9999997,0 7.9999997,1 6.9999998,1 6,1 5,1 4,1 3,1 2,1 2,2 1,2 1,1 0,1 z"

/>

</Grid>

</Border>

<telerik:RadDropDownButton.DropDownContent>

<ListBox x:Name="PART_FilterOperatorsListBox"

ItemsSource="{Binding AvailableOperatorViewModels}"

SelectedItem="{Binding SelectedOperatorViewModel, Mode=TwoWay}"

telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:RadDropDownButton.DropDownContent>

</telerik:RadDropDownButton>

</Grid>

</Border>

</ControlTemplate>

<Style x:Key="FieldFilterControlStyle" TargetType="grid:FieldFilterControl">

<Setter Property="Template" Value="{StaticResource FieldFilterControlTemplate}" />

<Setter Property="BorderThickness" Value="0 0 1 0"/>

<Setter Property="MinHeight" Value="26"/>

<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>

<Setter Property="SnapsToDevicePixels" Value="True" />

</Style>

<Style TargetType="grid:FieldFilterControl"

BasedOn="{StaticResource FieldFilterControlStyle}"/>

<Style TargetType="grid:FieldFilterControl"

BasedOn="{StaticResource FieldFilterControlStyle}"

x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:Office_BlackTheme}, ElementType={x:Type grid:FieldFilterControl}}"/>

</ResourceDictionary>

You can examine the template and change what you need to change.

All the best,
Rossen Hristov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 04 Apr 2018, 07:34 PM

Whoops, I guess I should have just flailed for a while longer. I eventually did get this to work after copying and pasting from the xaml file.

For anyone else who comes across this and wants to hide everything for your filter row, this is what I ended up doing:

In your xaml file, within <Window></Window> add:

<Window.Resources>

<Style x:Key="FieldFilterDropDownButtonStyle" TargetType="telerik:RadDropDownButton">

<Setter Property="IsOpen" Value="false"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadDropDownButton">

<Grid>

<ContentPresenter x:Name="Content"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Popup x:Name="DropDownPopup" mat:ThemeEffectsHelper.IsAcrylic="True">

<Border x:Name="DropDownPopupBorder" Background="{telerik1:FluentResource ResourceKey=AlternativeBrush}">

<ContentPresenter x:Name="DropDownPopupContent"

ContentTemplate="{TemplateBinding DropDownContentTemplate}"

Content="{TemplateBinding DropDownContent}"

DataContext="{TemplateBinding DataContext}"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"/>

</Border>

</Popup>

</Grid>

<ControlTemplate.Triggers>

<Trigger SourceName="DropDownPopup" Property="mat:ThemeEffectsHelper.IsAcrylic" Value="True">

<Setter TargetName="DropDownPopupBorder" Property="Background" Value=

"{Binding Source={StaticResource AlternativeBrushProxy}, Path=ProxyValue, Converter={StaticResource OpacityConverter}, ConverterParameter=128}"

/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="FieldFilterControlTemplate" TargetType="grid:FieldFilterControl">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

<Grid x:Name="PART_MainGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<ContentControl x:Name="PART_FilterEditorContentControl" Margin="3 0" IsEnabled="{Binding EditorIsEnabled}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

<!--<telerik:RadDropDownButton x:Name="PART_DropDownButton" Grid.Column="1" Style="{StaticResource FieldFilterDropDownButtonStyle}" KeepOpen="False" DropDownIndicatorVisibility="Collapsed">

<Border Cursor="Hand" Background="Transparent" Padding="2 0 5 0">

<Grid Width="12" Height="11" Margin="2">

<telerik:RadGlyph FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Glyph="{StaticResource GlyphFilterSmall}"/>

<telerik:RadGlyph

FontSize="16"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="{telerik1:FluentResource ResourceKey=AccentFocusedBrush}"

Visibility="{Binding FunnelFillVisibility}"

Glyph="{StaticResource GlyphFilterSmall}"/>

</Grid>

</Border>

<telerik:RadDropDownButton.DropDownContent>

<ListBox x:Name="PART_FilterOperatorsListBox"

Background="#01FFFFFF"

ItemsSource="{Binding AvailableOperatorViewModels}"

SelectedItem="{Binding SelectedOperatorViewModel, Mode=TwoWay}"/>

</telerik:RadDropDownButton.DropDownContent>

</telerik:RadDropDownButton> -->

</Grid>

</Border>

</ControlTemplate>

<Style x:Key="FieldFilterControlStyle" TargetType="grid:FieldFilterControl">

<Setter Property="Template" Value="{StaticResource FieldFilterControlTemplate}"/>

<Setter Property="BorderBrush" Value="{telerik1:FluentResource ResourceKey=BasicSolidBrush}"/>

<Setter Property="BorderThickness" Value="0 0 1 1"/>

<Setter Property="Padding" Value="0 1"/>

<Setter Property="MinHeight" Value="31"/>

<Setter Property="FontWeight" Value="Normal"/>

<Setter Property="telerik:TouchManager.TouchMode" Value="None"/>

</Style>

<Style TargetType="grid:FieldFilterControl" BasedOn="{StaticResource FieldFilterControlStyle}"/>

</Window.Resources>

And at the top of the xaml I also had to include the following references:

xmlns:telerik1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

xmlns:grid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

xmlns:mat="clr-namespace:Telerik.Windows.Controls.MaterialControls;assembly=Telerik.Windows.Controls"

That will get rid of your filter button. To get rid of the Match Case button, add Search As You Type Filtering, and adjust your textbox so that it doesn't get cutoff and is hidden until selected (looks cleaner), add the following methods to the code behind:

private void gridView_FieldFilterEditorCreated2(object sender, Telerik.Windows.Controls.GridView.EditorCreatedEventArgs e)

{

//get the StringFilterEditor in your RadGridView

var stringFilterEditor = e.Editor as Telerik.Windows.Controls.Filtering.Editors.StringFilterEditor;

if (stringFilterEditor != null) // this is suggested as an option but doesn't

{

stringFilterEditor.MatchCaseVisibility = Visibility.Collapsed;

}

if (stringFilterEditor != null)

{

stringFilterEditor.Loaded += (s1, e1) =>

{

var textBox = e.Editor.ChildrenOfType<TextBox>().Single();

textBox.BorderBrush = Brushes.Transparent;

textBox.MinWidth = 0; //otherwise it gets cutoff in narrow columns.

textBox.TextChanged += (s2, e2) =>

{

textBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();

textBox.Focus();

};

}

private void OnRadGridViewFilterOperatorsLoading(object sender, Telerik.Windows.Controls.GridView.FilterOperatorsLoadingEventArgs e)

{

//For search as you type to work the default comparators for each column need to be set.

switch (e.Column.UniqueName)

{

case "Col1":

e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

break;

case "Col2":

e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

break;

case "Col3":

e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;

break;

case "Col4":

e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.IsGreaterThanOrEqualTo;

break;

}

Note that you'll have to adjust your column names to set the appropriate default comparators to get SAYT working. And then finally just link up your event handlers in your MainWindow constructor after InitializeComponent():

public MainWindow()

{

StyleManager.ApplicationTheme = new FluentTheme();

InitializeComponent();

this.localDataGrid.FieldFilterEditorCreated += gridView_FieldFilterEditorCreated2;

this.localDataGrid.FilterOperatorsLoading += OnRadGridViewFilterOperatorsLoading;

}

answered on 06 Apr 2018, 01:38 PM

Hello,

I am happy to hear that you have managed to find a solution. However below are some of my comments:

Instead of commenting the lines in the custom style targeting FieldFilterControl, I would set Visibility="Collapsed" to the RadDropDownButton inside because there is x:Name starting with PART, which means that it is called by code and removing it may lead to unexpected behavior.
I would suggest you migrating to NoXAML binaries because this way it won't be needed to copy all StaticResources in your application (which means that if you have already migrated to NoXAML, you can delete the FieldFilterDropDownButtonStyle)
Instead of hiding the MatchCase indicator in code, you can use the following style:

<Style TargetType="filteringEditors:StringFilterEditor" BasedOn="{StaticResource StringFilterEditorStyle}">

<Setter Property="MatchCaseVisibility" Value="Collapsed" />

</Style>

I hope this helps.

Regards,
Sia
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.