|
RadControls version
|
v.2010.2.929.35
|
| .NET version |
3.5
|
| Visual Studio version |
2008
|
| programming language |
N/A
|
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
Combine RadComboBox-like Filtering with a RadListBox.
I'm using a RadListBox that can contain several hundred RadListBoxItems. Once my user locates the desired item, they need to "assign" it to another object by dragging it to a node in a RadTreeView.
Because there are so many items in my RadListBox, it can be cumbersome for the user to locate the desired item.
I wanted to combine the
filtering functionality of the RadComboBox with the
drag and drop functionality of the RadListBox.
In this "starter" project I set up a text box above the RadListBox that will filter the items much like the RadComboBox.
The RadListIems can be dragged from the left box to the right box.
Here's a
video demo of the usage I implemented.
To run the project,
*Notes:
This is all the functionality I needed for my project, so I had to post what I had and get back to my work. You know what I mean... So here are some notes in case you decide to use my example project as a starting point.
Transfer Button Functionality is not complete: I just needed drag and drop. If you use the transfer buttons instead of drag and drop, you'll need to write some more code to handle your situation. For instance, transfer "all" will transfer hidden items as well. Highlighted matching text will remain highlighted if you use the buttons.
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. I've asked the Telerik folks if I could override this and noted that perhaps the default behavior should be to only stop on visible items.
As a user, I want to use the down arrow as soon as I see my match. I started to implement the functionality where the down arrow set the focus on the RadListBox, but due to the above issue with hidden items, I'm holding off on that implementation for now.
Special Character Matching: If you have "special" characters in your RadListBoxItems that you are trying to match, I wish you much luck. :-) Certain characters are automatically rendered by the RadListBox using their HTML entity equivalent. These items won't be matched.
Also, if you actually have items in your list that will affect a Regular Expression, such as '^', the matching behavior will become unpredictable. In my example, it will not cause an error if the user enters a special character in the filter, but if there is a match for the special character in a RadListBoxItem, it may not match as expected.
You may want to use a RadTextBox to avoid certain characters.
Hope this helps someone get started!
CSS:
JavaScript:
var listbox;
var filterTextBox;
function pageLoad()
{
listbox = $find("<%= RadListBox1.ClientID %>");
filterTextBox = document.getElementById("<%= TextBox1.ClientID %>");
// set on anything but text box
listbox._getGroupElement().focus();
}
function OnClientDroppedHandler(sender, eventArgs)
{
// clear emphasis from matching characters
eventArgs.get_sourceItem().set_text(clearTextEmphasis(eventArgs.get_sourceItem().get_text()));
}
function filterList()
{
clearListEmphasis();
createMatchingList();
}
// clear emphasis from matching characters for entire list
function clearListEmphasis()
{
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(clearTextEmphasis(itemText));
}
)
}
// clear emphasis from matching characters for given text
function clearTextEmphasis(text)
{
var re = new RegExp("</{0,1}em>", "gi");
return text.replace(re, "");
}
// hide listboxitems without matching characters
function createMatchingList()
{
var items = listbox.get_items();
var filterText = filterTextBox.value;
var re = new RegExp(filterText, "i");
items.forEach
(
function(item)
{
var itemText = item.get_text();
if (itemText.toLowerCase().indexOf(filterText.toLowerCase()) != -1)
{
item.set_text(itemText.replace(re, "<em>" + itemText.match(re) + "</em>"));
item.set_visible(true);
}
else
{
item.set_visible(false);
}
}
)
}
ASP.NET Markup: