New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Filter Templates

Contact nameContact titleCityCountryIs Promoted
 
Page size:
 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
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

OrderIDOrder dateShipped dateFreight
Clear filters
$0
$1010
Showing range between: $0 and $1010
Page size:
 765 items in 110 pages
10305Friday, September 13, 199610/9/1996$257.62
10307Tuesday, September 17, 19969/25/1996$0.56
10314Wednesday, September 25, 199610/4/1996$74.16
10315Thursday, September 26, 199610/3/1996$41.76
10317Monday, September 30, 199610/10/1996$12.69
10319Wednesday, October 2, 199610/11/1996$64.50
10321Thursday, October 3, 199610/11/1996$3.43
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

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.
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.FilterTemplates.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
        <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" />
    <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" Width="100%" DataSourceID="SqlDataSource1" AllowFilteringByColumn="True"
            AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
            ShowStatusBar="true" EnableLinqExpressions="false">
            <MasterTableView DataKeyNames="CustomerID" TableLayout="Fixed">
                <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 RenderMode="Lightweight" ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="ContactTitle"
                                DataValueField="ContactTitle" Width="200px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container,GridItem).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("<%# TryCast(Container,GridItem).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 RenderMode="Lightweight" ID="RadComboBoxCity" DataSourceID="SqlDataSource3" DataTextField="City"
                                DataValueField="City" Width="100px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container,GridItem).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("<%# TryCast(Container,GridItem).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 RenderMode="Lightweight" ID="RadComboBoxCountry" DataSourceID="SqlDataSource4" DataTextField="Country"
                                DataValueField="Country" Width="100px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container,GridItem).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("<%# TryCast(Container,GridItem).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">
                        <HeaderStyle Width="150px" />
                        <FilterTemplate>
                            <telerik:RadComboBox RenderMode="Lightweight" ID="ImportedFilter" runat="server" OnClientSelectedIndexChanged="ImportedFilterSelectedIndexChanged"
                                SelectedValue='<%# TryCast(Container,GridItem).OwnerTableView.GetColumn("Bool").CurrentFilterValue %>'
                                Width="100px" 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("<%# TryCast(Container, GridItem).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 RenderMode="Lightweight" ID="RadGrid2" Width="100%" DataSourceID="SqlDataSource5" AllowFilteringByColumn="True"
            AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
            EnableLinqExpressions="false" OnItemCommand="RadGrid2_ItemCommand" ShowStatusBar="true">
            <MasterTableView DataKeyNames="OrderID" TableLayout="Fixed">
                <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="330px">
                        <FilterTemplate>
                        <telerik:RadLabel runat="server" AssociatedControlID="FromOrderDatePicker" Text="From"></telerik:RadLabel>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                        <telerik:RadLabel runat="server" AssociatedControlID="ToOrderDatePicker" Text="to" Style="padding-left: 5px;"></telerik:RadLabel>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="ToOrderDatePicker" runat="server" Width="140px" 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("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var ToPicker = $find('<%# TryCast(Container, GridItem).FindControl("ToOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(sender);
                                        var toDate = FormatSelectedDate(ToPicker);

                                        tableView.filter("OrderDate", fromDate + " " + toDate, "Between");

                                    }
                                    function ToDateSelected(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var FromPicker = $find('<%# TryCast(Container, GridItem).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 RenderMode="Lightweight" 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("<%# TryCast(Container,GridItem).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 class="sliderLabelLeft">
                                $0
                            </div>
                            <telerik:RadSlider RenderMode="Lightweight" 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; padding-top: 5px;">
                                <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("<%# TryCast(Container,GridItem).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>
    </div>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" OffsetY="10" Position="TopCenter"
        ShowCallout="false" 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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance