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

Global Apply Filter Button

4 Answers 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Veronique
Top achievements
Rank 1
Veronique asked on 02 May 2014, 01:59 PM
My grid binds to a huge set of data. 
For performance reasons, we decided to request only visible elements from SQL server. 
Therefore, we need to filter server side.

The filter icon has to be hidden so we are currently setting AutoPostBackOnFilter to true.
Clients are not happy with this solution because of the flickering.
They want to enter all their filter criteria in each column, then hit an Apply Filter button.

I have a screenshot showing what they want.
I tested many solutions, but none of them were satisfying.  Is there an easy way to do it ?

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 05 May 2014, 06:57 AM
Hi Veronique,

A suggestion is that you can use RadFilter to achieve your requirement. Please take a look at this demo for more idea on its working - RadGrid filtering with RadFilter.
Please try and let me know if you need any help.

Thanks,
Princy
0
Veronique
Top achievements
Rank 1
answered on 05 May 2014, 12:25 PM
Well, this is not exactly what we are looking for.
The RadFilter is not easy or quick enough for our users.
The UI I attached in my first post is a requirement.
0
Princy
Top achievements
Rank 1
answered on 06 May 2014, 10:17 AM
Hi Veronique,

Please take a sample code snippet. I have tried to filter individual columns as well as combination of columns. Please try and let me know if any concern.

ASPX:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"    AllowPaging="true" AllowSorting="true" EnableLinqExpressions="false" AllowFilteringByColumn="true" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView DataKeyNames="OrderID" CommandItemDisplay="Top">       
        <CommandItemTemplate>
         <asp:Button ID="btnFilter" runat="server" Text="Apply Filter" CommandName="FilterAll" />
         <asp:Button ID="btnClear" runat="server" Text="Clear Filter" CommandName="ClearFilter" OnClientClick="clearFilter" />
        </CommandItemTemplate>
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" ShowFilterIcon="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" ShowFilterIcon="false" />
            <telerik:GridBoundColumn DataField="ShipVia" HeaderText="ShipVia" UniqueName="ShipVia" ShowFilterIcon="false" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    string filterExpression = string.Empty;
    if (e.CommandName == "FilterAll")
    {
        GridFilteringItem filterItem = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem;
        foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
        {
            TextBox txtfilter = (TextBox)filterItem[col.UniqueName].Controls[0];
            string value = txtfilter.Text;
            if (value != "")
            {
                filterExpression += "(" + col.UniqueName + " = '" + value + "')";
                filterExpression += "AND";
                string newfilterString = filterExpression.Remove(filterExpression.Length - 3);
                RadGrid1.MasterTableView.FilterExpression = newfilterString;
                GridColumn column = RadGrid1.MasterTableView.GetColumnSafe(col.UniqueName);
                column.CurrentFilterValue = value;
            }
        }
        RadGrid1.MasterTableView.Rebind();
    }
}

JS:
<script type="text/javascript">
    function clearFilter() {
        var grid = $find("<%= RadGrid1%>")
        var tableView = grid.get_masterTableView();
        tableView.get_filterExpressions().clear();
        tableView.rebind()
    }
</script>

Thanks,
Princy
0
Veronique
Top achievements
Rank 1
answered on 06 May 2014, 11:47 AM
Yes it's working.  Thanks.
Tags
Grid
Asked by
Veronique
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Veronique
Top achievements
Rank 1
Share this question
or