In the Excel-like Filtering example for ASP.NET AJAX, the RadGrid utilizes filtering by way of a HeaderContextFilterMenu. In the example, there is a filter icon/button that you'd click on to open the column's context filter menu. Once you apply the filter, the grid filters as you'd expect, but there is nothing to indicate which column is being filtered. For that matter, if there are filters applied to multiple columns, there is no obvious way of knowing which columns are being filtered.
Looking at the attached screenshot, I've filtered CONTACT TITLE column to only display records where the contact is an "Accounting Manager", but when you look at the results there is no visual clue that CONTACT TITLE has been filtered.
Using the provided sample code, how would you alter the code to have it toggle the column's filter icon/button to indicate which column(s) have an actively applied column filter?
DefaultCS.aspx:
<%@ 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>
DefaultCS.aspx.cs:
using Telerik.Web.UI;
using System;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering
{
public partial class DefaultCS : System.Web.UI.Page
{
protected void RadGrid1_FilterCheckListItemsRequested(object sender, GridFilterCheckListItemsRequestedEventArgs e)
{
string DataField = (e.Column as IGridDataColumn).GetActiveDataField();
e.ListBox.DataSource = GetDataTable(DataField);
e.ListBox.DataKeyField = DataField;
e.ListBox.DataTextField = DataField;
e.ListBox.DataValueField = DataField;
e.ListBox.DataBind();
}
public DataTable GetDataTable(string field)
{
string query = string.Format("SELECT DISTINCT {0} FROM Customers", field);
String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
SqlDataAdapter adapter = new SqlDataAdapter();
adapter.SelectCommand = new SqlCommand(query, conn);
DataTable myDataTable = new DataTable();
conn.Open();
try
{
adapter.Fill(myDataTable);
}
finally
{
conn.Close();
}
return myDataTable;
}
}
}
1 Answer, 1 is accepted
Hi Lawrence,
While the HeaderContextMenu doesn't natively support indicating filtered columns, we've provided a sample in our Code Library for this purpose.
Please visit the Visually indicate filtered columns in RadGrid with Excel-Like Filtering article, inspect the implementation, download and test the sample to see the solution in action.
Best Regards,
Rumen
Progress Telerik