Enter key press in Editable Radcombobox

[saravanan k]

Hi all,
 
          I am using a radcombobox with allowcustomtext = true intended for adding new values not present in the list. When i click on the combobox it gets opened and by default selection points to the first item. Still I can type a text, but when i  press the "enter key instead of the value i typed it commits the one on which the selection was there. I browsed through the documents and came to know this is the default action on pressing the Enter. But is there any way to avoid this and retain the values typed. Please help.

Regards,
Saravanan K

[Kalina]

Hello saravanan k,

The "Enter" key is used for selecting a RadComboBox item by design.
However you can try to handle the OnClientKeyPressing event and add a new RadComboBoxItem like this:

<script  type="text/javascript">

    function AddNewItem()
    {
        var combo = $find("<%= RadComboBox1.ClientID %>");
        var text = combo.get_text();
        var value = combo.get_value();
        var comboItem = new Telerik.Web.UI.RadComboBoxItem();
        comboItem.set_text(text);
        comboItem.set_value(value);
        combo.trackChanges();
        combo.get_items().add(comboItem);
        comboItem.select();
        combo.commitChanges();
        comboItem.scrollIntoView();
    }

    function HandleKeyPress(sender, e) {

       if (e.get_domEvent().keyCode == 13) {
          AddNewItem();
       }
   }

</script>

<telerik:RadComboBox ID="RadComboBox1" runat="server"
OnClientKeyPressing="HandleKeyPress"
Height="140px" Width="210px"
CloseDropDownOnBlur="false" AllowCustomText="true" >
<Items>
 <telerik:RadComboBoxItem Text="item 1" Value="1" />
 <telerik:RadComboBoxItem Text="item 2" Value="2" />
</Items>
</telerik:RadComboBox>

Regards,
Kalina
the Telerik team

[saravanan k]

Thanks Kalina,

    But i made a slight modification not to add it to the list.

 

function RetainTypedValues() {

var combo = $find("<%= drpdown.ClientID %>");

var text = combo.get_text();

var value = combo.get_value();

combo.clearSelection();

combo.set_text(text);

combo.set_value(value);

combo.commitChanges();

}

function HandleKeyPress(sender, e) {

if (e.get_domEvent().keyCode == 13) {

RetainTypedValues();

}

}