Implementing CheckBox Filtering in RadComboBox When Typing

Updated on Aug 11, 2025

Environment

Product	ComboBox for UI for ASP.NET AJAX
Version	All

Description

I need to implement dynamic checkbox selection in a RadComboBox based on typed input. When typing in the input field, items matching the entered text should be checked. If the input is cleared or modified, items that no longer match should be unchecked.

For instance, typing "St" should check all items containing "St". Further typing, such as "Stain", should narrow the selection down to items containing "Stain".

Solution

To achieve this, use the OnClientBlur event of RadComboBox. This event fires when the combobox loses focus, enabling client-side filtering and checkbox selection:

1. Configure the RadComboBox with CheckBoxes="true" and AllowCustomText="true".
2. Define the OnClientBlur event to handle the filtering logic.
3. Use the client-side API to loop through the items and check/uncheck based on the typed input.

ASP.NET

<telerik:RadComboBox ID="drpConfig" runat="server" CheckBoxes="true" OnClientBlur="onClientBlur" AllowCustomText="true">
    <Items>
        <telerik:RadComboBoxItem Text="SteelA36" />
        <telerik:RadComboBoxItem Text="SteelA572" />
        <telerik:RadComboBoxItem Text="Stainless304" />
        <telerik:RadComboBoxItem Text="Stainless316" />
        <telerik:RadComboBoxItem Text="Aluminum6061" />
        <telerik:RadComboBoxItem Text="Aluminum7075" />
    </Items>
</telerik:RadComboBox>

JavaScript

function onClientBlur(sender, args) {
    let text = sender.get_text().toLowerCase();
    let items = sender.get_items();

    items.forEach((item) => {
        let itemText = item.get_text().toLowerCase();

        itemText.indexOf(text) !== -1 ? item.set_checked(true) : item.set_checked(false);
    });
}

Important Notes

• Using AllowCustomText with CheckBoxes is not fully supported and may lead to unexpected behavior. However, it works reliably for this specific scenario.
• Ensure that the AutoPostBack property is set to false to avoid unnecessary server-side actions.

See Also

• RadComboBox Client-Side Programming Documentation
• RadComboBox OnClientBlur Event