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

Font color for selected filter function

6 Answers 168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shane
Top achievements
Rank 1
Shane asked on 14 Feb 2013, 10:27 PM
Hey guys,
Hopefully this will be an easy one for you guys; but it has me stumped. I have a RadGrid with FilterByColumn in the command bar. The filtering works as expected, functionally But when I select a filter function from the drop down menu and then re-open the drop down the font color is blacked out. When I hover over a menu item the background turns black and the font turns white; so that works. But once the item is selected the background turns black but the font stays black. I've been trying to find the css class that controls the selected menu item in the grid filter but so far no luck. This happens on every RadGrid in the application, so it needs to be fixed in the css. It also happens in any browser, so it's not a browser issue. If you guys can tell me where to look for the css class to set the font color for selected filter functions in a rad grid I would really appreciate it.

Thanks,
Shane

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 15 Feb 2013, 04:17 AM
Hi,

Please try the following CSS to style the selected filter function.

CSS:
<style type="text/css">
    .RadMenu_SkinName .rmGroup a.rmFocused .rmText, ..RadMenu_SkinName  .rmGroup a.rmSelected .rmText, ..RadMenu_SkinName  .rmGroup a.rmExpanded .rmText
    {     
        color: Red !important;
        font-weight: bold !important;
    }
</style>

Thanks,
Shinu.
0
Shane
Top achievements
Rank 1
answered on 15 Feb 2013, 03:51 PM
Thanks Shinu, but it didn't work. It made no difference at all. I would also like to put this in the css file so that it would apply to all the grids in the application. If I put it in just the page it's going to take a year to get it into all the pages; this applicaiton is massive.
0
Shane
Top achievements
Rank 1
answered on 19 Feb 2013, 12:07 AM
Here's what I'm seeing in the css file for the RadMenu that controls the colors of the filter menu. I see the typical item, the hover, but not selected. Maybe this will help someone find the solution; but it hasn't really pointed it out to me yet.

DIV.RadMenu_TempoTest .rmGroup .rmItem .rmLink .rmText {
    /*BACKGROUND-IMAGE: none;*/
    /*PADDING-LEFT: 10px;*/
    COLOR: #333333;}
 
 
 DIV.RadMenu_TempoTest .rmGroup .rmItem .rmLink:hover .rmText {
    COLOR: #FFFFFF;}
0
Ivan Zhekov
Telerik team
answered on 20 Feb 2013, 12:11 PM
Hi, Shane.

The thing is that in this particular scenario, the menu (filter menu) is not fit for the task: you need to have the selected state persisted (as in one item selected within a group of items), but the menu does not work like that. In fact it has only one selected state for the entire menu.

Perhaps it would be nice to extend the menu to allow types e.g. single choice / multiple choice

Regards,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Shane
Top achievements
Rank 1
answered on 20 Feb 2013, 01:42 PM
So are you saying that it is not currently possible to do this? I find that hard to believe since the selected item background-color is set to black in the filter menu. It seems logical that if I could find the class that does this I could simply add "color: #FFFFFF !important;" to that class and it would resolve the issue. But what I gather from your reply is that this isn't possible with the current RadMenu class.
0
Ivan Zhekov
Telerik team
answered on 25 Feb 2013, 12:12 PM
Shane,

I think we weren't exactly on the same page. I will first explain a bit about the menu and then address your question.

Currently, the menu items receive class names based on their state: Clicked, Selected, Focused, Expanded and so on. (Note the class names are prefixed with rm e.g. rmClicked, rmSelected etc)

With the menu being a command interface widget (optionally a navigation widget) it can have only one selected state e.g. the item currently being pressed; only one focused state e.g. the item currently accepting actions (say from keyboard navigation) and so on.

While the difference between selected and focused state is subtle (in terms of control ideology), there is not difference in appearance. I guess that was our first wrong page.

Usually, when an item is clicked upon and in terms action is triggered that would be the selected item. Yet, in the case of the grid filter menu, that is the focused item.

So to sum up, the styles you need target the focused style e.g.

html .RadMenu_Default_Context .rmGroup a.rmFocused {
    color: red;
}

(assuming you are using the default skin)

I say "assuming", because from your snippet I judge you are using a custom skin. As of now, I can't tell the exact properties you need you need to set without seeing the skin. Also, it might be necessary to modify the snippet a bit to fit your case. (Say if you have different normal styles).

In addition, you might check the Understanding the Skin CSS File help article (http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-file.html).

Regards,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Shane
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Shane
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or