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

Responsive RadGrid With Filters

2 Answers 117 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lynn
Top achievements
Rank 2
Lynn asked on 28 Sep 2013, 11:29 PM
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; }

2 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 30 Sep 2013, 05:24 AM
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.
0
Lynn
Top achievements
Rank 2
answered on 02 Oct 2013, 12:46 PM
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
Tags
Grid
Asked by
Lynn
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 1
Lynn
Top achievements
Rank 2
Share this question
or