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

[Solved] Enhanced RadGrid Filtering

3 Answers 181 Views

Grid

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Next

End If

End Sub

End Class

3 Answers, 1 is accepted

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.