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

Add a clear button to RadComboBox input


Product RadComboBox for ASP.NET AJAX


Learn how to add a clear button with a small X icon in the text input area of an editable RadComboBox in the solution section below:


You can add a button in the OnClientLoad event and then use the API to clear the selection as explained here

Here is an example of how you can add this functionality to all the RadComboBox controls in your project by just simply subscribing to the OnClientLoad event of the ComboBox.

    function OnClientLoad(sender, args) {
        var $clearButton = $telerik.$('<span class="combo-clear-btn"></span>')

        $ (ev) {
    .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;
<telerik:RadComboBox ID="RadComboBox1" Skin="Default" EmptyMessage="Select an item" OnClientLoad="OnClientLoad" runat="server" RenderMode="Lightweight">
            <telerik:RadComboBoxItem Text="item 1" Value="1" />
            <telerik:RadComboBoxItem Text="item 2" Value="2" />
            <telerik:RadComboBoxItem Text="item 3" Value="3" />
            <telerik:RadComboBoxItem Text="item 4" Value="4" />
In this article