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
1053815/05/19973B's BeveragesFauntleroy Circus4.87
1053916/05/19973B's BeveragesFauntleroy Circus12.36
1054019/05/19973QUICK-StopTaucherstraße 101007.64
1054119/05/19971Hanari CarnesRua do Paço, 6768.65
1054220/05/19973Königlich EssenMaubelstr. 9010.95
1054321/05/19972LILA-SupermercadoCarrera 52 con Ave. Bolívar #65-98 Llano Largo48.17
1054421/05/19971Lonesome Pine Restaurant89 Chiaroscuro Rd.24.91
1054522/05/19972Lazy K Kountry Store12 Orchestra Terrace11.92
1054623/05/19973Victuailles en stock2, rue du Commerce194.72
1054723/05/19972Seven Seas Imports90 Wadhurst Rd.178.43
  • 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