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
Isolate this demo as a stand-alone application

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.
<%@ 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>Telerik ASP.NET Example</title>
</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 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" 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 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">
                        <HeaderStyle Width="150px" />
                        <FilterTemplate>
                            <telerik:RadComboBox ID="ImportedFilter" runat="server" OnClientSelectedIndexChanged="ImportedFilterSelectedIndexChanged"
                                SelectedValue='<%# ((GridItem)Container).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("<%# ((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>
    </div>
    <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>

Find Assistance

Help Us Improve

Was this example helpful?