Global Apply Filter Button

[Veronique]

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 ?

[Princy]

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

[Veronique]

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.

[Princy]

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

[Veronique]

Yes it's working.  Thanks.