Change Filter Icon to be bigger or a more obvious color when column is filtered

4 posts, 1 answers
  1. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 10 Feb 2012 Link to this post

    Hi,

    I am currently using the Telerik Metro Theme for my RadGridView. Unfortunately, it is not obvious to my users when the column is filtered since the colors are muted/similar. Is there a way to change only the filter icon color or make the icon bigger when the filter is applied to that column?

    Thanks,
    Bryce
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 14 Feb 2012 Link to this post

    Hi Bryce,


     
    You may predefine the template of FilteringDropDown using Expression Blend to achieve your goal. Modify the brushes they used and the Path elements in the way you need.
    The snippet below is the full template of FilteringDropDown in Metro theme:


    <telerik:MetroColors x:Key="MetroColors"/>
        <SolidColorBrush x:Key="StrongBrush" telerik:MetroColors.Color="Strong" />
    <SolidColorBrush x:Key="AccentBrush" telerik:MetroColors.Color="Accent" />
     
         
     
        <ControlTemplate TargetType="grid:FilteringDropDown" x:Key="DistinctFilterControlTemplate">
            <Grid>
                <ToggleButton x:Name="PART_DropDownButton">
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <ContentPresenter />
                        </ControlTemplate>
                    </ToggleButton.Template>
     
                        <Border Cursor="Hand" Width="22" Height="22" Background="Transparent">
                            <Grid Width="12" Height="13">
                            <Path Data="M0.93340254,0 L4.934082,0 L6.934082,0 L10.93358,0 C11.996876,0 12.199773,0.75 11.668063,1.359375 L8.4335356,5.5 C8.100522,5.8975558 7.983531,6.062263 7.9429321,6.2736206 L7.934082,6.3298788 L7.934082,10.332101 C7.934082,10.332101 3.9340818,14.997499 3.9340818,14.997499 L3.9340818,6.3293748 L3.9286206,6.3012671 C3.8825667,6.1045012 3.751812,5.9296875 3.3865709,5.5 L0.24589038,1.40625 C-0.2067349,0.84375 -0.066181421,1.2241071E-16 0.93340254,0 z" Fill="{StaticResource StrongBrush}"  Stretch="Fill" Margin="2,1,2,2" Width="8" Height="11"/>
                            <Path Data="M0.93340254,0 L4.934082,0 L6.934082,0 L10.93358,0 C11.996876,0 12.199773,0.75 11.668063,1.359375 L8.4335356,5.5 C8.100522,5.8975558 7.983531,6.062263 7.9429321,6.2736206 L7.934082,6.3298788 L7.934082,10.332101 C7.934082,10.332101 3.9340818,14.997499 3.9340818,14.997499 L3.9340818,6.3293748 L3.9286206,6.3012671 C3.8825667,6.1045012 3.751812,5.9296875 3.3865709,5.5 L0.24589038,1.40625 C-0.2067349,0.84375 -0.066181421,1.2241071E-16 0.93340254,0 z" Fill="{StaticResource AccentBrush}" Width="8" Height="11" Visibility="{TemplateBinding FunnelFillVisibility}"  Margin="2,1,2,2" Stretch="Fill"/>
                            </Grid>
                        </Border>
     
                </ToggleButton>
     
                <Popup x:Name="PART_DropDownPopup">
                     
                </Popup>
     
            </Grid>
        </ControlTemplate>
     
        <Style TargetType="grid:FilteringDropDown"
             >
            <Setter Property="Template" Value="{StaticResource DistinctFilterControlTemplate}"/>
        </Style>
        



    Kind regards,
    Vanya Pavlova
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Bryce
    Bryce avatar
    32 posts
    Member since:
    Aug 2010

    Posted 16 Feb 2012 Link to this post

    Hi,

    So I added this in to my solution but it does not change anything unless I remove the metro theme. I went into Blend and styled a radgridview, then styled the gridviewheadercell, then applied this template to the filterdropdown. When I did this the metro theme for the RadGridView went back to OfficeBlack. Not sure how to keep it metro but just add in the FilteringDropDown menu template. 

    Thanks,
    Bryce
  4. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 17 Feb 2012 Link to this post

    Hello Bryce,

     


    You should remove the telerik:StyleManager.Theme="{StaticResource Theme}" markup from the FilteringDropDown template within GridViewHeaderCell and apply your own Metro style.
    I am attaching you sample application which demonstrates how this can be achieved. 





    All the best,
    Vanya Pavlova
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top