[Solved] Gridview filter inputbox styling

[Fredrik]

Hello, I am working on a project where i use the radgridview control
since my project require alot of custom styling i have imported the Telerik.Windows.Controls.GridView.xaml from the windows8 theme into my project. but i have problems styling the inputboxes and match case button on the filter control.
i have managed to in the style PART_Filter1ContentControl and PART_Filter2ContentControl
which are two contentcontrols, i guess there is some radinput control that i need to import the style files into my project, but i cant figure out which one

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

            <Border BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    Margin="{TemplateBinding Margin}"
                    BorderBrush="{TemplateBinding BorderBrush}">
                <Border.Effect>
                    <DropShadowEffect Opacity="0.3"
                                      BlurRadius="10"
                                      ShadowDepth="3"
                                      Direction="270" />
                </Border.Effect>
                    <StackPanel MinWidth="254"
                                MaxHeight="584"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                        <StackPanel x:Name="PART_DistinctFilter"
                                    Visibility="{TemplateBinding DistinctFiltersVisibility}">
                            <CheckBox x:Name="PART_SelectAllCheckBox"
                                      Margin="2,6,0,8"
                                      IsChecked="{Binding SelectAll, Mode=TwoWay}"
                                      Content="{Binding LocalizedStrings.view_gridview_velgalle, Source={StaticResource LocalizedStrings}}"
                                      telerik:StyleManager.Theme="{StaticResource Theme}" />
                            <ListBox x:Name="PART_DistinctValuesList" MaxWidth="797"
                                     ItemsSource="{Binding DistinctValues}"
                                     Style="{StaticResource GridviewListboxStyle}"
                                     ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                     BorderThickness="0"
                                     ItemContainerStyle="{StaticResource DistinctValueListBoxItemStyle}"
                                     SelectionMode="Multiple">
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel  MaxHeight="246" />
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                    <CheckBox x:Name="FunnelCheck" IsChecked="{Binding IsActive, Mode=TwoWay}"
                                                  Content="{Binding ConvertedValue, Converter={StaticResource DistinctValueConverter}}"
                                                  VerticalContentAlignment="Center" Margin="-1,0,0,0"
                                                  telerik:StyleManager.Theme="{StaticResource Theme}">

                                    </CheckBox>
                                </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                        <StackPanel Visibility="{TemplateBinding FieldFiltersVisibility}" Margin="0,0,12,0">
                        <TextBlock Margin="0,6,65,6" Style="{StaticResource TextBlockStyle_PageSubHeaderSecondary}"
                                       Text="{Binding LocalizedStrings.view_gridview_visrader, Source={StaticResource LocalizedStrings}}" />
                            <input:RadComboBox x:Name="PART_Filter1ComboBox"
                                               ItemTemplate="{StaticResource ActionTemplate}"
                                               telerik:StyleManager.Theme="{StaticResource Theme}"
                                               ItemsSource="{Binding AvailableActions}"
                                               SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />
                            <ContentControl x:Name="PART_Filter1ContentControl"
                                            DataContext="{Binding Filter1}"
                                            Margin="0,3,0,3"
                                            Background="{Binding DataContext.Background,ElementName=LayoutRoot}"
                                            IsEnabled="{Binding Operator, Converter={StaticResource FilterOperatorToFilterEditorIsEnabledConverter}}"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch" />
                            <input:RadComboBox x:Name="PART_LogicalOperatorsComboBox"

                                telerik:StyleManager.Theme="{StaticResource Theme}"
                                ItemTemplate="{StaticResource LogicalOperatorTemplate}"
                                Margin="0,3,0,3"
                                ItemsSource="{Binding LogicalOperators}"
                                SelectedItem="{Binding FieldFilterLogicalOperator, Mode=TwoWay}" />
                            <input:RadComboBox x:Name="PART_Filter2ComboBox"

                             telerik:StyleManager.Theme="{StaticResource Theme}"
                             ItemTemplate="{StaticResource ActionTemplate}"
                             Margin="0,3,0,3"
                             ItemsSource="{Binding AvailableActions}"
                             SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />
                            <ContentControl x:Name="PART_Filter2ContentControl"
                                            Margin="0,3,0,3"
                                            Background="{Binding DataContext.Background,ElementName=LayoutRoot}"
                                            DataContext="{Binding Filter2}"
                                            IsEnabled="{Binding Operator, Converter={StaticResource FilterOperatorToFilterEditorIsEnabledConverter}}"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch" />
                        </StackPanel>
                        <Grid Margin="0,0,12,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                        <Button Grid.Column="0" x:Name="PART_ApplyFilterButton" Margin="0,12,90,0" HorizontalAlignment="Right"  VerticalAlignment="Center"  Style="{StaticResource ParkaRoundImageButtonStyleSmallWithText}" >
                            <Grid Height="50">
                                <sdk:DataGrid Style="{StaticResource IconRoundFilterAdd}" VerticalAlignment="Top"></sdk:DataGrid>
                                <TextBlock Text="{Binding LocalizedStrings.view_gridview_filteradd, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Style="{StaticResource TextBlockStyle_Control}" />
                            </Grid>
                        </Button>

                        <Button Grid.Column="0" x:Name="PART_ClearFilterButton" Margin="0,12,12,0"  HorizontalAlignment="Right"  VerticalAlignment="Center"  Style="{StaticResource ParkaRoundImageButtonStyleSmallWithText}" >
                            <Grid Height="50">
                                <sdk:DataGrid Style="{StaticResource IconRoundFilterRemove}" VerticalAlignment="Top"></sdk:DataGrid>
                                <TextBlock Text="{Binding LocalizedStrings.view_gridview_tomfilter, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Style="{StaticResource TextBlockStyle_Control}" />
                            </Grid>
                        </Button>

                        </Grid>
                    </StackPanel>
        </Border>
        </Grid>
    </ControlTemplate>

