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

Implementing Search Functionality in RadListBox with Checkboxes

Updated over 1 year ago

I'm trying to implement a search box on a RadListBox that has checkboxes. However, when I apply the filter, the checkbox functionality is lost. Is there a way to keep the checkbox functionality while filtering? This knowledge base article also answers the following questions:

How to filter items in RadListBox without losing checkbox states?
How to implement a client-side search feature in RadListBox?
How to preserve checkbox states in RadListBox during filtering?

Solution

To achieve a search or filter functionality in a RadListBox with checkboxes without losing the checkbox states, follow these steps:

Implement Client-Side Filtering: Use JavaScript to filter the items in the RadListBox based on the user's input in a search box.
Preserve Checkbox State: Ensure that checkbox states are preserved during filtering by saving and restoring the checked states.

Here is a sample implementation:

ASP.NET

<telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" ShowCheckAll="true" AutoPostBack="false">
    <Items>
        <telerik:RadListBoxItem Text="Music-Country" Value="Music-Country" />
        <telerik:RadListBoxItem Text="Music-Rap" Value="Music-Rap" />
        <telerik:RadListBoxItem Text="TV-Cartoons" Value="TV-Cartoons" />
        <telerik:RadListBoxItem Text="TV-Drama" Value="TV-Drama" />
    </Items>
</telerik:RadListBox>

JavaScript

function filterListBox(sender) {
    let checkedStates = [];
    let searchText = sender.value.toLowerCase();

    let listBox = $find('<%= RadListBox1.ClientID %>');
    let items = listBox.get_items();

    // Save the checked states
    for (let i = 0; i < items.get_count(); i++) {
        let item = items.getItem(i);
        checkedStates.push(item.get_checked());
    }

    // Filter items based on the search text
    for (let i = 0; i < items.get_count(); i++) {
        let item = items.getItem(i);
        let itemText = item.get_text().toLowerCase();
        item.set_visible(itemText.indexOf(searchText) !== -1);
    }

    // Restore the checked states
    for (let i = 0; i < items.get_count(); i++) {
        let item = items.getItem(i);
        item.set_checked(checkedStates[i]);
    }
}

Key Points:

Search Box: The input element captures the user's search query and calls the filterListBox() function on every key press.
JavaScript Filtering: The filterListBox() function iterates over all items in the RadListBox, setting their visibility based on the search query.
Preserving Checkbox States: Before filtering, the checked states of each item are saved. After filtering, these states are restored, ensuring that checkbox functionality is not lost.

Implementing Search Functionality in RadListBox with Checkboxes

Environment

Description

Solution

See Also