Clear button on RadComboBox input?

[omcnmr]

We have a need for a clear button (a small X icon) in the text input area of an editable RadComboBox. This needs to be in place for all RadComboBoxes used across the project. I've been digging around trying to see how this could be done. I found this post, which showed how to add a button that would clear the input, but the button is in the wrong spot (inside the dropdown list), and would have to be manually copied into each RadComboBox somehow. I found that the RadTextBox component has a clear button, but the RadComboBox seems to use only a regular input element. If I could edit or override the entire template for the component I think it would be possible, but I haven't found any way to do that. Is what I'm trying to accomplish doable with the built-in Telerik functionality?

[omcnmr]

Right now I have a RadButton appearing next to the RadComboBox, and through some CSS absolutely position it over the RCB. But I have to manually add this button to each RCB, which is about 1000 different components in the project. Is there a way I can add the button directly to the RCB template instead?

[Valentin Dragnev]

Hello Owen,

The forum threads you have shared are for the WinForms suite while you seem to be asking in the UI for ASP.NET AJAX forum. If you are using RadComboBox for ASP.NET AJAX, you can add a button in the OnClientLoad event and then use the API to clear the selection as explained here

• Clear RadComboBox

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. 

JavaScript:

<script>
    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();
         })
    }
</script>

CSS:

<style>
            .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;
            }
</style>

And HTML:

 <telerik:RadComboBox ID="RadComboBox1" Skin="Default" EmptyMessage="Select an item" OnClientLoad="OnClientLoad" runat="server" RenderMode="Lightweight">
            <Items>
                <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" />
            </Items>
</telerik:RadComboBox>

For your convenience, I've attached the fully runnable solution. 

Hope this will be helpful. 

Regards,
Valentin
Progress Telerik

[omcnmr]

Much more elegant than my solution. Exactly what I needed, thank you!!