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

Add Clear button in RadComboBox

How To

Add a clear button programmatically in RadComboBox input.

RadComboBox clear button

Solution

  • In the OnClientLoad event of the RadComboBox we add a span element containing the "clear button" to the embedded input element.

  • Hook the "click" event of the "clear button".

  • In the onclick event listener clear the current selection of the RadComboBox and set the focus to the input element for performing new selection.

Sample declaration:

<telerik:RadComboBox ID="RadComboBox1" Skin="Default" AllowCustomText="true" EmptyMessage="Select an item" OnClientLoad="OnClientLoad" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>
function OnClientLoad(sender, args) {
    var $clearButton = $telerik.$('<span class="combo-clear-btn"></span>')

    $clearButton.insertAfter($telerik.$(sender.get_inputDomElement()));

    $clearButton.click(function (ev) {
        $telerik.cancelRawEvent(ev);
        sender.clearSelection();
        sender.get_inputDomElement().focus();
    })
}
.combo-clear-btn {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: 32px;
    top: 4px;
    z-index: 2;
    width: 30px;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease 0s,visibility 0s linear .2s;
    font-family: "WebComponentsIcons";
    text-align: center;
}

    .combo-clear-btn:before {
        display: block;
        content: "\e11b";
    }

.RadComboBox:hover .combo-clear-btn {
    display: block;
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease 0s,visibility 0s linear 0s;
}

Notes

The RadComboBox does not provide a clear button by default and there is a Feature Request for it. Additionally, there are some other approaches for achieving similar behavior e.g. by using external button or a button in the HeaderTemplate:

In this article