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

RadFilter in RadWindow

  • Show filter
Order IDOrder DateShip ViaShip NameShip AddressFreight
...21222324252627282930...
Page size:
 830 items in 83 pages
1045826/02/19973Suprêmes délicesBoulevard Tirou, 255147.06
1045927/02/19972Victuailles en stock2, rue du Commerce25.09
1046028/02/19971Folk och fä HBÅkergatan 2416.27
1046128/02/19973LILA-SupermercadoCarrera 52 con Ave. Bolívar #65-98 Llano Largo148.61
1046203/03/19971Consolidated HoldingsBerkeley Gardens 12 Brewery6.17
1046304/03/19973Suprêmes délicesBoulevard Tirou, 25514.78
1046404/03/19972Furia Bacalhau e Frutos do MarJardim das rosas n. 3289.00
1046505/03/19973VaffeljernetSmagsloget 45145.04
1046606/03/19971Comércio MineiroAv. dos Lusíadas, 2311.93
1046706/03/19972Magazzini Alimentari RiunitiVia Ludovico il Moro 224.93
  • 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