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

How to fix filter dropdown width?

24 Answers 428 Views

GridView

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

Kevin Tran asked on 08 Jul 2010, 01:44 PM

Hi Support,

In my grid view I am displaying a large strings in one column, SO when user tries to filter it,Filter Drop down almost covering the whole grid width, SO i just want to fix filter drop down width, with a horizontal scroll bar. I tried the below code, but it actually fixing width of column header .
And another important thing is that i want do it in loading time only.

foreach (GridViewHeaderCell hc in gvData.ChildrenOfType<GridViewHeaderCell>())

{

if (hc.Column.UniqueName == "ATU")

{

var fdd = hc.ChildrenOfType<FilteringDropDown>()[0];

//.

MessageBox.Show(fdd.ActualWidth.ToString());

fdd.Width = 15;

}

Thanks...

24 Answers, 1 is accepted

answered on 08 Jul 2010, 01:58 PM

Hello Kevin Tran,

You can get the control that displays the distinct values like so:

foreach (GridViewHeaderCell hc in gvData.ChildrenOfType<GridViewHeaderCell>())

{

if (hc.Column.UniqueName == "ATU")

{

var fdd = hc.ChildrenOfType<FilteringDropDown>()[0];

var distinctList = fdd.ChildrenOfType<ListBox>().Where((l) => l.Name == "PART_DistinctValuesList").FirstOrDefault();

}

You can modify it as you see fit.

Sincerely yours,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 09 Jul 2010, 07:00 AM

Hi Yavor Georgiev,
Thanks for the answer, But unfortunately its not working for me, I am unable to find control.

foreach (GridViewHeaderCell hc in gvData.ChildrenOfType<GridViewHeaderCell>())

{

if (hc.Column.UniqueName == "ATU")

{

var fdd = hc.ChildrenOfType<FilteringDropDown>()[0];

var distinctList = fdd.ChildrenOfType<Telerik.Windows.Controls.ListBox>().Where((l) => l.Name == "PART_DistinctValuesList").FirstOrDefault();

distinctList.Width = 100;

//.

MessageBox.Show(fdd.ActualWidth.ToString());

//fdd.Width = 15;

}

In which i am getting fdd.ChildrenOfType<Telerik.Windows.Controls.ListBox>() count as zero,
I want to fix filterdrop down while items loading to grid.Is there any way ? Is it possible?
Thanks,
Kevin

answered on 09 Jul 2010, 09:19 AM

Hello Kevin Tran,

Try with this code instead:

var fdd = cell.FindChildByType<FilteringDropDown>();

var popup = cell.FindChildByType<Popup>();

popup.Opened += (o, args) =>

{

var box = popup.Child.ChildrenOfType<ListBox>().Where((c) => c.Name == "PART_DistinctValuesList").FirstOrDefault();

box.Width = 200;

};

Regards,
Yavor Georgiev
the Telerik team

answered on 09 Jul 2010, 12:26 PM

Thanks for your patience
But here is my error

'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' does not contain a definition for 'Opened' and no extension method 'Opened' accepting a first argument of type 'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' could be found (are you missing a using directive or an assembly reference?)
'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' does not contain a definition for 'Child' and no extension method 'Child' accepting a first argument of type 'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' could be found (are you missing a using directive or an assembly reference?)

Thanks,

answered on 09 Jul 2010, 12:27 PM

Thanks for your patience
But here is my error

'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' does not contain a definition for 'Opened' and no extension method 'Opened' accepting a first argument of type 'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' could be found (are you missing a using directive or an assembly reference?)
'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' does not contain a definition for 'Child' and no extension method 'Child' accepting a first argument of type 'System.Collections.Generic.IList<System.Windows.Controls.Primitives.Popup>' could be found (are you missing a using directive or an assembly reference?)

Thanks,

answered on 09 Jul 2010, 12:47 PM

private void fixfilterwidth()

{

foreach (GridViewHeaderCell hc in gvData.ChildrenOfType<GridViewHeaderCell>())

{

if (hc.Column.UniqueName == "ATU")

{

var fdd = hc.ChildrenOfType<FilteringDropDown>();

var popup = hc.ChildrenOfType<Popup>();

popup[0].Opened += (o, args) =>

{

var box = popup[0].Child.ChildrenOfType<Telerik.Windows.Controls.ListBox>().Where((c) => c.Name == "PART_DistinctValuesList").FirstOrDefault();

if(box!=null)

box.Width = 200;

};

}

}

No luck :(

answered on 09 Jul 2010, 01:46 PM

Hello Kevin Tran,

The C# compiler is case-sensitive and thus you must spell the method name correctly: FindChildByType.

However, there is another, far easier way for you to achieve your requirement. In the resources of the XAML page containing your RadGridView, add the following style:

<Style TargetType="telerik:FilteringControl">

<Setter Property="MaxWidth" Value="220"/>

</Style>

Best wishes,
Yavor Georgiev
the Telerik team

answered on 09 Jul 2010, 02:30 PM

Hi,
I dont know what went wrong so here is my xaml. In which telerikGridView:FilteringControl not found

<telerikGridView:RadGridView x:Name="gvData" IsFilteringAllowed="True" FontSize="8" Margin="0" VerticalAlignment="Top" SelectionMode="Multiple" AutoGenerateColumns="False" ShowColumnFooters="True" CanUserFreezeColumns="False" RowHeight="12" ShowGroupPanel="False" CanUserSortColumns="False" Padding="1" Filtering="gvData_Filtering">

<telerikGridView:RadGridView.Resources>

<Style TargetType="telerikGridView:FilteringControl">

<Setter Property="MaxWidth" Value="220"/>

</Style>

</telerikGridView:RadGridView.Resources>

<telerikGridView:RadGridView.Columns>

<telerikGridView:GridViewSelectColumn Header="ATU Name" FooterTextAlignment="Left" IsReorderable="False" >

</telerikGridView:GridViewSelectColumn>

<telerikGridView:GridViewDataColumn UniqueName="id" FooterTextAlignment="Left" IsReorderable="False" DataMemberBinding="{Binding id}">

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="ATU Name" UniqueName="ATU" FooterTextAlignment="Left" IsReorderable="False" Width="100" DataMemberBinding="{Binding Top_Parent }" >

<telerikGridView:GridViewDataColumn.CellTemplate>

<DataTemplate>

<TextBlock TextWrapping="Wrap" Text="{Binding Path=Top_Parent}" Margin="5" TextAlignment="Left">

</TextBlock>

</DataTemplate>

</telerikGridView:GridViewDataColumn.CellTemplate>

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Top Parent" IsReorderable="False" DataMemberBinding="{Binding ATUname}">

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Opty Name" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Territory Name" DataFormatString="{}{0:C0}" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Forecast" FooterTextAlignment="Left" IsReorderable="False" DataMemberBinding="{Binding Forecast}" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Actual" IsReorderable="False" DataMemberBinding="{Binding Actual}" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Variance" IsReorderable="False" DataMemberBinding="{Binding Variance}">

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Program" DataFormatString="{}{0:C0}" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Sales Stage" FooterTextAlignment="Left" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Status" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="New Opty Amt" IsReorderable="False" DataMemberBinding="{Binding New_Oppty_Amt}">

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Comments" DataFormatString="{}{0:C0}" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Escalation" FooterTextAlignment="Left" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="Forecast Change" IsReorderable="False" DataMemberBinding="{Binding Forecast_Change}" >

</telerikGridView:GridViewDataColumn>

<telerikGridView:GridViewDataColumn Header="(CRM) Comments" IsReorderable="False" >

</telerikGridView:GridViewDataColumn>

</telerikGridView:RadGridView.Columns>

</telerikGridView:RadGridView>

and

var ex = hc.FindChildByType<FilteringDropDown>();

error is

'Telerik.Windows.Controls.GridView.GridViewHeaderCell' does not contain a definition for 'FindChildByType' and no extension method 'FindChildByType' accepting a first argument of type 'Telerik.Windows.Controls.GridView.GridViewHeaderCell' could be found (are you missing a using directive or an assembly reference?)

I am using vs2010, so i think it will give me intellisense if method exists.

Accepted

answered on 09 Jul 2010, 03:08 PM

filteringcontrolmaxwidth.zip

Hello Kevin Tran,

Please, disregard completely everything else and take a look at the sample project that I have attached.

Do not use the ChildrenOfType and FindChild methods. Delete them from your source-code completely.

The sample project that I have attached does exactly what you want to achieve. It works. Examine it very carefully and use it. The rest of your XAML is your own responsibility.

Here is what makes my sample project work. The thing in the yellow:

<UserControl x:Class="FilteringControlMaxWidth.MainPage"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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

xmlns:my="clr-namespace:FilteringControlMaxWidth"

mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700">

<UserControl.Resources>

<my:MyViewModel x:Key="MyViewModel"/>

<Style TargetType="telerik:FilteringControl">

<Setter Property="MaxWidth" Value="220"/>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot"

Background="White"

DataContext="{StaticResource MyViewModel}">

<telerik:RadGridView Name="clubsGrid"

ItemsSource="{Binding Clubs}"

AutoGenerateColumns="False"

Margin="5">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"

Header="Est."

DataFormatString="{}{0:yyyy}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"

Header="Stadium"

DataFormatString="{}{0:N0}"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</Grid>

</UserControl>

I really hope this helps.

Greetings,
Ross
the Telerik team

answered on 14 Jul 2010, 07:44 AM

To cut short it,

import this name space    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
then add this

<UserControl.Resources>

      

      

      <Style TargetType="telerik:FilteringControl">

          <Setter Property="MinWidth" Value="250"/>

          <Setter Property="MaxWidth" Value="250"/>

      </Style>

  </UserControl.Resources>

Now my problem is that i am unable to apply theme here :( , Any suggestions

answered on 14 Jul 2010, 11:45 AM

filteringcontrolmaxwidth.zip

Hi Kevin Tran,

Then I guess that you should edit the template of the filtering control.

I have attached a sample project that has the FilteringControl template at its default state. From there on, you can change whatever you want in this template in order to tailor it to your needs. For example, look for the Style that targets the filtering control and add the Min and Max Width. I have done this for you, but I have left the lines commented out.

In order to understand how styles and templates work in general, you can read this article.

I hope this helps.

Regards,
Ross
the Telerik team

Accepted

answered on 19 Jul 2010, 02:11 PM

Hi Kevin Tran,

What do you mean by "each property"? In my sample I used the default theme and changed only 1 property. In you case you should take the Windows 7 template and use it instead of the default one. The simply change only what you want -- not each property. Change only the width.

For your convenience I will paste the Windows 7 version of the XAML. Use it instead of the previous one.

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

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

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

xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

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

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

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

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

>

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

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

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

<GradientStop Color="#FFD2DEEE"/>

<GradientStop Color="#FFEEF3FC" Offset="0.2"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="GridView_FilteringControlOuterBorder" Color="#FFC0CBD9" />

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

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

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

<DataTemplate x:Key="ActionTemplate">

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

</DataTemplate>

<DataTemplate x:Key="LogicalOperatorTemplate">

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

</DataTemplate>

<ControlTemplate x:Key="FilteringControlTemplate" TargetType="grid:FilteringControl">

<Border BorderThickness="{TemplateBinding BorderThickness}"

Margin="{TemplateBinding Margin}"

CornerRadius="1"

BorderBrush="{TemplateBinding BorderBrush}">

<Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}">

<StackPanel MinWidth="200" MaxWidth="350" Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">

<StackPanel x:Name="PART_DistinctFilter" Visibility="{TemplateBinding DistinctFiltersVisibility}">

<CheckBox x:Name="PART_SelectAllCheckBox"

IsChecked="{Binding SelectAll, Mode=TwoWay}"

Margin="0,2"

telerik:LocalizationManager.ResourceKey="GridViewFilterSelectAll"

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

<ListBox x:Name="PART_DistinctValuesList"

ItemsSource="{Binding DistinctValues}"

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

ScrollViewer.HorizontalScrollBarVisibility="Auto"

MaxHeight="250"

SelectionMode="Multiple">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel/>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

<ListBox.ItemTemplate>

<DataTemplate>

<CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"

Content="{Binding ConvertedValue}"

VerticalContentAlignment="Center"

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

</DataTemplate>

</ListBox.ItemTemplate>

<!--<ListBox.ItemContainerStyle>

<Style TargetType="ListBoxItem"

telerik:StyleManager.BasedOn="{StaticResource Theme}"

>

</Style>

</ListBox.ItemContainerStyle>-->

</ListBox>

</StackPanel>

<StackPanel Margin="0,2">

<TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" />

<input:RadComboBox x:Name="PART_Filter1ComboBox"

Margin="0,2,0,2"

ItemTemplate="{StaticResource ActionTemplate}"

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

ItemsSource="{Binding AvailableActions}"

SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />

<TextBox x:Name="PART_Filter1TextBox"

Text="{Binding Filter1.Value, Mode=TwoWay}"

VerticalContentAlignment="Center"

Margin="0,2" Padding="3,0"

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

Height="22" />

<CheckBox x:Name="PART_Filter1MatchCaseCheckBox"

IsChecked="{Binding Filter1.IsCaseSensitive, Mode=TwoWay}"

Visibility="{Binding MatchCaseVisibility}"

Margin="0,2"

telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"

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

<input:RadComboBox x:Name="PART_LogicalOperatorsComboBox"

Margin="0,2"

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

ItemTemplate="{StaticResource LogicalOperatorTemplate}"

ItemsSource="{Binding LogicalOperators}"

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

<input:RadComboBox x:Name="PART_Filter2ComboBox"

Margin="0,2"

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

ItemTemplate="{StaticResource ActionTemplate}"

ItemsSource="{Binding AvailableActions}"

SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />

<TextBox x:Name="PART_Filter2TextBox"

Text="{Binding Filter2.Value, Mode=TwoWay}"

VerticalContentAlignment="Center"

Margin="0,2" Padding="3,0"

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

Height="22" />

<CheckBox x:Name="PART_Filter2MatchCaseCheckBox"

IsChecked="{Binding Filter2.IsCaseSensitive, Mode=TwoWay}"

Visibility="{Binding MatchCaseVisibility}"

Margin="0,2"

telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"

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

</StackPanel>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Button x:Name="PART_ApplyFilterButton" Grid.Column="0"

Margin="0,2,2,2" Height="22"

telerik:LocalizationManager.ResourceKey="GridViewFilter"

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

<Button x:Name="PART_ClearFilterButton" Grid.Column="1"

Margin="2,2,0,2" Height="22"

telerik:LocalizationManager.ResourceKey="GridViewClearFilter"

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

</Grid>

</StackPanel>

</Border>

</ControlTemplate>

<Style TargetType="grid:FilteringControl" >

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

<Setter Property="Background" Value="{StaticResource GridView_FilteringControlBackground}" />

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

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

<Setter Property="Margin" Value="0,2,0,0" />

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

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

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

<Setter Property="Foreground" Value="{StaticResource ControlForeground}" />

</Style>

</ResourceDictionary>

I hope this helps.

Regards,
Ross
the Telerik team

answered on 19 Jun 2018, 04:35 PM

For what it's worth (I know very few even use Silverlight anymore, but maybe it will be of benefit to someone),

This worked for me:

foreach (GridViewHeaderCell hc in grid.ChildrenOfType<GridViewHeaderCell>())

{

var popup = hc.FindChildByType<Popup>();

var filteringControl = (popup.Child as ContentControl).Content as Telerik.Windows.Controls.GridView.FilteringControl;

filteringControl.MaxWidth = 250;

filteringControl.MinWidth = 250;

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How to fix filter dropdown width?

24 Answers, 1 is accepted