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

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

3 Answers 316 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Bryce
Top achievements
Rank 1
Bryce asked on 10 Feb 2012, 11:42 PM
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

3 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 14 Feb 2012, 02:42 PM
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 >>
0
Bryce
Top achievements
Rank 1
answered on 16 Feb 2012, 11:33 PM
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
0
Accepted
Vanya Pavlova
Telerik team
answered on 17 Feb 2012, 12:51 PM
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 >>
Tags
GridView
Asked by
Bryce
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Bryce
Top achievements
Rank 1
Share this question
or