Grid Filter Menu CSS Class?

8 posts, 0 answers
  1. John Bernard
    John Bernard avatar
    5 posts
    Member since:
    Dec 2006

    Posted 16 Mar 2007 Link to this post

    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:
    <FilterMenu cssclass="GridFilterRow_Telerik"></FilterMenu>

    I would rather not do this though and would hope that simply pointing to the skin in the Grid header would take care of everything.  Please advise.
    Thank you.
  2. Per Holmqvist
    Per Holmqvist avatar
    194 posts
    Member since:
    Nov 2002

    Posted 19 Mar 2007 Link to this post

    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?

  3. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 20 Mar 2007 Link to this post

    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
  4. John Bernard
    John Bernard avatar
    5 posts
    Member since:
    Dec 2006

    Posted 22 Mar 2007 Link to this post

    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!
  5. Zhivko Dimitrov
    Admin
    Zhivko Dimitrov avatar
    73 posts

    Posted 23 Mar 2007 Link to this post

    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
  6. John Bernard
    John Bernard avatar
    5 posts
    Member since:
    Dec 2006

    Posted 23 Mar 2007 Link to this post

    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.
  7. Johan
    Johan avatar
    617 posts
    Member since:
    Mar 2007

    Posted 23 Mar 2007 Link to this post

    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>
        ...


  8. John Bernard
    John Bernard avatar
    5 posts
    Member since:
    Dec 2006

    Posted 23 Mar 2007 Link to this post

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