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

RadFilter in RadWindow

  • Show filter
Order IDOrder DateShip ViaShip NameShip AddressFreight
12345678910...
Page size:
 790 items in 79 pages
1028316/08/1996 LILA-Supermercado 84.81
1028926/08/19963B's BeveragesFauntleroy Circus22.77
1029430/08/19962Rattlesnake Canyon Grocery2817 Milton Dr.147.26
1029502/09/19962Vins et alcools Chevalier59 rue de l'Abbaye1.15
1029704/09/19962Blondel père et fils24, place Kléber5.74
1029805/09/19962Hungry Owl All-Night Grocers8 Johnstown Road168.22
1029906/09/19962Ricardo AdocicadosAv. Copacabana, 26729.76
1030009/09/19962Magazzini Alimentari RiunitiVia Ludovico il Moro 2217.68
1030109/09/19962Die Wandernde KuhAdenauerallee 90045.08
1030210/09/19962Suprêmes délicesBoulevard Tirou, 2556.27
  • 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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.FilterExamplesCSharp.FilterInRadWindow.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>
  <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