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

Tab Button Twice In Filter Row

3 Answers 29 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 14 Nov 2018, 11:10 PM

Hi, right now I'm using the WPF GridView, and have the filter row turned on. I've turned off the filtering panel and instead selected a default filter for the user to make it simple. But my problem is that if a user has their cursor in the first filtering textbox and they hit the "tab" button, it selects the next filtering cell, rather than the next filtering textbox. They're essentially having to press tab twice to move from filter textbox to filter textbox.

 

I saw the "TabStopMode="Skip"" but that seems to only apply to the actual cells of the gridview, not the filter row. So how do I prevent having to double tab in the filter row?

3 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 19 Nov 2018, 04:20 PM
Hello Jason,

May I ask you some questions in order to better assist you? Can you let me know what you mean by "I've turned off the filtering panel"? Have you made any modifications to the FieldFilterControl's ControlTemplate? If so, may I ask you to share them so that I can better understand the described scenario?

As for the TabStopMode, indeed this is a property of the column and is applied to the GridViewCell elements. However, the GridView FieldFilterControl which is responsible for filtering when the FilteringMode is FilterRow, is inside the GridViewHeaderCell element.

I am looking forward to your reply.

Regards,
Vladimir Stoyanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jason
Top achievements
Rank 1
answered on 19 Nov 2018, 04:32 PM
Hi, yes, I did modify the field filter control template as such:

<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="*"/>
                       <!--<ColumnDefinition Width="Auto"/>-->
                   </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}"/>

 

I also, interrupted the EditorCreatedEvent to hide the "Match Case" button, and the FilterOperatorsLoadingEvent to set default filter values:

        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)
            {
                stringFilterEditor.MatchCaseVisibility = Visibility.Collapsed;
                //stringFilterEditor.
                //stringFilterEditor.Loaded += new RoutedEventHandler(stringFilterEditor_Loaded);
                stringFilterEditor.Loaded += (s1, e1) =>
                {
                    var textBox = e.Editor.ChildrenOfType<TextBox>().Single();
                    textBox.BorderBrush = Brushes.Transparent;
                    //textBox.Margin = new Thickness(0, 0, 5, 0);
                    textBox.MinWidth = 0;
                     
                    textBox.TextChanged += (s2, e2) =>
                    {                     
                        textBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
                        textBox.Focus();
                    };
                };
            }
        }
 
((Telerik.Windows.Controls.Filtering.Editors.StringFilterEditor)sender).ChildrenOfType<System.Windows.Controls.Primitives.ButtonBase>().ToArray()[1].Visibility = Visibility.Collapsed;
        //}
        private void OnRadGridViewFilterOperatorsLoading(object sender, Telerik.Windows.Controls.GridView.FilterOperatorsLoadingEventArgs e)
        {
            if(e.Column.UniqueName.Contains("Type"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("Buildup"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("FireRatingRef"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("FireRating"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("STCRef"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("STC"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.IsGreaterThanOrEqualTo;
            else if (e.Column.UniqueName.Contains("Notes"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.Contains;
            else if (e.Column.UniqueName.Contains("AuditResult"))
                    e.DefaultOperator1 = Telerik.Windows.Data.FilterOperator.IsEqualTo;
 
        }

 

The end result of all of this is that I end up with a gridview, with text filter boxes, that provide a highly simplified interface with "filter as you type" like the attached image. The problem is just that hitting tab once tabs to the next header cell, and the second tab gets you into the next filter textbox, whereas I want to skip tab selecting the cell and go straight into the next filtering box:




0
Vladimir Stoyanov
Telerik team
answered on 22 Nov 2018, 09:23 AM
Hello Jason,

Thank you for the detailed information. It was very helpful in understanding the exact scenario.

I believe you should be able to achieve what you are going for by setting the IsTabStop property of the ContentControl inside the ControlTemplate of the FieldFilterControl to False. I am attaching a sample project which I prepared to demonstrate this for your reference. 

I hope this helps.

Regards,
Vladimir Stoyanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Jason
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Jason
Top achievements
Rank 1
Share this question
or