[Yoan]

Hi Fredrik,

Indeed, the ContentControls are simple placeholders. They are empty and their purpose is to host the correct editor which will be decided at runtime when the data type of the column is known.

The stock editor that will be displayed depends on the data type of the column.

For string columns this is the StringFilterEditor control.
For date columns this is a RadDateTimePicker control.
For other types it is a plain TextBox.

You can check this help article, where you can find information about how to style the StringFilterEditor control. For your convenience, I have prepared a sample project that meets your requirements.

I hope this information helps.

Greetings,
Yoan
the Telerik team

[Fredrik]

Thank you very much, that was exactly what i needed!

one quick question on the same subject:
I use the GridViewDataColumns on my radgridview to display data, and when the DatamemberBinding is a bool it display a checkbox which is great, but how do i style this checkbox?

[Yoan]

Hello Fredrik,


Here are the four different scenarios that you can ever get:

- String: StringFilterEditor -- basically this is a TextBox + ToggleButton wrapped in a control.

- DateTime: RadDateTimePicker

- Boolean: Nothing, since you will have True and False filter operators in the filtering control and you do not need to enter anything, i.e. you don't need an editor.

- Everything Else (including all numeric types): plain old standard TextBox. The string typed by the user will be converted to the target type using the standard .NET type conversion. In other words, .NET knows how to convert the string "2" to the integer 2.

In your case, you can style the CheckBox which is in the ListBox with name - PART_DistinctValuesList. Please check the following code snippet for a reference:

<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" />
            <ListBox x:Name="PART_DistinctValuesList" ItemsSource="{Binding DistinctValues}" MaxWidth="351" ScrollViewer.HorizontalScrollBarVisibility="Auto" FontSize="{Binding Path=FontSize,RelativeSource={RelativeSource FindAncestor, AncestorLevel=2, AncestorType=controls:RadGridView}}" ItemContainerStyle="{StaticResource DistinctValueListBoxItemStyle}" SelectionMode="Multiple">
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <VirtualizingStackPanel MaxHeight="242" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
              <ListBox.ItemTemplate>
                <DataTemplate>
                  <CheckBox  IsChecked="{Binding IsActive, Mode=TwoWay}" Content="{Binding ConvertedValue, Converter={StaticResource DistinctValueConverter}}" VerticalContentAlignment="Center" />
                </DataTemplate>
              </ListBox.ItemTemplate>
            </ListBox>
          </StackPanel>

