Grid Filter Menu CSS Class?

[John Bernard]

Hi There -

I am trying to skin the filtering menu on the grid.

According to the documentation, a class exists named ".GridFilterRow_Default" - "For Skinning the FilteringItem".  For some reason this class does not exist in any of the skins (Telerik, Default, Classic)

I have read that I need to apply this code to the grid itself:

[Per Holmqvist]

If you set the grids skin and have the skins folder in the radcontroldirectory you don't nedd to set cssclass.

If you do, please notice that you only write the class and the grid adds she skinname by itself.

<FilterMenu cssclass="GridFilterRow_Telerik"></FilterMenu>
Notice that cssclass only should be GridFilterRow, it is only in the cssfile it is named GridfilterRow_SKINNAME (Here the skinname is Telerik)

If the skin is default it would be in your cssfile GridFilterRow_Default.

Hope this cleared it out for you?

[Dimo]

Hi John,

The filtering menu of the control can be styled through a class assigned through the CssClass property (as you have already found). This topic from the online documentation elaborates on this subject in detail:

http://www.telerik.com/help/aspnet/grid/?grdCustomizingFilteringMenu.html

The GridFilterRow_[SkinName] class from the predefined skins is targeted to define the look and feel of the filter row holding the filter textboxes/images. It is true that this CSS class appears in the HTML by default and you do not need to set it explicitly. There are no extra styles applied to this class in the skin files and that is why it is not listed there. However, you can add custom styles if you want to, by editing the corresponding skin file.

Best regards,

Dimo

the telerik team

www.telerik.com | dnn.telerik.com | www.sitefinity.com

[John Bernard]

Hi There,

Thank you for the information.  I don't understand why the FilterMenu class doesn't exist entirely in the skin file.  Unfortunately, I am working with .NET 1.0 and as such, after reading the article above, would appear as though I will be unable to "skin" the font's, etc., that exist within the filter menu.  I did try creating the FilterMenu_Telerik class in the stylesheet, but had no luck.  Is there any way of making this work with the .NET 1.0 version of the grid?  Am I on the correct path?

Thank you!

[Zhivko Dimitrov]

Hello John Bernard,

You are right, this is a limitation of the grid skins - they contain no built-in styles for the Filter row. We will try to fix this for the next release of the component. Meanwhile, there is a way to fix this manually and you are on the correct path.

Without setting any <FilterMenu cssclass="GridFilterRow_Telerik"></FilterMenu> properties in the aspx, open the css and create a css class GridFilterRow_SKINNAME where SKINNAME is the name of the skin of your grid. This css class will be applied to the filtering row of your grid (the tr element). To have full control over the appearance of the filtering row, you will most probably need to style the columns as well - please create another ".GridFilterRow_SKINNAME td" class to apply styling to the td elements of the filtering row as well.

Regards,
Zhivko Dimitrov
the telerik team

Instantly find answers to your questions at the new telerik Support Center

[John Bernard]

Hi there,

Thank you for your response.   I apologize for continuing this thread as the topic would appear quite clear, however, I added the following class:

.GridFilterRow_Telerik td
{
 font: normal 8pt Verdana, Arial, Sans-serif;
 height: 18px;
 background: green;
}

and the actual filter menu that appears when the filter icon is clicked is uneffected, while the filterrow itself changes to green.

Any help is appreciated.

[Johan]

IMHO, the safest bet is to declare it explicitly in the grid declaration as well, works for me.

<style type="text/css">

// individual filter menu items
.GridFilterRow_Telerik td
{
 font: normal 8pt Verdana, Arial, Sans-serif;
 height: 18px;
 background: green;
}// the whole menu
.GridFilterRow_Telerik table
{
    ..
}
</style>

 <radG:RadGrid ID="RadGrid1"
      AllowFilteringByColumn="true"
      DataSourceID="AccessDataSource1"
      runat="server">
      <FilterMenu CssClass="GridFilterRow_Telerik"></FilterMenu>
    ...

[John Bernard]

That works.  Thank you.  I'll keep an eye on future versions which sound like the class will be intrinsicly referenced.