Skip to content

Commit 47ec973

Browse files
github-actions[bot]KB Bot
github-actions[bot]
and
KB Bot
authored
Added new kb article grid-filter-as-you-type (#680)
Co-authored-by: KB Bot <[email protected]>
1 parent 2c46a72 commit 47ec973

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎knowledge-base/grid-filter-as-you-type.md

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: Implementing Type Ahead Filtering in RadGrid for ASP.NET AJAX
3+
description: Learn how to implement type-ahead filtering functionality in RadGrid for ASP.NET AJAX using JavaScript and server-side code.
4+
type: how-to
5+
page_title: Filter as you type in RadGrid
6+
slug: grid-filter-as-you-type
7+
tags: radgrid, asp.net ajax, filtering, type-ahead, javascript, server-code
8+
res_type: kb
9+
ticketid: 1685975
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadGrid for ASP.NET AJAX</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>All</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
RadGrid for ASP.NET AJAX does not natively support "type ahead" filtering functionality similar to the RadComboBox component with the `Filter="Contains"` property. However, you can achieve this behavior by implementing custom JavaScript and server-side code to handle key events and dynamically filter the grid data based on user input.
30+
31+
This knowledge base article also answers the following questions:
32+
33+
- How to enable dynamic filtering without pressing Enter in RadGrid for ASP.NET AJAX?
34+
- Is it possible to implement type-ahead filtering in RadGrid column filters?
35+
- How can I create custom filtering behavior in RadGrid for ASP.NET AJAX?
36+
37+
## Solution
38+
39+
To implement type-ahead filtering in RadGrid for ASP.NET AJAX, follow these steps:
40+
41+
Define the columns in the RadGrid with filtering enabled and set the `FilterDelay` property to control the delay before filtering occurs.
42+
43+
````ASP.NET
44+
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
45+
<AjaxSettings>
46+
<telerik:AjaxSetting AjaxControlID="GriSystem">
47+
<UpdatedControls>
48+
<telerik:AjaxUpdatedControl ControlID="GriSystem" />
49+
<telerik:AjaxUpdatedControl ControlID="HiddenField1" />
50+
</UpdatedControls>
51+
</telerik:AjaxSetting>
52+
</AjaxSettings>
53+
</telerik:RadAjaxManager>
54+
55+
<telerik:RadGrid ID="GriSystem" runat="server" AllowFilteringByColumn="true" AllowPaging="True" Width="800px"
56+
AutoGenerateColumns="False" CellSpacing="0" GridLines="None" OnNeedDataSource="GriSystem_NeedDataSource"
57+
GroupingSettings-CaseSensitive="False" OnItemCommand="GriSystem_ItemCommand"
58+
OnItemCreated="GriSystem_ItemCreated">
59+
<GroupingSettings CaseSensitive="False" />
60+
<MasterTableView DataKeyNames="OrderID">
61+
<Columns>
62+
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
63+
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
64+
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
65+
</telerik:GridBoundColumn>
66+
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
67+
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
68+
SortExpression="OrderDate" UniqueName="OrderDate">
69+
</telerik:GridDateTimeColumn>
70+
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
71+
FilterControlAltText="Filter Freight column" HeaderText="Freight"
72+
SortExpression="Freight" UniqueName="Freight">
73+
</telerik:GridNumericColumn>
74+
<telerik:GridBoundColumn DataField="ShipName"
75+
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
76+
SortExpression="ShipName" UniqueName="ShipName" FilterDelay="200"
77+
CurrentFilterFunction="Contains" ShowFilterIcon="false">
78+
</telerik:GridBoundColumn>
79+
<telerik:GridBoundColumn DataField="ShipCountry"
80+
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
81+
SortExpression="ShipCountry" UniqueName="ShipCountry" FilterDelay="200"
82+
CurrentFilterFunction="Contains" ShowFilterIcon="false">
83+
</telerik:GridBoundColumn>
84+
</Columns>
85+
</MasterTableView>
86+
</telerik:RadGrid>
87+
88+
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
89+
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
90+
SelectCommand="SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"></asp:SqlDataSource>
91+
<asp:HiddenField ID="HiddenField1" runat="server" Value="" />
92+
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return false;" />
93+
````
94+
95+
Implement JavaScript to dynamically apply filtering on keypress or paste events.
96+
97+
````JavaScript
98+
function pageLoad() {
99+
let hiddenField = $get('<%= HiddenField1.ClientID %>');
100+
101+
if (hiddenField.value !== "") {
102+
let textBox = $get(hiddenField.value);
103+
let text = textBox.value;
104+
105+
textBox.onfocus = function () {
106+
this.value = "";
107+
this.value = text;
108+
};
109+
110+
textBox.focus();
111+
hiddenField.value = "";
112+
}
113+
}
114+
115+
function textBoxPaste(textBox) {
116+
$get('<%= HiddenField1.ClientID %>').value = textBox.value;
117+
$(textBox).keypress();
118+
}
119+
````
120+
121+
Bind the RadGrid to your data source dynamically and handle filtering commands.
122+
123+
````C#
124+
protected void GriSystem_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
125+
{
126+
string ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
127+
SqlConnection conn = new SqlConnection(ConnString);
128+
SqlDataAdapter adapter = new SqlDataAdapter();
129+
adapter.SelectCommand = new SqlCommand("SELECT [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]", conn);
130+
131+
DataTable myDataTable = new DataTable();
132+
133+
conn.Open();
134+
try
135+
{
136+
adapter.Fill(myDataTable);
137+
}
138+
finally
139+
{
140+
conn.Close();
141+
}
142+
143+
GriSystem.DataSource = myDataTable;
144+
}
145+
protected void GriSystem_ItemCommand(object sender, GridCommandEventArgs e)
146+
{
147+
if (e.CommandName == RadGrid.FilterCommandName)
148+
{
149+
string colName = (e.CommandArgument as Pair).Second.ToString();
150+
GridColumn col = e.Item.OwnerTableView.GetColumn(colName) as GridColumn;
151+
TextBox textBox = (e.Item as GridFilteringItem)[colName].Controls[0] as TextBox;
152+
153+
if (col.FilterDelay != null && textBox != null)
154+
{
155+
HiddenField1.Value = textBox.ClientID;
156+
}
157+
}
158+
}
159+
protected void GriSystem_ItemCreated(object sender, GridItemEventArgs e)
160+
{
161+
if (e.Item is GridFilteringItem)
162+
{
163+
GridFilteringItem filterItem = e.Item as GridFilteringItem;
164+
foreach (GridBoundColumn col in filterItem.OwnerTableView.RenderColumns.OfType<GridBoundColumn>().Where(x => x.FilterDelay != null))
165+
{
166+
TextBox textBox = filterItem[col.UniqueName].Controls[0] as TextBox;
167+
textBox.Attributes.Add("onpaste", "textBoxPaste(this);");
168+
}
169+
}
170+
}
171+
````
172+
173+
## See Also
174+
175+
- [RadGrid Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/overview)
176+
- [Filtering Customization](https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/filtering/custom-option-for-filtering)
177+
- [RadGrid Filtering with Dropdowns](https://www.telerik.com/forums/radgrid-filtering-with-dropdowns)

0 commit comments

Comments
 (0)