FilterStyle-CssClass??

[Lou]

I have a radGrid using ​

FooterStyle-CssClass="preOwnedTierColumn" HeaderStyle-CssClass="preOwnedTierColumn" ItemStyle-CssClass="preOwnedTierColumn"

I am build a responsive design web site. With media queries to hide columns for a certain screen width. In this case I have a css class called 'preOwnedTierColumn' in which I set to display:none when the screen is less than x px.

This all works fine for the header, item and footer, but there is no FilterStyle-CssClass available. I cannot seem to be able to assign the filter template a class or and ID to apply the css rules.

I tried wrapping the content of the filter template in a div with the class of 'preOwnedTierColumn', but this only resulted in the contents not being visible, there is still a TD that is generated and takes on the width of the column in the item, I need the whole TD to be invisible.

<FilterTemplate>
   <div class="preOwnedTierColumn">
      <telerik:RadComboBox ID="RadComboBoxPreOwnedTier" CssClass="preOwnedTierColumn" runat="server" EnableScreenBoundaryDetection="false" ExpandDirection="Down" AppendDataBoundItems="true" DataSourceID="PreOwnedTierDataSource" DataTextField="Pre-Owned Tier" DataValueField="Pre-Owned Tier" DropDownAutoWidth="Enabled" MarkFirstMatch="true" AutoPostBack="true" OnSelectedIndexChanged="RadComboBoxPreOwnedTier_SelectedIndexChanged" SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("PreOwnedTier").CurrentFilterValue%>' Sort="Ascending" SortCaseSensitive="False" Width="78px">
  <Items>
    <telerik:RadComboBoxItem Text="All" />
   </Items>
</telerik:RadComboBox>
   <div style="height: 35px; margin-top: 10px;"> </div>
   </div>
</FilterTemplate>

Any thoughts on how I can apply a css style to a filterTemplate?

[Princy]

Hi Lou,

You can access the filter style from the server side as follows:

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
 if (e.Item is GridFilteringItem)
  {
    GridFilteringItem filterItem = (GridFilteringItem)e.Item;
    filterItem["ColumnUniqueName"].CssClass = "CSSClassName";
  }
}

Thanks,
Princy

[Lou]

Hi Princy

Thank you, I have not yet tried your approach, because I figured out how to do it using css 

I used the following:

@media only screen and (max-width: 815px) {

    /*Homepage*/

    #home-links p {
        padding: 0;
    }

    .preOwnedTierColumn {
        display: none;
    }

    .rgMasterTable td:nth-child(3) {
        display: none;
    }
}

 
However I feel like your solution would work better across all browsers. 

Thanks