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

RadFilter in RadWindow

  • Show filter
Order IDOrder DateShip ViaShip NameShip AddressFreight
...31323334353637383940...
Page size:
 830 items in 83 pages
1057824/06/19973B's BeveragesFauntleroy Circus29.60
1057925/06/19972Let's Stop N Shop87 Polk St. Suite 513.73
1058026/06/19973Ottilies KäseladenMehrheimerstr. 36975.89
1058126/06/19971Familia ArquibaldoRua Orós, 923.01
1058227/06/19972Blauer See DelikatessenForsterstr. 5727.71
1058330/06/19972Wartian HerkkuTorikatu 387.28
1058430/06/19971Blondel père et fils24, place Kléber59.14
1058501/07/19971Wellington ImportadoraRua do Mercado, 1213.41
1058602/07/19971Reggiani CaseificiStrada Provinciale 1240.48
1058702/07/19971Que DelíciaRua da Panificadora, 1262.52
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom
  • Sort Ascending
  • Sort Descending
  • Clear Sorting
  • Group By
  • Ungroup
  • Columns
  • Show filter

This demo illustrates how to filter RadGrid by using RadFilter embeded in RadWindow.

RadFilter is placed inside ContentTemplate of modal RadWindow. The controls inside RadWindow ContentTemplate can be used as part of the same page in which it is declared. Thus RadFilter can be accessed directly and ajaxified as follow: 

 
<telerik:AjaxSetting AjaxControlID="RadFilter1">
  <UpdatedControls> 
    <telerik:AjaxUpdatedControl ControlID="RadFilter1" />
 </UpdatedControls>
</telerik:AjaxSetting>

To show the RadFilter control, right click on the RadGrid header and choose the "Show filter" option or click on the button in the GridCommandItemTemplate. A modal RadWindow containing the RadFilter will be opened.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.FilterExamplesCSharp.FilterInRadWindow.DefaultCS"  %>

<%@ 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>
  <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

    <script type="text/javascript">
      function openFilterBuilderDialog() {
        $find('<%=RadWindow1.ClientID %>').show();
            }

            function hideFilterBuilderDialog() {
              $find('<%=RadWindow1.ClientID %>').close();
      }

      function OnHeaderMenuItemClicked(sender, args) {
        if (args.get_item().get_value() == "FilterBuilder") {
          openFilterBuilderDialog();
        }
      }

      function onPanelBarItemClicked(sender, args) {
        if (args.get_item().get_commandName() == "OpenRadFilter") {
          openFilterBuilderDialog();
        }
      }
    </script>
  </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
  <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadFilter1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadFilter1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
      <telerik:AjaxSetting AjaxControlID="ApplyButton">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
      <telerik:AjaxSetting AjaxControlID="RadGrid1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManager>
  <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
  <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Behaviors="Move,Close,Resize" Title="Filter Builder" Modal="true" Width="510px" Height="350">
    <ContentTemplate>
      <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="RadFilter1" FilterContainerID="RadGrid1" ShowApplyButton="false" Style="margin: 10px 0 0 10px"></telerik:RadFilter>
      <asp:Panel ID="FilterButtonPanel" runat="server" Style="margin: 10px 0 0 10px; font-size: medium">
        <asp:LinkButton runat="server" ID="ApplyButton" OnClick="ApplyButton_Click" Text="Apply Expressions" OnClientClick="hideFilterBuilderDialog()"></asp:LinkButton>
      </asp:Panel>
    </ContentTemplate>
  </telerik:RadWindow>
  <div class="demo-container">
    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" EnableHeaderContextMenu="true">
      <MasterTableView IsFilterItemExpanded="false" CommandItemDisplay="Top">
        <CommandItemTemplate>
          <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" OnClientButtonClicked="onPanelBarItemClicked">
            <Items>
              <telerik:RadToolBarButton Text="Show filter" CommandName="OpenRadFilter" ImageUrl="<%#GetFilterIcon() %>" ImagePosition="Right"></telerik:RadToolBarButton>
            </Items>
          </telerik:RadToolBar>
        </CommandItemTemplate>
        <Columns>
          <telerik:GridNumericColumn DataField="OrderID" HeaderText="Order ID" DataType="System.Int32"></telerik:GridNumericColumn>
          <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:dd/MM/yyyy}"></telerik:GridDateTimeColumn>
          <telerik:GridNumericColumn DataField="ShipVia" HeaderText="Ship Via" DataType="System.Int32"></telerik:GridNumericColumn>
          <telerik:GridBoundColumn DataField="ShipName" HeaderText="Ship Name"></telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="ShipAddress" HeaderText="Ship Address"></telerik:GridBoundColumn>
          <telerik:GridNumericColumn DataField="Freight" HeaderText="Freight" DataType="System.Decimal"></telerik:GridNumericColumn>
        </Columns>
      </MasterTableView>
      <HeaderContextMenu OnPreRender="HeaderContextMenu_PreRender" OnClientItemClicked="OnHeaderMenuItemClicked">
      </HeaderContextMenu>
    </telerik:RadGrid>
  </div>
  <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, Freight FROM Orders"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance