Client side filter
Environment
Product | Telerik WebForms ListBox for ASP.NET AJAX |
Description
This example combines a RadTextBox with a RadListBox to filter the RadListBox items much like the RadComboBox filters its items. A video demo can be seen here.
Solution
Notes:
- Up and Down Arrow Usage: If the user uses the up and down arrows to go through a filtered list, it may appear to not work because the up and down arrow will potentially be "stopping" on hidden items.
- Clearing the Filter after a Transfer: I opted to clear the filtered list and the filter after a transfer is made. Otherwise, if the user transfers the item back while your listbox is filtered, you'll need to re-filter. Also, that item may not match the filter criteria and seem to disappear to the user.
<div>
<telerik:RadButton ID="btnSave" runat="server"
Text="Save"
OnClick="btnSave_Click">
<Icon PrimaryIconCssClass="rbSave" />
</telerik:RadButton>
</div>
<div class="listBoxHeaders">
<span style="margin-left: 50px;">Available States
</span>
<span style="margin-left: 136px;">Chosen States
</span>
</div>
<div>
<table style="position: relative; left: -3px; margin-bottom: 2px;">
<tr>
<td>
<telerik:RadTextBox ID="tbAvailableFilter" runat="server"
Width="187px"
EmptyMessage="Search States..."
autocomplete="off"
onkeyup="filterList();" />
</td>
<td>
<telerik:RadButton ID="rbtnClear" runat="server"
Width="22px"
AutoPostBack="false"
OnClientClicking="rbtnClear_OnClientClicking">
<Icon PrimaryIconCssClass="rbClear" />
</telerik:RadButton>
</td>
</tr>
</table>
</div>
<telerik:RadListBox ID="rlbAvailable" runat="server"
Height="250px"
Width="250px"
AllowTransfer="true"
AllowTransferOnDoubleClick="true"
TransferToID="rlbChosen"
EnableDragAndDrop="true"
OnClientTransferring="rlbAvailable_OnClientTransferring"
ButtonSettings-ShowTransferAll="false" />
<telerik:RadListBox ID="rlbChosen" runat="server"
Height="250px"
Width="250px"
EnableDragAndDrop="true"
AllowReorder="true" />
<br />
<br />
<strong>States I've Lived In:</strong>
<asp:Repeater ID="rptStates" runat="server">
<ItemTemplate>
<div><%# Eval("Text") %></div>
</ItemTemplate>
</asp:Repeater>
// Function to filter the items in the list box
function filterList() {
var listbox = $find("<%= rlbAvailable.ClientID %>");
var textbox = $find('<%= tbAvailableFilter.ClientID %>');
// Clear any previous emphasis and create a list with matching items
clearListEmphasis(listbox);
createMatchingList(listbox, textbox.get_textBoxValue());
}
// Function to remove emphasis from matching text in ListBox items
function clearListEmphasis(listbox) {
var re = new RegExp("</{0,1}em>", "gi");
var items = listbox.get_items();
var itemText;
items.forEach(function (item) {
itemText = item.get_text();
item.set_text(itemText.replace(re, ""));
});
}
// Function to emphasize matching text in ListBox items and hide non-matching items
function createMatchingList(listbox, filterText) {
if (filterText != "") {
filterText = escapeRegExCharacters(filterText);
var items = listbox.get_items();
var re = new RegExp(filterText, "i");
items.forEach(function (item) {
var itemText = item.get_text();
if (itemText.match(re)) {
item.set_text(itemText.replace(re, "<em>$&</em>"));
item.set_visible(true);
} else {
item.set_visible(false);
}
});
} else {
// If no filter text provided, show all items
var items = listbox.get_items();
items.forEach(function (item) {
item.set_visible(true);
});
}
}
// Function called when items are being transferred from the list box
function rlbAvailable_OnClientTransferring(sender, eventArgs) {
// Clear emphasis from transferred items
clearListEmphasis(sender);
// Clear the filter text
clearFilterText();
// Refresh the list to show all items
createMatchingList(sender, "");
}
// Function called when the clear button is clicked
function rbtnClear_OnClientClicking(sender, eventArgs) {
// Clear the filter text
clearFilterText();
// Get the list box control
var listbox = $find("<%= rlbAvailable.ClientID %>");
// Clear any emphasis and show all items
clearListEmphasis(listbox);
createMatchingList(listbox, "");
}
// Function to clear the filter text
function clearFilterText() {
var textbox = $find('<%= tbAvailableFilter.ClientID %>');
textbox.clear();
}
// Function to escape special characters for use in regular expressions
function escapeRegExCharacters(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
body {
font-family: Trebuchet MS, Sans-Serif;
}
.listBoxHeaders {
color: Green;
font-weight: bold;
}
.RadListBox span.rlbText em {
background-color: #E5E5E5;
font-weight: bold;
font-style: normal;
}
.rbClear {
background-image: url(images/clear.png);
background-position: center;
background-repeat: no-repeat;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rlbAvailable.LoadContentFile("states.xml");
}
}
protected void btnSave_Click(object sender, EventArgs e)
{
rptStates.DataSource = rlbChosen.Items;
rptStates.DataBind();
}
<?xml version="1.0" encoding="utf-8" ?>
<Items>
<Item Text="Alabama" Value="AL" />
<Item Text="Alaska" Value="AK" />
<Item Text="Arizona" Value="AZ" />
<Item Text="Arkansas" Value="AR" />
<Item Text="California" Value="CA" />
<Item Text="Colorado" Value="CO" />
<Item Text="Connecticut" Value="CT" />
<Item Text="Delaware" Value="DE" />
<Item Text="Florida" Value="FL" />
<Item Text="Georgia" Value="GA" />
<Item Text="Hawaii" Value="HI" />
<Item Text="Idaho" Value="ID" />
<Item Text="Illinois" Value="IL" />
<Item Text="Iowa" Value="IA" />
<Item Text="Kansas" Value="KS" />
<Item Text="Kentucky" Value="KY" />
<Item Text="Louisiana" Value="LA" />
<Item Text="Maine" Value="ME" />
<Item Text="Maryland" Value="MD" />
<Item Text="Massachussetts" Value="MA" />
<Item Text="Michigan" Value="MI" />
<Item Text="Minnesota" Value="MN" />
<Item Text="Mississippi" Value="MS" />
<Item Text="Missouri" Value="MO" />
<Item Text="Montana" Value="MT" />
<Item Text="Nebraska" Value="NE" />
<Item Text="Nevada" Value="NV" />
<Item Text="New Hampshire" Value="NH" />
<Item Text="New Jersey" Value="NJ" />
<Item Text="New Mexico" Value="NM" />
<Item Text="New York" Value="NY" />
<Item Text="North Carolina" Value="NC" />
<Item Text="North Dakota" Value="ND" />
<Item Text="Ohio" Value="OH" />
<Item Text="Oklahoma" Value="OK" />
<Item Text="Oregon" Value="OR" />
<Item Text="Pennsylvania" Value="PA" />
<Item Text="Rhode Island" Value="RI" />
<Item Text="South Carolina" Value="SC" />
<Item Text="South Dakota" Value="SD" />
<Item Text="Tennessee" Value="TN" />
<Item Text="Texas" Value="TX" />
<Item Text="Utah" Value="UT" />
<Item Text="Vermont" Value="VT" />
<Item Text="Virginia" Value="VA" />
<Item Text="Washington" Value="WA" />
<Item Text="West Virgina" Value="WV" />
<Item Text="Wisconsin" Value="WI" />
<Item Text="Wyoming" Value="WY" />
</Items>