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

RadFilter in RadWindow

  • Show filter
Order IDOrder DateShip ViaShip NameShip AddressFreight
...71727374757677787980...
Page size:
 830 items in 83 pages
1099803/04/19982Wolski Zajazdul. Filtrowa 6820.31
1099903/04/19982Ottilies KäseladenMehrheimerstr. 36996.35
1100006/04/19983Rattlesnake Canyon Grocery2817 Milton Dr.55.12
1100106/04/19982Folk och fä HBÅkergatan 24197.30
1100206/04/19981Save-a-lot Markets187 Suffolk Ln.141.16
1100306/04/19983The Cracker Box55 Grizzly Peak Rd.14.91
1100407/04/19981Maison DeweyRue Joseph-Bens 53244.84
1100507/04/19981Wilman KalaKeskuskatu 450.75
1100607/04/19982Great Lakes Food Market2732 Baker Blvd.25.19
1100708/04/19982Princesa Isabel VinhosEstrada da saúde n. 58202.24
  • 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