select

Grid / Filter Templates

Rate this demo:
Feedback
Run example in: C# VB.NET Change Skin:
Vista
  • BlackBlack
  • DefaultDefault
  • ForestForest
  • HayHay
  • Office2007Office2007
  • OutlookOutlook
  • SimpleSimple
  • SitefinitySitefinity
  • SunsetSunset
  • TelerikTelerik
  • VistaVista
  • Web20Web20
  • WebBlueWebBlue
  • Windows7Windows7
Enter filter criteria by choosing an option in one of the comboboxes - a particular value or 'All' to clear the filter for the given column
Contact nameContact titleCityCountryBool
 
select
select
select
select
12345678910...
Page size:
select
 91 items in 13 pages
Maria AndersSales RepresentativeBerlin Germany
Ana TrujilloOwnerMéxico D.F. Mexico
Antonio MorenoOwnerMéxico D.F. Mexico
Thomas HardySales RepresentativeLondon UK
Christina BerglundOrder AdministratorLuleå Sweden
Hanna MoosSales RepresentativeMannheim Germany
Frédérique CiteauxMarketing ManagerStrasbourg France

Enter filter criteria by choosing date range, a particular date or designating a range by dragging the slider handles in the last column
OrderIDOrder dateShipped dateFreight
Clear filters From
Open the calendar popup.
to
Open the calendar popup.
Open the calendar popup.
$0
$1010
Showing range between: $0 and $1010
12345678910...
Page size:
select
 830 items in 119 pages
10248Thursday, July 04, 19967/16/1996$32.38
10249Friday, July 05, 19967/10/1996$11.61
10250Monday, July 08, 19967/12/1996$65.83
10251Monday, July 08, 19967/15/1996$41.34
10252Tuesday, July 09, 19967/11/1996$51.30
10253Wednesday, July 10, 19967/16/1996$58.17
10254Thursday, July 11, 19967/23/1996$22.98

Example Source Code & Description

Instructions
Open in new window
  • In Telerik RadGrid you can enable dropdown filters for GridBoundColumns (or those columns which inherit from GridBoundColumns like GridDateTimeColumn, GridNumericColumn, etc.) and GridTemplateColumns declaratively - just set AllowFilteringByColumn = true for the entire grid and define FilterTemplate for the columns in question.

    In the first grid there are three columns with dropdown filters in their headers - two GridBoundColumns (ContactTitle and City) and one GridTemplateColumn (Country) with text and images in it. Note that the important properties that has to be synchronized are DataField/binding expression for the column and the SelectedValue for the combobox filter (which has to match the CurrentFilterValue of the column). The filtering is triggered intercepting the OnClientSelectedIndexChanged event of RadComboBox and calling the filter(colUniqueName, valueToCompare, filterFunction) client method of the grid.

    In the second grid there are date range, slider range and date filters implemented for three GridBoundColumns. Again the general idea is to utilize the filter(colUniqueName, valueToCompare, filterFunction) client method of the grid by invoking it from the OnDateSelected/OnClientSlideEnd events of the date pickers/slider respectively. You will also need to use server properties to store the selected dates/slider handlers position and restore them when the grid is refreshed.

    See the code under the ASPX/C#/VB.NETtags for further reference.

    And here are some additional helpful resources:
    Filter list options
    Grid known filter functions
    Filter template
    filter method
    Controls - RadGrid - Filtering -> How-to chapter

    Finally, for some swift integration examples with Telerik RadComboBox ("Google suggest" filtering or "Load on demand" grid in combobox) you can visit the links below:
    "Google suggest" filtering
    "Load on demand" grid in combobox
Compatible with ASP.NET 2.0, 3.5 AJAX enabled Accessibility Verified!Valid XHTML 1.1! Optimized for Visual Studio 2005, 2008
Copyright 2002-2010 © Telerik. All right reserved  | 
Telerik Inc., 460 Totten Pond Rd, Suite 640, Waltham, MA 02451

www.telerik.com  |  Terms of Use  |  Contact Us