Skip to content

Commit 6bf1b1a

Browse files
author
KB Bot
committed
Added new kb article datagrid-filtering-ui-customization-keep-only-distinct-values
1 parent e1183d1 commit 6bf1b1a

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed

‎knowledge-base/datagrid-filtering-ui-customization-keep-only-distinct-values.md‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
---
2+
title: Customizing DataGrid Filtering UI in UI for .NET MAUI
3+
description: Learn how to customize the filtering UI in Telerik DataGrid to remove the filtering criteria and display distinct values checkbox only.
4+
type: how-to
5+
page_title: Modify Filtering UI in Telerik DataGrid for Distinct Values Only
6+
meta_title: Modify Filtering UI in Telerik DataGrid for Distinct Values Only
7+
slug: datagrid-filtering-ui-customization-keep-only-distinct-values
8+
tags: datagrid, ui-for-net-maui, filter, control-template, filtering-ui
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
| Version | Product | Author |
15+
| --- | --- | ---- |
16+
| 11.1.0 | Telerik UI for .NET MAUI DataGrid | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
17+
18+
## Description
19+
20+
I want to customize the filtering UI in the Telerik [DataGrid](https://www.telerik.com/maui-ui/datagrid) in my UI for .NET MAUI application. Specifically, I need to remove the filtering criteria section and display only the distinct values checkbox along with the close and filter buttons.
21+
22+
This knowledge base article also answers the following questions:
23+
- How to modify the filter control template in Telerik DataGrid?
24+
- How to remove filtering criteria from Telerik DataGrid filtering UI?
25+
- How to display only distinct values in DataGrid filtering UI?
26+
27+
## Solution
28+
29+
To modify the filtering UI in Telerik DataGrid, update the filtering control template. Add TelerikTheming to your project and locate the `DataGrid.xaml` file under `TelerikTheming/Styles/Platform`. Use the `DataGridTextFilterControlControlTemplate_Mobile` for mobile or `DataGridTextFilterControlControlTemplate_Desktop` for desktop.
30+
31+
Follow these steps:
32+
33+
1. Add TelerikTheming resources to your project. Refer to the [TelerikTheming documentation](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview).
34+
35+
2. Open the `DataGrid.xaml` file under `TelerikTheming/Styles/Platform`. Locate the control templates for filtering.
36+
37+
3. Use the `DataGridTextFilterControlControlTemplate_Mobile` and remove unnecessary parts. Keep only the `DataGridDistinctValuesFilterView`, the close button, and the filter/reset buttons.
38+
39+
4. Define the updated template in your XAML resources.
40+
41+
Example:
42+
43+
```xml
44+
<ContentPage.Resources>
45+
<ResourceDictionary>
46+
<telerikMauiControls:AreEqualToBoolConverter x:Key="AreEqualToBoolConverter" />
47+
<telerikMauiControls:IsOfTypeConverter x:Key="IsColumnConverter" Type="{x:Type telerikDataGrid:DataGridColumn}" />
48+
<telerikMauiControls:NullOrEmptyToBoolConverter x:Key="NullOrEmptyToBoolConverter" />
49+
50+
<Style x:Key="DataGridFilterControlMatchCaseButtonStyle_iOS" TargetType="telerikMauiControls:RadToggleButton">
51+
<Setter Property="Background" Value="{DynamicResource RadDataGridFilterControlMatchCaseButtonBackgroundColor}" />
52+
</Style>
53+
54+
<Style x:Key="DataGridFilterControlBorderStyle_Mobile" TargetType="telerikMauiControls:RadBorder">
55+
<Setter Property="BackgroundColor" Value="{DynamicResource RadDataGridFilterControlBackgroundColor}" />
56+
<Setter Property="BorderColor" Value="{DynamicResource RadBorderAltColor}" />
57+
<Setter Property="BorderThickness" Value="1" />
58+
</Style>
59+
60+
<Style x:Key="DataGridFilterControlRootBorderStyle_Mobile" TargetType="telerikMauiControls:RadBorder" BasedOn="{StaticResource DataGridFilterControlBorderStyle_Mobile}">
61+
<Setter Property="BorderThickness" Value="0" />
62+
<Setter Property="Padding" Value="{OnPlatform Default=0, iOS='0, 8'}" />
63+
</Style>
64+
65+
<Style x:Key="DataGridFilterControlSeparatorStyle_Mobile" TargetType="telerikMauiControls:RadBorder">
66+
<Setter Property="BackgroundColor" Value="{DynamicResource RadBorderAltColor}" />
67+
<Setter Property="HeightRequest" Value="1" />
68+
</Style>
69+
70+
<Style x:Key="DataGridFilterControlMatchCaseButtonStyle" TargetType="telerikMauiControls:RadToggleButton">
71+
<Setter Property="Content" Value="{x:Static telerikMauiCore:TelerikFont.IconMatchCase}" />
72+
<Setter Property="FontFamily" Value="{x:Static telerikMauiCore:TelerikFont.Name}" />
73+
<Setter Property="FontSize" Value="16" />
74+
<Setter Property="Padding" Value="0" />
75+
<Setter Property="WidthRequest" Value="{OnPlatform Default=44, iOS=36, MacCatalyst=30, WinUI=32}" />
76+
<Setter Property="HeightRequest" Value="{OnPlatform Default=44, iOS=36, MacCatalyst=30, WinUI=32}" />
77+
</Style>
78+
79+
<Style x:Key="DataGridTextOnlyButtonStyle" TargetType="telerikMauiControls:RadButton">
80+
<Setter Property="FontSize" Value="14" />
81+
<Setter Property="TextColor" Value="{DynamicResource RadPrimaryColor}" />
82+
<Setter Property="BackgroundColor" Value="Transparent" />
83+
<Setter Property="BorderWidth" Value="0" />
84+
<Setter Property="VisualStateManager.VisualStateGroups">
85+
<VisualStateGroupList>
86+
<VisualStateGroup Name="CommonStates">
87+
<VisualState Name="Normal" />
88+
<VisualState Name="PointerOver">
89+
<VisualState.Setters>
90+
<Setter Property="telerikMauiControls:RadButton.BackgroundColor" Value="{DynamicResource RadDataGridCloseButtonPointerOverBackgroundColor}" />
91+
</VisualState.Setters>
92+
</VisualState>
93+
<VisualState Name="Disabled">
94+
<VisualState.Setters>
95+
<Setter Property="telerikMauiControls:RadButton.TextColor" Value="{DynamicResource LabelDisabledTextColor}" />
96+
</VisualState.Setters>
97+
</VisualState>
98+
</VisualStateGroup>
99+
</VisualStateGroupList>
100+
</Setter>
101+
</Style>
102+
103+
<Style x:Key="DataGridCloseButtonStyle" TargetType="telerikMauiControls:RadButton" BasedOn="{StaticResource DataGridTextOnlyButtonStyle}">
104+
<Setter Property="FontFamily" Value="Arial" />
105+
<Setter Property="FontAttributes" Value="{OnPlatform Default=None, Android=Bold, iOS=Bold}" />
106+
<Setter Property="Text" Value="&#x2715;" />
107+
<Setter Property="TextColor" Value="{DynamicResource RadSubtleColor}" />
108+
<Setter Property="Padding" Value="0" />
109+
<Setter Property="WidthRequest" Value="{OnPlatform Default=40, MacCatalyst=20, WinUI=22}" />
110+
<Setter Property="HeightRequest" Value="{OnPlatform Default=40, MacCatalyst=20, WinUI=22}" />
111+
</Style>
112+
113+
<Style x:Key="DataGridFilterControlApplyFilterButtonStyle_Mobile" TargetType="telerikMauiControls:RadButton" BasedOn="{StaticResource DataGridTextOnlyButtonStyle}">
114+
<Setter Property="TextTransform" Value="{OnPlatform Default=None, Android=Uppercase}" />
115+
<Setter Property="Padding" Value="{OnPlatform Default='30, 8', iOS='24, 12'}" />
116+
</Style>
117+
118+
<Style x:Key="DataGridFilterControlApplyFilterButtonStyle" TargetType="telerikMauiControls:RadButton" BasedOn="{StaticResource DataGridFilterControlApplyFilterButtonStyle_Mobile}" />
119+
120+
<Style x:Key="DataGridFilterControlResetFilterButtonStyle" TargetType="telerikMauiControls:RadButton" BasedOn="{StaticResource DataGridTextOnlyButtonStyle}">
121+
<Setter Property="TextTransform" Value="{OnPlatform Default=None, Android=Uppercase}" />
122+
<Setter Property="Padding" Value="{OnPlatform Default='30, 8', iOS='24, 12'}" />
123+
</Style>
124+
125+
<ControlTemplate x:Key="DataGridTextFilterControlControlTemplate_Mobile">
126+
<telerikMauiControls:RadBorder Style="{StaticResource DataGridFilterControlRootBorderStyle_Mobile}">
127+
<Grid RowDefinitions="*, Auto, Auto">
128+
<ScrollView>
129+
<VerticalStackLayout>
130+
<telerikDataGrid:DataGridDistinctValuesFilterView DistinctValues="{TemplateBinding DistinctValues}"
131+
IsVisible="{TemplateBinding DistinctValues, Converter={StaticResource NullOrEmptyToBoolConverter}}"
132+
Margin="{OnPlatform Android='16, 12', iOS=16}" />
133+
<telerikMauiControls:RadBorder Style="{StaticResource DataGridFilterControlSeparatorStyle_Mobile}" />
134+
<!--<VerticalStackLayout Margin="{OnPlatform Android=16, iOS='16, 24'}">
135+
<Label Text="{telerikMauiControls:Localize DataGrid_Filter_ShowRowsWithValueThat}"
136+
FontAttributes="Bold"
137+
Margin="{OnPlatform Android='0, 0, 0, 12', iOS='0, 0, 0, 8'}" />
138+
<telerikMauiControls:RadComboBox ItemsSource="{TemplateBinding DescriptorOperators}"
139+
SelectedItem="{TemplateBinding FirstDescriptorOperator, Mode=TwoWay}"
140+
IsClearButtonVisible="False"
141+
Margin="{OnPlatform Android='0, 4', iOS='0, 8'}" />
142+
<Grid ColumnDefinitions="*, Auto"
143+
ColumnSpacing="{OnPlatform Android=8, iOS=10}"
144+
Padding="{OnPlatform Android='0, 4', iOS='0, 8'}">
145+
<telerikMauiControls:RadEntry Text="{TemplateBinding FirstDescriptorValue, Mode=TwoWay}"
146+
Placeholder="{telerikMauiControls:Localize DataGrid_FilterWatermarkText}" />
147+
<telerikMauiControls:RadToggleButton Grid.Column="1"
148+
IsToggled="{TemplateBinding IsFirstDescriptorCaseSensitive}"
149+
Style="{StaticResource DataGridFilterControlMatchCaseButtonStyle}"
150+
HorizontalOptions="End"
151+
VerticalOptions="Center" />
152+
</Grid>
153+
<telerikMauiControls:RadSegmentedControl ItemsSource="{TemplateBinding LogicalOperators}"
154+
SelectedIndex="{TemplateBinding LogicalOperatorIndex, Mode=TwoWay}"
155+
HeightRequest="{OnPlatform Android={Binding Height, Source={Reference picker}}}"
156+
Margin="{OnPlatform Android='0, 12'}" />
157+
<telerikMauiControls:RadComboBox x:Name="picker"
158+
ItemsSource="{TemplateBinding DescriptorOperators}"
159+
SelectedItem="{TemplateBinding SecondDescriptorOperator, Mode=TwoWay}"
160+
IsClearButtonVisible="False"
161+
Margin="{OnPlatform iOS='0, 8'}" />
162+
<Grid ColumnDefinitions="*, Auto"
163+
ColumnSpacing="{OnPlatform Android=8, iOS=10}"
164+
Padding="{OnPlatform Android='0, 4', iOS='0, 8'}">
165+
<telerikMauiControls:RadEntry Text="{TemplateBinding SecondDescriptorValue, Mode=TwoWay}"
166+
Placeholder="{telerikMauiControls:Localize DataGrid_FilterWatermarkText}" />
167+
<telerikMauiControls:RadToggleButton Grid.Column="1"
168+
IsToggled="{TemplateBinding IsSecondDescriptorCaseSensitive}"
169+
Style="{StaticResource DataGridFilterControlMatchCaseButtonStyle}"
170+
HorizontalOptions="End"
171+
VerticalOptions="Center" />
172+
</Grid>
173+
</VerticalStackLayout>-->
174+
</VerticalStackLayout>
175+
</ScrollView>
176+
<telerikMauiControls:RadButton Command="{TemplateBinding CloseCommand}"
177+
HorizontalOptions="End"
178+
VerticalOptions="Start"
179+
Style="{StaticResource DataGridCloseButtonStyle}" />
180+
<telerikMauiControls:RadBorder Grid.Row="1"
181+
Style="{StaticResource DataGridFilterControlSeparatorStyle_Mobile}" />
182+
<HorizontalStackLayout Grid.Row="2"
183+
HorizontalOptions="End"
184+
VerticalOptions="Center"
185+
Margin="{OnPlatform Android='0, 8, 0, 0', iOS='0, 10, 0, 0'}">
186+
<telerikMauiControls:RadButton Text="{telerikMauiControls:Localize DataGrid_Filter_ResetFilter}"
187+
Command="{TemplateBinding ResetFilterCommand}"
188+
Style="{StaticResource DataGridFilterControlResetFilterButtonStyle}"
189+
Margin="4, 0" />
190+
<telerikMauiControls:RadButton Text="{telerikMauiControls:Localize DataGrid_Filter_ApplyFilter}"
191+
Command="{TemplateBinding ApplyFilterCommand}"
192+
Style="{StaticResource DataGridFilterControlApplyFilterButtonStyle}"
193+
Margin="4, 0, 10, 0" />
194+
</HorizontalStackLayout>
195+
196+
</Grid>
197+
</telerikMauiControls:RadBorder>
198+
</ControlTemplate>
199+
</ResourceDictionary>
200+
</ContentPage.Resources>
201+
<telerik:RadDataGrid x:Name="dataGrid"
202+
Grid.Row="1"
203+
UserEditMode="Cell"
204+
AutoGenerateColumns="False"
205+
ItemsSource="{Binding Items}">
206+
<telerik:RadDataGrid.Columns>
207+
<telerik:DataGridTextColumn PropertyName="Country"
208+
HeaderText="Country">
209+
<telerik:DataGridTextColumn.FilterControlTemplate>
210+
<DataTemplate>
211+
<telerik:DataGridTextFilterControl ControlTemplate="{StaticResource DataGridTextFilterControlControlTemplate_Mobile}" />
212+
</DataTemplate>
213+
</telerik:DataGridTextColumn.FilterControlTemplate>
214+
</telerik:DataGridTextColumn>
215+
216+
217+
<telerik:DataGridTextColumn PropertyName="Capital"
218+
HeaderText="Capital"/>
219+
</telerik:RadDataGrid.Columns>
220+
</telerik:RadDataGrid>
221+
```
222+
223+
## See Also
224+
225+
- [DataGrid Documentation](https://www.telerik.com/maui-ui/documentation/controls/datagrid/overview)
226+
- [TelerikTheming Documentation](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview)
227+
- [DataGrid Filtering Control Template](https://www.telerik.com/maui-ui/documentation/controls/datagrid/filtering/filter-control-template)

0 commit comments

Comments
 (0)