Enhanced RadGrid Filtering

4 posts, 0 answers
  1. Terry
    Terry avatar
    4 posts
    Member since:
    Jul 2011

    Posted 14 Feb 2013 Link to this post


    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.



    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">
        <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)
                cancelFilterMenu = false;
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
            <telerik:RadGrid ID="RadGrid1" runat="server"
                DataSourceID="SqlDataSource1" EnableLinqExpressions="False">
                <MasterTableView AutoGenerateColumns="True" DataKeyNames="ProductID"
                <FilterMenu EnableImageSprites="False" OnClientShowing="filterMenuShowing">
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="Data Source=SQL\SQL2008;Initial Catalog=Northwind;Integrated Security=True"
                SelectCommand="SELECT Products.* FROM Products"></asp:SqlDataSource>

    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
            End If
        End Sub
    End Class

  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    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
  3. Terry
    Terry avatar
    4 posts
    Member since:
    Jul 2011

    Posted 14 Feb 2013 Link to this post

    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.

  4. Kostadin
    Kostadin avatar
    1733 posts

    Posted 19 Feb 2013 Link to this post

    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,
    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.
Back to Top