Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Enhanced RadGrid Filtering

3 Answers 100 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 14 Feb 2013, 12:33 PM
Hi,

I am trying to implement enhanced filtering as described on this page http://www.telerik.com/help/aspnet-ajax/grid-basic-filtering.html and in this video http://www.telerikwatch.com/2008/09/telerik-watch-minute-enhancing-radgrid.html.

The idea is to allow the user to enter filter expressions like >=27, *ed and <>100 then hit Enter to execute the filter.  My problem is with numeric fields which don't allow non numeric characters to be entered in the filter text box so you can't enter <>= characters.  

I am using version 2011.3.1115.35

I have created a very simple page that demonstrates the problem. (see below) The page has a grid that uses the Products table in the Northwind sql database as a datasource.  Any advice would begreatly appreciated.

Thanks 

Terry

Here is the code for an example page that demonstrates the problem:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Filters1.aspx.vb" Inherits="FramesAndCasesWebApp.Filters1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title>FilterOnEnter</title>
 
    <script type="text/javascript">
        var tableView = null;
        var cancelFilterMenu = false;
 
        function filterOnEnter(sender, e, gridId, columnName) {
 
            //Only filter on Enter (check keyCode)
            if (e.keyCode == 13) {
 
                //Disable filter menu from showing [BROWSER BUG FIX]
                cancelFilterMenu = true;
 
                if (tableView == null)
                    tableView = $find(gridId).get_masterTableView();
 
                //Try to auto set the filter function
                var filter = Telerik.Web.UI.GridFilterFunction.Contains;  //Default
 
                var query = sender.value;
                if (query.endsWith("*") && query.startsWith("*")) {
                    filter = Telerik.Web.UI.GridFilterFunction.Contains;
                    query = query.substr(1, query.length - 2);
                }
                else if (query.startsWith("*")) {
                    filter = Telerik.Web.UI.GridFilterFunction.EndsWith;
                    query = query.substr(1, query.length - 1);
                }
                else if (query.endsWith("*")) {
                    filter = Telerik.Web.UI.GridFilterFunction.StartsWith;
                    query = query.substr(0, query.length - 1);
                }
                else if (query.startsWith("=")) {
                    filter = Telerik.Web.UI.GridFilterFunction.EqualTo;
                    query = query.substr(1, query.length - 1);
                }
                else if (query.startsWith("<>")) {
                    filter = Telerik.Web.UI.GridFilterFunction.NotEqualTo;
                    query = query.substr(2, query.length - 2);
                }
                else if (query.startsWith("<")) {
                    filter = Telerik.Web.UI.GridFilterFunction.LessThan;
                    query = query.substr(1, query.length - 1);
                }
                else if (query.startsWith("<=")) {
                    filter = Telerik.Web.UI.GridFilterFunction.LessThanOrEqualTo;
                    query = query.substr(2, query.length - 2);
                }
                else if (query.startsWith(">")) {
                    filter = Telerik.Web.UI.GridFilterFunction.GreaterThan;
                    query = query.substr(1, query.length - 1);
                }
                else if (query.startsWith(">=")) {
                    filter = Telerik.Web.UI.GridFilterFunction.GreaterThanOrEqualTo;
                    query = query.substr(2, query.length - 2);
                }
 
                var column = tableView.getColumnByUniqueName(columnName);
 
                //Execute filter
                tableView.filter(columnName, query, filter);
            }
        }
 
        //Handle browser inconsistencies that cause
        //the filter menu to be displayed on enter key press
        function filterMenuShowing(menu, args) {
            if (cancelFilterMenu)
                args.set_cancel(true);
 
            cancelFilterMenu = false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>
        <telerik:RadGrid ID="RadGrid1" runat="server"
            AllowFilteringByColumn="true"
            AllowPaging="true"
            AllowSorting="true"
            DataSourceID="SqlDataSource1" EnableLinqExpressions="False">
            <MasterTableView AutoGenerateColumns="True" DataKeyNames="ProductID"
                DataSourceID="SqlDataSource1"/>
 
            <FilterMenu EnableImageSprites="False" OnClientShowing="filterMenuShowing">
            </FilterMenu>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="Data Source=SQL\SQL2008;Initial Catalog=Northwind;Integrated Security=True"
            ProviderName="System.Data.SqlClient"
            SelectCommand="SELECT Products.* FROM Products"></asp:SqlDataSource>
     
    </div>
    </form>
</body>
</html>

and here is the code behind

Imports Telerik.Web.UI
 
Public Class Filters1
    Inherits System.Web.UI.Page
 
    Private Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated
        If TypeOf e.Item Is GridFilteringItem Then
 
            Dim filterItem As GridFilteringItem = e.Item
 
            ' Add client-side event handlers for the filter textbox in each data column
            For Each col As GridColumn In RadGrid1.MasterTableView.RenderColumns
 
                ' Ignore non-data columns
                If col.UniqueName = "ExpandColumn" Or col.UniqueName = "RowIndicator" Then
                    Continue For
                End If
 
                ' Get the column name
                Dim columnName As String = col.UniqueName
 
                ' If this column filter has a textbox ...
                Debug.Print(columnName & ": " & TypeName(filterItem(columnName).Controls(0)))
                If TypeOf filterItem(columnName).Controls(0) Is TextBox Then
                    ' Get a reference to the filter textbox for this column
                    Dim textBox As TextBox = filterItem(columnName).Controls(0)
 
                    If textBox IsNot Nothing Then
                        ' Add the event handler
                        textBox.Attributes.Add("onkeypress", String.Format("filterOnEnter(this, event, ""{0}"", ""{1}"");", RadGrid1.ClientID, columnName))
                    End If
                End If
            Next
        End If
    End Sub
End Class


3 Answers, 1 is accepted

Sort by
0
MasterChiefMasterChef
Top achievements
Rank 2
answered on 14 Feb 2013, 03:24 PM
Hi Terry,

I don't have an answer to solve your problem, I'm just bringing to your attention that if the user enters a number, by default the filter drop-down menu in Telerik's RadGrid should already have fields for scenarios you are trying to implement (such as greater than, less than or equal to, between, etc). Hopefully using these built-in controls will make your project easier to complete!

Good luck,
Master Chief
0
Terry
Top achievements
Rank 1
answered on 14 Feb 2013, 04:06 PM
Thanks Master Chief,  Yes I appreciate that the drop down contains the various filters but the point is to make it quicker and easier for keyboard only operation.

0
Kostadin
Telerik team
answered on 19 Feb 2013, 12:43 PM
GridFilter.zip
Hi Terry,

This is happening because the columns which contain numeric values are represented as GridNumericColumn. In this case the filter textbox does not accept character different from digits. A possible solution is to create your column in the Mark-Up and disable AutoGenerateColumn.
For your convenience I prepared a small sample based on your code and attached it to this forum post. Give it a try and let me know about the result.

All the best,
Kostadin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Terry
Top achievements
Rank 1
Answers by
MasterChiefMasterChef
Top achievements
Rank 2
Terry
Top achievements
Rank 1
Kostadin
Telerik team
Share this question
or