I hope this is what you need.

 


Kind regards,
Yoan
the Telerik team

[Fredrik]

Hello am not talking about the filtercontrol, am talking about the GridViewDataColumns on the radgridview.
if one is bound to a bool it will display a checkbox on the grid to indicate true or false, and my question is:
how to i style this checkbox

[Yoan]

Hi Fredrik,

Please  excuse me for the misunderstanding. 

Indeed, GridViewDataColumn creates CheckBox editors for its cells, when it's bound to a boolean type property. To change the style of the editor you could create a style similar to this one:

<Style x:Key="checkboxStyle"  TargetType="CheckBox">
                <Setter Property="Background" Value="Red"/>
</Style>

 
And then use this style as an EditorStyle for the GridViewDataColumn.


Kind regards,
Yoan
the Telerik team

[Fredrik]

Hello it works during edit.
but the column in question is a readonly, how do i apply the style when not in edit modus?

regards

[Yoan]

Hello Fredrik,

I have updated the sample project from my previous reply. I believe now it meets your requirements.

All the best,
Yoan
the Telerik team

[Fredrik]

Hello!
thank you that worked.

So to the very last problem =)
back to the Filtercontroll now (inputfield), as you said when its not a date or a string. for instance a number.
it should display a normal textbox, but for some reason it dosnt use my default textbox style but rather the telrik one.
so question is, how do i style the "normal textbox"

[Yoan]

Hi Fredrik,

Since the created editor will be inserted as the Content of the PART_FilterEditorContentControl, you can attach to the FieldFilterEditorCreated event and apply the respective style to the respective editor. In your case the editor is a plain TextBox and you can change its Background like so:

private void clubsGrid_FieldFilterEditorCreated(object sender, Telerik.Windows.Controls.GridView.EditorCreatedEventArgs e)
        {
            if (e.Column.UniqueName == "StadiumCapacity")
            {
                TextBox txtBox = e.Editor as TextBox;
                if (txtBox != null)
                {
                    txtBox.Background = new SolidColorBrush(Colors.Yellow);
                }
            }
        }

All the best,
Yoan
the Telerik team

[Fredrik]

Hello your sollution with style change on events is not very appealing in my mvvm world =(
Is there any other way of doing this?

[Yoan]

Hello Fredrik,

Indeed, if you want to have your code-behind clean, the way to go is with an Attached behavior. Here you can find information about it. You will write the attached behavior only once. This attached behavior will attach to the event and style the TextBox. Then you can enable this attached behavior on a RadGridView and it will start styling its TextBoxes. 

Here is a very nice article about event handling with attached behaviors. You have the code in one place only. All you will need to do is something like this:

<RadGridView EnableMyStylingBehavior="True"/> and then let the attached behavior kick in and do its job.

I hope this information helps.

Regards,
Yoan
the Telerik team

[Fredrik]

that was more like it =)
got it to work with a behaviour:

public class GridViewBehaviour : Behavior<RadGridView>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.FieldFilterEditorCreated += UpdateBinding;
    }
    private void UpdateBinding(object sender, Telerik.Windows.Controls.GridView.EditorCreatedEventArgs e)
    {
        TextBox txtBox = e.Editor as TextBox;
        if (txtBox != null)
        {
            txtBox.Style = (Style)Application.Current.Resources["DefaultTextBoxStyle"];
        }
    }
    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.FieldFilterEditorCreated -= UpdateBinding;
    }

everything should be sorted now regarding the gridview filter controll
thanks for your help

[Yoan]

Hi Fredrik,


Thank you for the update.

I am glad to hear that you have implemented what you needed. 

Please if you face any further difficulties do not hesitate to contact us.

All the best,
Yoan
the Telerik team