Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Filter Templates

Contact nameContact titleCityCountryIs Promoted
 
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

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
 707 items in 101 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

  • Top grid:

    • 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.

    Bottom grid:

    • Enter filter criteria by choosing date range, a particular date or designating a range by dragging the slider handles in the last column.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="false" CodeFile="defaultcs.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Programming.FilterTemplate.defaultcs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag ID="Headtag2" runat="server"></telerik:HeadTag>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:Header ID="Header1" runat="server" NavigationLanguage="CS"></telerik:Header>
            <!-- content start -->
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
            <telerik:RadGrid ID="RadGrid1" Width="100%" DataSourceID="SqlDataSource1" AllowFilteringByColumn="True"
                AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
                OnPreRender="RadGrid1_PreRender" ShowStatusBar="true" EnableLinqExpressions="false">
                <MasterTableView DataKeyNames="CustomerID">
                    <Columns>
                        <telerik:GridBoundColumn UniqueName="ContactName" DataField="ContactName" HeaderText="Contact name"
                            AllowFiltering="false" HeaderStyle-Width="200px" />
                        <telerik:GridBoundColumn UniqueName="ContactTitle" DataField="ContactTitle" HeaderText="Contact title"
                            HeaderStyle-Width="200px">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="ContactTitle"
                                    DataValueField="ContactTitle" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ContactTitle").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="TitleIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                                    <script type="text/javascript">
                                        function TitleIndexChanged(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("ContactTitle",args.get_item().get_value(),"EqualTo");
                                            
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City" HeaderStyle-Width="200px">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxCity" DataSourceID="SqlDataSource3" DataTextField="City"
                                    DataValueField="City" Height="100px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("City").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="CityIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

                                    <script type="text/javascript">
                                        function CityIndexChanged(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("City",args.get_item().get_value(),"EqualTo");
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn DataField="Country" HeaderText="Country" UniqueName="Country"
                            HeaderStyle-Width="200px" SortExpression="Country">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxCountry" DataSourceID="SqlDataSource4" DataTextField="Country"
                                    DataValueField="Country" Height="100px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Country").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="CountryIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">

                                    <script type="text/javascript">
                                        function CountryIndexChanged(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("Country",args.get_item().get_value(),"EqualTo");
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                            <ItemTemplate>
                                <img src='Img/<%# Eval("Country") %>.gif' alt="" style="vertical-align: middle; margin-right: 7px;" /><%# Eval("Country") %>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                           <telerik:GridCheckBoxColumn DataField="Bool" DataType="System.Boolean" DefaultInsertValue=""
                        HeaderText="Is Promoted" SortExpression="Bool" UniqueName="Bool">
                     <FilterTemplate>
                            <telerik:RadComboBox ID="ImportedFilter" runat="server" OnClientSelectedIndexChanged="ImportedFilterSelectedIndexChanged"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Bool").CurrentFilterValue %>'
                                Width="70px" DataSourceID="SqlDataSource6" AppendDataBoundItems="true"
                                OnItemDataBound="ImportedFilter_ItemDataBound">
                                <Items>
                                    <telerik:RadComboBoxItem Text="NoFilter" Value="" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock12" runat="server">

                                <script type="text/javascript">
                                    function ImportedFilterSelectedIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        var filterVal = args.get_item().get_value();
                                        if (filterVal == "") {
                                            tableView.filter("Bool", filterVal, "NoFilter");
                                        }
                                        else if (filterVal == "1") {
                                            tableView.filter("Bool", "1", "EqualTo");
                                        }
                                        else if (filterVal == "0") {
                                            tableView.filter("Bool", "0", "IsNull");
                                        }
                                    }
                                </script>

                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridCheckBoxColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            <br />
            <telerik:RadGrid ID="RadGrid2" Width="100%" DataSourceID="SqlDataSource5" AllowFilteringByColumn="True"
                AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
                EnableLinqExpressions="false" OnItemCommand="RadGrid2_ItemCommand">
                <MasterTableView DataKeyNames="OrderID">
                    <Columns>
                        <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"
                            HeaderStyle-Width="110px">
                            <FilterTemplate>
                                Clear filters
    <asp:ImageButton ID="btnShowAll" runat="server" ImageUrl="Img/filterCancel.gif" AlternateText="Show All" ToolTip="Show All" OnClick="btnShowAll_Click"
    Style="vertical-align: middle" />
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="OrderDate" DataField="OrderDate" HeaderText="Order date"
                            DataFormatString="{0:D}" HeaderStyle-Width="350px">
                            <FilterTemplate>
                                From
                                <telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="85px" ClientEvents-OnDateSelected="FromDateSelected"
                                    MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                                to
                                <telerik:RadDatePicker ID="ToOrderDatePicker" runat="server" Width="85px" ClientEvents-OnDateSelected="ToDateSelected"
                                    MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
                                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                                    <script type="text/javascript">
                                        function FromDateSelected(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var ToPicker =$find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');
                                            
                                            var fromDate = FormatSelectedDate(sender);
                                            var toDate = FormatSelectedDate(ToPicker);
                                            
                                            tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
                                            
                                        }
                                        function ToDateSelected(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            var FromPicker =$find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');
                                            
                                            var fromDate = FormatSelectedDate(FromPicker);
                                            var toDate = FormatSelectedDate(sender);
                                                                                    
                                            tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
                                        }
                                        function FormatSelectedDate(picker)
                                        {
                                            var date = picker.get_selectedDate();
                                            var dateInput = picker.get_dateInput();
                                            var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
                                            
                                            return formattedDate;
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="ShippedDate" DataField="ShippedDate" HeaderText="Shipped date"
                            DataFormatString="{0:d}" HeaderStyle-Width="100px">
                            <FilterTemplate>
                                <telerik:RadDatePicker ID="ShippedDatePicker" runat="server" Width="100px" MinDate="07-04-1996"
                                    MaxDate="05-06-1998" FocusedDate="07-04-1996" ClientEvents-OnDateSelected="DateSelected"
                                    DbSelectedDate='<%# SetShippedDate(Container) %>' />
                                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

                                    <script type="text/javascript">
                                        function DateSelected(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            
                                            var date = FormatSelectedDate(sender);
                                            
                                            tableView.filter("ShippedDate", date, "EqualTo");
                                        }
                                        function FormatSelectedDate(picker)
                                        {
                                            var date = picker.get_selectedDate();
                                            var dateInput = picker.get_dateInput();
                                            var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
                                            
                                            return formattedDate;
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Freight" HeaderText="Freight" UniqueName="Freight"
                            HeaderStyle-Width="250px" SortExpression="Freight" DataFormatString="{0:C}">
                            <FilterTemplate>
                                <div style="float: left; padding: 5px 10px 0 0">
                                    $0</div>
                                <telerik:RadSlider runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
                                    Style="float: left" MinimumValue="0" MaximumValue="1010" SmallChange="5" ShowDecreaseHandle="false"
                                    ShowIncreaseHandle="false" Width="135px" SelectionStart='<%# startSlider %>'
                                    SelectionEnd='<%# endSlider %>' OnClientValueChanged="ClientValueChanged" OnClientSlideStart="ClientSlideStart"
                                    OnClientSlideEnd="FreightRangeChanged" />
                                <div style="float: left; padding: 5px 0 0 10px">
                                    $1010</div>
                                <div style="clear: both">
                                    <asp:Literal ID="Literal1" runat="server" Text='<%# "Showing range between: $" + startSlider + " and $" + endSlider %>' />
                                </div>
                                <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">

                                    <script type="text/javascript">
                                        function FreightRangeChanged(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            
                                            var startValue = sender.get_selectionStart();
                                            var endValue = sender.get_selectionEnd();
                                            
                                            tableView.filter("Freight", startValue + " " + endValue, "Between");
                                        }
                                        function ClientValueChanged(sender, args)
                                        {
                                            var tooltip = $find("<%= RadToolTip1.ClientID %>");
                                            
                                            if (!tooltip.isVisible())
                                            {
                                                var activeHandle = sender.get_activeHandle();
                                                if(!activeHandle) return;
                                                       
                                                tooltip.set_targetControl(activeHandle);
                                                tooltip.show();
                                            }
                                            else
                                            {
                                                tooltip.updateLocation();
                                            }
                                            
                                            tooltip.set_text(args.get_newValue());
                                        }
                
                                        function ClientSlideStart(sender, args)
                                        {
                                            var tooltip = $find("<%= RadToolTip1.ClientID %>");
                                            tooltip.hide();
                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
                ShowCallout="false" Height="20px" ShowEvent="fromcode" />
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName, ContactTitle, City, Country, Bool FROM Customers"
                runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT ContactTitle FROM Customers"
                runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT City FROM Customers"
                runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT Country FROM Customers"
                runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource5" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT OrderID, OrderDate, ShippedDate, Freight FROM Orders"
                runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource6" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT Bool FROM Customers"
                runat="server"></asp:SqlDataSource>
            <!-- content end -->
            <telerik:Footer ID="Footer1" runat="server"></telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451