Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Filter Templates

Contact nameContact titleCityCountryIs Promoted
 
select
select
select
select
Data pager
Data pager
Page size:
PageSizeComboBox
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
RadDatePicker
RadDatePicker
Open the calendar popup.
to
RadDatePicker
RadDatePicker
Open the calendar popup.
RadDatePicker
RadDatePicker
Open the calendar popup.
$0
$1010
Showing range between: $0 and $1010
Data pager
Data pager
Page size:
PageSizeComboBox
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

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.
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.FilterTemplates.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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">
    <title>Filter Templates in Telerik ASP.NET AJAX Grid</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <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" />
    <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" ShowStatusBar="true">
        <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="330px">
                    <FilterTemplate>
                        From
                        <telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="140px" 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="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("<%# ((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>
    </form>
</body>
</html>