Responsive RadGrid With Filters

[Lynn]

I am trying to implement a radgrid that is responsive to media queries and have followed the advice in this forum entry:
http://www.telerik.com/community/forums/aspnet-ajax/grid/responsive-design.aspx

This contains a great suggestion that works great...except when you have a filter row as well.  When I use the css suggestion in the forum entry above, the filter cell for any undisplayed columns remains.  Is there any way I can change the class of the filter cell so that it does not show either?

I have included a screen capture showing what happens and what I am trying to fix.

I should also add that I can hide the entire filter row using the css code shown in the snippet below, but I would really like to hide individual column filters as opposed to the entire row.

Thanks in advance to anyone who can help!

Lynn

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

    .rgFilterRow { display: none !important; }

[Princy]

Hi Lynn,

Try setting CssClass for the individual column filters in ItemDataBound event and hide it inside the Media query as shown below.

ASPX:

<telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" CssClass="RadGrid1" OnNeedDataSource="RadGrid_NeedDataSource"
    AllowFilteringByColumn="true" ShowFooter="false" PageSize="20" AllowPaging="True"
    Height="500px" runat="server" Width="100%" OnItemDataBound="RadGrid1_ItemDataBound">
    <HeaderStyle Width="200px" />
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridBoundColumn HeaderText="Address2" DataField="Address2">
                <HeaderStyle CssClass="additionalColumn" />
                <ItemStyle CssClass="additionalColumn" />
            </telerik:GridBoundColumn>
            <telerik:GridNumericColumn DataField="Custom1" HeaderText="Custom Custom1">
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Custom2" HeaderText="Custom Custom2">
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Custom3" HeaderText="Custom Custom3">
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Custom4" HeaderText="Custom Custom4">
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Custom5" HeaderText="Custom Custom5">
            </telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Custom6" HeaderText="Custom Custom6">
            </telerik:GridNumericColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

C#:

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int rowsNum = 130;
    string[][] colsInfo = {
    new string[] { "Address2", "string" },
    new string[] { "Custom1", "string" },
    new string[] { "Custom2", "string" },
    new string[] { "Custom3", "string" },
    new string[] { "Custom4", "string" },
    new string[] { "Custom5", "string" },
    new string[] { "Custom6", "string" },
    new string[] { "Custom7", "string" },
    new string[] { "Custom8", "string" },
    new string[] { "Custom9", "string" },
};

    for (int i = 0; i < colsInfo.Length; i++)
    {
        switch (colsInfo[i][1])
        {
            case "string":
                dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(String)));
                break;
            case "number":
                dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Int32)));
                break;
            case "date":
                dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(DateTime)));
                break;
            case "bool":
                dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Boolean)));
                break;
            default:
                break;
        }
    }

    for (int j = -10; j <= rowsNum; j++)
    {
        dr = dt.NewRow();

        for (int k = 0; k < colsInfo.Length; k++)
        {
            switch (colsInfo[k][1])
            {
                case "string":
                    dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j);
                    break;
                case "number":
                    dr[colsInfo[k][0]] = j;
                    break;
                case "date":
                    dr[colsInfo[k][0]] = DateTime.Now;
                    break;
                case "bool":
                    dr[colsInfo[k][0]] = j % 2 == 1 ? true : false;
                    break;
                default:
                    break;
            }
        }
        dt.Rows.Add(dr);
    }

    (sender as RadGrid).DataSource = dt;
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem Filter = (GridFilteringItem)e.Item;
        Filter["Address2"].CssClass = "Filter";
    }
}

CSS:

<style type="text/css">
    @media only screen and (min-width: 480px) and (max-width: 767px)
    {
        .additionalColumn
        {
            display: none !important;
        }
        .Filter
        {
            display: none !important;
        }
    }
</style>

Thanks,
Princy.

[Lynn]

Princy,

Thanks bunches!  This works perfectly and the resulting grid is now almost perfectly responsive (I just have too much stuff in the pager components being displayed and need to reduce the pager components).

Thanks again!

Lynn