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

Excel-like Filtering

ContactNameContactTitleAddressCityCountry
12345678910
Page size:
 91 items in 10 pages
Maria AndersSales RepresentativeObere Str. 57BerlinGermany
Ana TrujilloOwnerAvda. de la Constitución 2222México D.F.Mexico
Antonio MorenoOwnerMataderos 2312México D.F.Mexico
Thomas HardySales Representative120 Hanover Sq.LondonUK
Christina BerglundOrder AdministratorBerguvsvägen 8LuleåSweden
Hanna MoosSales RepresentativeForsterstr. 57MannheimGermany
Frédérique CiteauxMarketing Manager24, place KléberStrasbourgFrance
Martín SommerOwnerC/ Araquil, 67MadridSpain
Laurence LebihanOwner12, rue des BouchersMarseilleFrance
Elizabeth LincolnAccounting Manager23 Tsawassen Blvd.TsawassenCanada
  • Sort Ascending
  • Sort Descending
  • Clear Sorting
  • Group By
  • Ungroup
  • Columns

The demo shows the new Grid FilterType called HeaderContext implemented in Q3 2015. This filtering mode provides look and feel that resembles the filter in Excel. To enable this mode you should set the FilterType property of RadGrid to HeaderContext and turn on the header context menu (EnableHeaderContextFilterMenu="true"). Note that for using this feature you should also have the EnableHeaderContextMenu property of the RadGrid control set to "true"

As you can see ListBox populated through DataSource displays the values. You can use the RadGrid1_FilterCheckListItemsRequested event so that the ListBox control rendered in the filter template will be automatically populated. Also TextBox is available above it that can be used to filter the items displayed in the ListBox.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true">
     <div class="demo-container no-bg">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowFilteringByColumn="true" runat="server" FilterType="HeaderContext" EnableHeaderContextMenu="true" 
                EnableHeaderContextFilterMenu="true" AllowPaging="True" PagerStyle-AlwaysVisible="true" OnFilterCheckListItemsRequested="RadGrid1_FilterCheckListItemsRequested" DataSourceID="SqlDataSource1" AllowSorting="true" GroupingEnabled="true">
                <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="CustomerID">
                    <Columns>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="Address" SortExpression="Address" UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="City" FilterControlAltText="Filter City column" HeaderText="City" SortExpression="City" UniqueName="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="Country" FilterControlAltText="Filter Country column" HeaderText="Country" SortExpression="Country" UniqueName="Country">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance